[How to make my smooth scroll a bit faster]

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

[How to make my smooth scroll a bit faster]

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. 

[Struggling how to reverse my timeline to the beginning on hover]

@PointC My bad! Thank you for your help

[Struggling how to reverse my timeline to the beginning on hover]

@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.

[Struggling how to reverse my timeline to the beginning on hover]

Exactly @Rodrigo thank you very much.

[Struggling how to reverse my timeline to the beginning on hover]

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

[Mouse cursor follow animation]

On 12/28/2021 at 12:35 PM, Cassie said:

Ok!  I see.

So currently the function is being called hundreds and hundreds of times on every mouse move, which means your timeline is constantly being overwritten

From your description you just want to

 

1) size them up when the mouse starts moving
2) make them small when it stops moving

 

So you'll need to detect those exact moments and then only animate the size when they happen.
 

 

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.

[How to stop my opacity animation effect, I want my opacity style from 0 to 1 without animation]

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  To fix this, I have a small delay in css so the opacity animation has time to be applied

[How to stop my opacity animation effect, I want my opacity style from 0 to 1 without animation]

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.

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

[How to start my animation if only it contains 'is-animated' class. Once 'is-animated' is removed stop the animation and reverse to the beginning]

@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! 

[How to start my animation if only it contains 'is-animated' class. Once 'is-animated' is removed stop the animation and reverse to the beginning]

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!

[How to start my animation if only it contains 'is-animated' class. Once 'is-animated' is removed stop the animation and reverse to the beginning]

Thank you @Rodrigo here's a minimal demo 

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

 

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.

[How to start my animation if only it contains 'is-animated' class. Once 'is-animated' is removed stop the animation and reverse to the beginning]

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

[How to start my animation if only it contains 'is-animated' class. Once 'is-animated' is removed stop the animation and reverse to the beginning]

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!

[How to start my animation if only it contains 'is-animated' class. Once 'is-animated' is removed stop the animation and reverse to the beginning]

@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  (see code from line 66)

[How to start my animation if only it contains 'is-animated' class. Once 'is-animated' is removed stop the animation and reverse to the beginning]

Hello there,

 

I'm quite new so this might be a dumb question

I'm trying to animate my rotating images only after 'is-animated' class is contained with 'image-mask'. Once this class is removed, stop the animation. When adding again 'is-animated' start it again from the beginning.

Thank you so much for your help!

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