Jump to content


Decreasing long list font size on scroll

Recommended Posts

Hi there,


As you can see in my codepen demo, I have created two large sections with animations. One section is long list of background text which font size is decreasing on scroll. Another one section is, a set of images which are rotating around the texts on scroll.

The problem is both animation are not smooth and it seems stuck on fast scrolling. Also, when that decreasing font size animation is on then rotating section does not work as expected where as it works good when fontsize animation is off. 

I need a help here both animation should work smoothly and without affecting other sections. 

See the Pen RwQmrPq by cartos (@cartos) on CodePen

Link to comment
Share on other sites

Hey @Cartos. We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I fix all these problems in my project?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  


Instead of posting a demo with 350+ lines of code, I would recommend just starting with ONE section that illustrates a single GSAP-related issue you're wrestling with and ask about that. Eliminate frameworks like React if you can, and just use a few colored <div> elements and vanilla JS. Usually troubleshooting comes down to isolating as much as possible. Build up from the most basic thing and see where you start having performance problems or logic issues. 

Link to comment
Share on other sites

A few quick things I noticed...

  1. There's no such thing as ease : "fade"
  2. You can either have scrub on a ScrollTrigger -OR- toggleActions. It's logically impossible to have both. 
  3. You definitely should NOT be doing this: 
      defaults: {
        scrollTrigger: {...}

    That would make all the child tweens have a ScrollTrigger which creates logic problems (please read about this common mistake). 

  4. You cannot set a duration on a timeline like gsap.timeline({duration: 30}). A timeline is just a container for animations, so its duration will be based on its children and how they're scheduled. 

  5. There's no such thing as ease: Power3.out. I think you meant ease: "power3.out" which can be shortened to ease: "power3" because ".out" is the default type.

  6. You've got a "triggers" Array that you never populate, but it looks like you're trying to kill() those(?) 

  7. You might want to consider animating the scale of the text rather than the fontSize because not only will that perform better (since you're not affecting document flow), but it won't contaminate the positioning of other ScrollTriggers. Otherwise, you'd need to ScrollTrigger.refresh() after things are resized to adjust all the ScrollTriggers further down on the page because the element(s) higher up shrunk and shifted everything else. 
Link to comment
Share on other sites

Hi I have a question about number 3, I saw this post who says that you should always declare the scrolltrigger in the timeline:



I am confused, which is the best approach? Thank you. Is setting it within the defaults different than outside of defaults?


Link to comment
Share on other sites

I added a comment to that thread to clarify...


Blake didn't mean that all ScrollTriggers must be associated with a timeline - he was simply saying that if you're going to use a ScrollTrigger with a timeline (sequenced animation), you should NOT define multiple ScrollTriggers on individual child tweens inside that timeline (as mentioned in the article I linked to) - you should just define one ScrollTrigger on that particular timeline. 


You can definitely have a ScrollTrigger on an individual tween that's not inside a timeline. That's very common in fact.


And you can have multiple timelines each with their own ScrollTrigger. The key is that you can't have NESTED ones inside a timeline where it boils down to a timeline containing multiple children with ScrollTriggers because it would be logically impossible for them all to have their playhead controlled both by their parent timeline and the scrollbar position. 


Does that clear things up? 

  • Like 1
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.