ScrollTrigger animations triggered in fixed sections with fade in and out

[SpaceHorse]

Hiya,

 

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

[mvaneijgen]

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

[SpaceHorse]

Thanks! So simple and yet it just works.

 

The big question is then, lets say I have a ton of to animations for each section (20 alone for section1) . Won't this approach get unwieldy?

[Cassie]

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

[SpaceHorse]

Alrighty that makes sense, thank you very much!