Jump to content
Search Community

ScrollTrigger animations triggered in fixed sections with fade in and out

SpaceHorse test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts



I can't seem to wrap my head around this so any help would be much appreciated!


I want to fade to each section like in this forked example but also have scrolling animations in that section. I was hardcoding the start and end values with a new Timeline and ScrollTrigger but that hardly seemed like an elegant solution and could cause trouble when browser resizes. I think the problem is that since all the sections are fixed, ScrollTrigger thinks that the red section is in view even though it is invisible and thus starts the animation higher than I would want.

See the Pen bGjmyvL by bsadoway (@bsadoway) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @SpaceHorse welcome to the forum!


Mix and matching ScrollTriggers is not something that is really possible, what you could do in this scenario is update the timeline that is already being played and add your new tweens to that timeline. The only issue is that this timeline is not being scrubbed and will just play the animation.


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


This particular demo is for this exact effect nothing more and nothing less, if you thus want to have different animations per section you'll be better off starting from scratch instead of modifying this demo. 


Personally what I would do is removing ScrollTrigger! This seems counter intuitive, but 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.  I would thus start by writing the animations on a timeline, here is some pseudo code.


tl.to(blue, { animate out})

tl.to(red, { animate in})

tl.to(red hello text, { spin around })

tl.to(red, { animate out  })

tl.to(orange, { animate in  })

... ect 


Then when you're happy with the animation, add ScrollTrigger to it. Bellow is a great example video, but the only thing is here it is one tween with a ScrollTrigger and I would suggest for you to create a timeline with the ScrollTrigger on that timeline. Hope it helps and happy tweening! 



Edit: couldn't help my self. Here is a basic setup on how I would go about it. 


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

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Animation code can get lengthy, but GSAP exists to make sure it isn't unwieldy.

It's hard to advise without understanding your use case - you can avoid duplicating code by looping around sections, if that suits your animations. But if each section is different, there's nothing wrong with creating a timeline per section with 20+ tweens on

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