Can anyone assist me in achieving an image change with a liquid effect similar to the one demonstrated here?
I have a basic image container and I am looking to swap out the image (to another image) on mouseover, implementing this effect, and then return it back to its original state on mouseout with the same effect.
const avatarQuantumBreak = document.querySelector(".avatar_quantum_break");
const avatar = document.querySelector(".avatar");
avatarQuantumBreak.style.opacity = "0";
let hover = () => avatarQuantumBreak.style.opacity = "1";
let normal = () => avatarQuantumBreak.style.opacity = "0";
avatar.onmouseover = () => hover();
avatar.onmouseout = () => normal();html , body {
height:100%;
}
.avatar {
position: relative;
border-radius: 50%;
display: flex;
justify-content: center;
height: 195px;
}
.avatar_simple,
.avatar_quantum_break {
position: absolute;
display: block;
text-align:center;
transition: opacity 1s ease-out;
}
.avatar .avatar_simple img,
.avatar .avatar_quantum_break img {
border-radius: 50%;
display: inline-block;
width: 86%;
height: 100%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/97/three.min.js"></script>
<div class=avatar>
<span class=avatar_simple>
<img src="https://pixel.nymag.com/imgs/fashion/daily/2014/05/27/27-amber-heard.w330.h330.jpg">
</span>
<span class=avatar_quantum_break>
<img src="https://pixel.nymag.com/imgs/daily/vulture/2016/05/31/31-amber-heard.w330.h330.jpg">
</span>
</div>The function responsible for triggering the liquid animation is as follows:
transitionNext() {
TweenMax.to(this.mat.uniforms.dispPower, 2.5, {
value: 1,
ease: Expo.easeInOut,
onUpdate: this.render,
onComplete: () => {
this.mat.uniforms.dispPower.value = 0.0
this.changeTexture()
this.render.bind(this)
this.state.animating = false
}
})
I attempted to use this function without success.
Furthermore, I tried altering the images in line 15 of this Array, but that also did not resolve the issue.
this.images = [ //1
'https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg1.jpg',
'https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg2.jpg',
'https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg3.jpg'
]
This function initializes the animation:
listeners() {
window.addEventListener('wheel', this.nextSlide, { passive: true })
}
Function for transitioning to the next slide:
nextSlide() {
if (this.state.animating) return
this.state.animating = true
this.transitionNext()
this.data.current = this.data.current === this.data.total ? 0 : this.data.current + 1
this.data.next = this.data.current === this.data.total ? 0 : this.data.current + 1
}
Any assistance regarding this matter would be greatly appreciated.