ScrollTrigger - multiple font sizes on multiple items

[igorlopasovsky 0 Likes (Newbie)]

Hey Guys,

 

I am really struggling with this ScrollTrigger animation. On each scroll I need to "loop" through all the items in the list and set different font size for each of them - the active item will have the biggest size (64px), the previous and the next one will have the medium size (48px) and all others will have the smallest size (32px). There will be more than 3 items in the list.

 

This is the final effect I am trying to achieve is something like this:

 

I would really appreciate any help.

See the Pen yLqKNZP by igorlopasovsky (@igorlopasovsky) on CodePen

[alig01 81 Likes (Contributor)]

Hey,

 

many suggest focusing on the animation first and adding scrollTrigger later, as it adds more complexity and only causes confusion when it doesn't work as expected.

On 1/11/2023 at 3:53 PM, mvaneijgen said:

Keep in mind that ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.

 

In general, I would try to avoid nesting scrollTrigger. Furthermore, timelines are meant to be used for sequencing animations. So instead try to create a timeline outside the loop to which you then assign your animations.

 

See the Pen ZEjxQwO?editors by alig01 (@alig01) on CodePen

 

Hope this points you in the right direction.

Good luck.

 

[igorlopasovsky 0 Likes (Newbie)]

Thank you alig01 for the suggested solution, this is more or less exactly what I was looking for. I will tune it up a little but you definitely pointed me in the right direction. ScrollTrigger could be a little confusing, especially for beginners like me.