Dot scroll animation mobile velocity

[AntonioNB4]

Hi community,

I need from mobile to reduce the scaling speed of the point. I am using matchMedia and trying various solutions. the only one seems to be scrub but with reverse scroll the animation is instantaneous. How can I reduce the scaling speed from mobile without changing the end value (the scroll becomes long) ?

 

See the Pen vYQgevY by Antonio-Nocella (@Antonio-Nocella) on CodePen

[mvaneijgen]

15 hours ago, AntonioNB4 said:

How can I reduce the scaling speed from mobile without changing the end value (the scroll becomes long) ?

If you want the animation to take longer on scroll you'll have to increase the scroll distance, so increasing the end value is the best solution. I would love to know why you don't want to change that, because that is probably an easier problem to solve.

 

See the Pen QWJdJPZ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[AntonioNB4]

33 minutes ago, mvaneijgen said:

If you want the animation to take longer on scroll you'll have to increase the scroll distance, so increasing the end value is the best solution. I would love to know why you don't want to change that, because that is probably an easier problem to solve.

 

 

See the Pen

See the Pen QWJdJPZ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

by mvaneijgen (@mvaneijgen) on CodePen

 

 OK you set end in a different way, i I had set the value like this end: '+=10000' , but on mobile the scroll was too long before reaching the next section.
I will try to set the value as you did.  I will update you.

 

[AntonioNB4]

Ok i tried but i probably misunderstood.

I don't want to prolong the scroll to the next section to have a slowdown in scaling the black dot. I would like to have a normal scroll not prolonged but at the same time the scaling of the black dot should not be instantaneous but linear until it has filled the section it is in. I tried using the value you wrote but I always have a prolonged scrolltrigger but the scaling of the black dot is always too fast. How could I do it? 

[mvaneijgen]

I don't really get what you're asking. Do you want the animation to happen on scroll or you don't want it to happen on scroll? Those are the two options. My previous pen had just suggestions on what values you could use, you always have to tweak the values to your liking. 

 

You could also set scrub: false, then it will just play the animation onEnter (you could also do things onLeave check the docs toggleClass https://greensock.com/docs/v3/Plugins/ScrollTrigger), again below edits to the pen are just suggested values, change them to what suits your animation best. 

 

See the Pen RwqKvrv?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[AntonioNB4]

Yew i want that animation happen on scroll, but setting to 'end' any value from mobile, only increases the scroll time to the next section but the scaling of the black dot is always fast, indeed instantaneous. The solution would be to have an end with a value of 1 with a slowdown in the scaling of the black dot. If it can be done. Otherwise I leave it as it is.

[AntonioNB4]

Probably this will be a solution:

the only problem to fix is that when I reach the 'end' earlier than I should, the scaling animation freezes but I would still like it to continue even if I have passed the end point earlier than expected

See the Pen YzRNBLb by Antonio-Nocella (@Antonio-Nocella) on CodePen

 

[Rodrigo]

Hi,

 

Maybe use this in  your toggle actions:

toggleActions: "restart none reverse reverse"

 

Hopefully this helps.

Happy Tweening!