Jump to content
Search Community

ScrollTrigger - multiple font sizes on multiple items

igorlopasovsky test
Moderator Tag

Go to solution Solved by alig01,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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.

 

  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...