srollTrigger tweening problem

[Lorenz Perszyk]

Hello GSAP-Community,

New user here, having a bit of hard time with some simple scrollTrigger animations.

The Problem: The animations basically do what they are supposed to, but the tweening
values per step are not even. The values are very large at the beginning and just before
the trigger reaches the end each step is sub 1% ( if viewed with the Inspector) . It almost
looks as if there was a default easing in place. If I disable the scrub, it does look like
there is an ease applied. I have also tried setting the initial width/position in CSS, but read
that it's better to do so in GSAP directly. Also tried with .set and .to, with the same outcome.

 

Considering the animation is working, I hope it's some small detail or syntax logic I missed.

Running on Mac OS (Version 10.15.7) and Firefox ( Version 105.0)

 

Any help much appreciated.

See the Pen NWMamZM by lorenz-perszyk (@lorenz-perszyk) on CodePen

[akapowl]

 

Welcome to the forum, Lorenz.

 

1 hour ago, Lorenz Perszyk said:

If I disable the scrub, it does look like
there is an ease applied.

 

Yep, as it says in the docs ( see Special Properties > ease ) there actually is an ease applied by default.

 

If you want no ease to be applied, meaning tweens to be linear, you need to set ease: 'none'

 

ease

Controls the rate of change during the animation, giving it a specific feel. For example, "elastic" or "strong.inOut". See the Ease Visualizer for a list of all of the options. ease can be a String (most common) or a function that accepts a progress value between 0 and 1 and returns a converted, similarly normalized value. Default: "power1.out".

 

 

[Lorenz Perszyk]

Hello akapowl,

Thank you for taking the time to reply to my question!

 

I think at one point in my hours long search I did set it to ease: 'none' , unfortunately with
the same effect. Looking at the issue again, I just realized I had simply placed it in the
wrong place. I set it in the scrollTrigger object instead of the target element. It's all fixed
|and working now, thank you for pointing me in the right direction!

 

Solution: To create a linear tween set ease: 'none' on the target object settings, NOT on
the scrollTrigger object.

 

e. g. (increase an element's width from 50% to 100%)