Struggling how to reverse my timeline to the beginning on hover

[alechance]

Hi everyone,

 

I'm trying to animate my banner that contains my images so it acts like a "gif" on hover, you can have a look at the first case study from this website https://justified.studio/. I thought reverse() was the solution. However I would like my timeline to go back to the beginning without changing one by one the opacity. 

 

Another question, is there a better solution to not use img:not(:first-child) in my loop? I would like my first image to show up as a preview, therefore my timeline animation would be applied from my second image.

 

Thank you for your help.

See the Pen ExdmGGG by alechance-the-decoder (@alechance-the-decoder) on CodePen

[Rodrigo]

Hi,

 

Maybe this is what you're looking for:

el.addEventListener("mouseleave", () => {
  carousel.pause(0);
});

https://greensock.com/docs/v3/GSAP/Timeline/pause()

 

Hopefully this helps.

Happy Tweening!

[alechance]

Exactly @Rodrigo thank you very much.

[alechance]

@Rodrigo this is strange, I just noticed that pause(0) is not working as it should, have a look , any idea why? Thank you for your time.

[PointC]

It's not working because it isn't there. Add that to your mouseLeave listener and it works just fine.

See the Pen 3359c5bf62e9674d1d54f4c84db96231?editors=1010 by PointC (@PointC) on CodePen

[alechance]

@PointC My bad! Thank you for your help

[Clackonsum]

Regarding your second question, instead of using img:not(:first-child), you can consider assigning a separate class or data attribute to the images you want to animate. Then, you can target that class or attribute in your animation loop, excluding the first image. It should give you more control and flexibility. By the way, if you're interested in trading, you might want to explore meta trading 4 as a platform. It's widely used and offers various features and tools for traders. You can find more information about it online. It's always good to research different platforms and choose one that suits your trading style and preferences.