alechance

Thank you @Rodrigo the speed option is what I need.

Hi everyone, I'm still figuring out how smooth scrooll works. I'm trying to achieve a smoother and faster scroll but I don't understand how I could change my animation to do so. Here is an example of the right easing / timing https://studiovoila.com/ ScrollSmoother.create({ wrapper: '#main-wrapper', content: '#main-content', ease: 'expo', smooth: 1.6, // seconds it takes to "catch up" to native scroll position effects: true // look for data-speed and data-lag attributes on elements and animate accordingly }); Thank you very much for your help.

@PointC My bad! Thank you for your help

@Rodrigo this is strange, I just noticed that pause(0) is not working as it should, have a look https://codepen.io/alechance-the-decoder/pen/ExdmGGG, any idea why? Thank you for your time.

Exactly @Rodrigo thank you very much.

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.

Hi @Cassie I was looking to animate my set of images like you did here with a mouse cursor follow. Also here is another kind of mouse follow that only display one by one like here https://our-revolution.com/, is it possible to show one image then the next one when your cursor is moving and so on? Thank you for your help.

Thank you @elegantseagulls this is indeed a very simple solution. However there is a small delay on my first item before the opacity goes to 1 when my document is loaded, is it possible to force my first item to have an opacity to 1 to avoid this? Here is my updated codepen https://codepen.io/alechance-the-decoder/pen/oNPOpKm To fix this, I have a small delay in css so the opacity animation has time to be applied

Based on @Carl codepen, I would like to animate text opacity animation without any effect, which means my opacity should go from 0 to 1 instantly. In my case I have images instead of text, the transition is "fading" from one image to another. Thank you for your help.

@mvaneijgen this is awesome thank you so much and the tuto from @Carl is exactly what I'm looking for. Again I just learned so much from debugging with you this animation!

Thank you @mvaneijgen it is indeed the most simple solution compared to mine. However if you look closely at the animation, it looks like your animation starts after 3 secondes...am I correct? This is strange because in your code there is no such request. If I understand correctly there is no way to only start the timeline without specific identifier? If I open modal 1, only timeline within my modal 1 is animated? This is important that the timeline starts from the beginning so the user will see the first image. From your documentation restart() should restart and begin playing from the beginning...which is not the case, am I wrong? Again, my apologies for asking so many questions. Have a nice day!

Thank you @Rodrigo here's a minimal demo https://codepen.io/alechance-the-decoder/pen/eYLQMvR I was also considering a timeline for each modal, in my case I could have up to 5 modals...which make it hard to maintain don't you think? Same with hover for pausing my timeline. Another thing from editing your demo, I want to remove Y transform animation by simply using z-index, there's a strange behaviour happening where the first image always comes back with a conflict in my z-index.

Another issue that I have right know: I have multiple triggers with multiple modal overlay, how can I start / pause my timeline only for my selected modal? Here's the scenario: <a data-modal="1">Button modal 1</a> <!-- Click this one --> <a data-modal="2">Button modal 2</a> <div id="1"> <!-- Animate only this one --> <div class="modal-image"> <!-- Timeline 1 --> <img src> <img src> <img src> </div> </div> <div id="2"> <div class="modal-image"> <!-- Timeline 2 --> <img src> <img src> <img src> </div> </div> Thank you again for your help

Thank you @mvaneijgen and @Rodrigo for your help. I noticed that the scenario from @mvaneijgen does not restart from the beginning after closing the modal then reopening it again. I'm guessing it's because of the use of two different events on click while from @Rodrigo it is done with the same one? Also, the first animation takes longer than the other ones to change the z-index, any idea why? Also, quick question about another small addition I want to make, is this possible to pause the timeline on hover? Thank you very much for your help!

@Rodrigo thank you for getting back to me. What I want to achieve is displaying my animation inside a modal overlay. My animation should play only if my overlay is visible, when closed stop the animation and go back to the beginning of my timeline. Here is my updated codepen https://codepen.io/alechance-the-decoder/pen/ZEMqvdE (see code from line 66)