Trying to create a simple image change animation

[Duo]

Hi,

 

I am trying to create a simple image change timeline animation.

 

I have 2 images of a bird flapping its wings.

 

When I hover over it I want to set image 1 to visibility: hidden and set image 2 to visibility: visible and have that animation repeat.

 

I'm also wanting to have the animation pause on the currently visible image when the user moves their mouse away.

 

I don't want the change to fade, I want it to be a hard image change.

 

Here is the code I was trying but I'm having no luck. I know there must be a better/easier way to do this.

 

gsap.set(this.pigeonImg1, { autoAlpha: 0 });
gsap.set(this.pigeonImg2, { autoAlpha: 1 });

const pigeonTL = gsap.timeline({ paused: false, repeat: -1 });
pigeonTL.to(this.pigeonImg1, { autoAlpha: 0, duration: 0 });
pigeonTL.to(this.pigeonImg2, { autoAlpha: 1, duration: 0 });
pigeonTL.to(this.pigeonImg1, { autoAlpha: 0, duration: 0 });
pigeonTL.to(this.pigeonImg2, { autoAlpha: 1, duration: 0 });

Any help would be greatly appreciated.

 

Thanks

[mvaneijgen]

Would an ease: "steps(1)" work? This will instantly change the tween instead of the default ease of power1.out. (see the ease docs https://gsap.com/docs/v3/Eases/)  With that adding yoyo: true will make it so that the animation goes back and forth (as a yoyo does) on the timeline. If you need further assistance, please provide a minimal demo, so that we can dive directly in to the code. 

 

✨ A demo speaks a 1000 words ✨
 

Hope it helps and happy tweening! 

[Rodrigo]

Hi,

 

This is an extremely old demo I created quite some years ago:

See the Pen AGjxNR by rhernando (@rhernando) on CodePen

 

You can update the code using our GSAP 3 Migration Guide:

https://gsap.com/resources/3-migration/

 

Another option is to try @Carl's tutorial for seamless loops, you can change the duration of the tweens for set() instances:

https://www.snorkl.tv/greensock-staggers-with-seamless-loops/

 

Hopefully this helps.

Happy Tweening!

[Duo]

Hi @Rodrigo

 

I'm having no luck on this at all. I've created a minimal CodePen here: 

See the Pen xxMqpdv by dayneh88 (@dayneh88) on CodePen

 

What I am trying to achieve is the following:

• Have an animation timeline that cycles through the images with a hard transition (no fade)
• Have the ability to pause the timeline when you  "mouseenter" the images container
• Resume the animation when you "mouseleave" the images container
• Have this written in Vanilla JS (not jQuery)

Any help would be greatly appreciated as I'm pulling my hair out trying to make such a simple thing work

 

Thanks,

Dayne

[Duo]

Hi @mvaneijgen

 

I created a minimal CodePen demo here:  

See the Pen xxMqpdv by dayneh88 (@dayneh88) on CodePen

 

Not sure if you could shed some light on the ease: "steps(1)"  you mentioned and provide a quick demo based off my CodePen.

 

Would greatly appreciate any help.

 

Thanks,

Dayne

[mvaneijgen]

Hi @Duo

 

You were so close, you almost wrote everything already. Too bad you didn't write any tweens! Would love to see what you had come up with. 

 

Here is a quick example how I would set it up, everything is hard coded because that is easier to read and there is always time later to optimise things. I've left out the on mouse enter and leave, because you've wrote that already, you just have to change some values and uncomment it!

 

Hope it helps and happy tweening!  

 

See the Pen GRzWQeP?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[Duo]

HI @mvaneijgen

 

Thanks so much for your assistance. I really appreciate it.

 

I updated my CodePen and I feel like I'm almost there but the only issue I'm having is that at the end of the animation, there is a slight pause before it runs again (image 1, image 2, image 3, pause, start animation again). I don't want that pause, I want it to just continuously loop.

 

I set all the delays to 0 and also set the repeatDelay: 0 in the main animationTL but it's not working.

 

Any help again would be very much appreciated.

 

Thanks,

Dayne

[mvaneijgen]

Check our own @Carl tutorial how to create a seamless looping animation