Multiple triggers in a timeline with ScrollTrigger

[medmedmed75]

Hey everyone!

 

I was wondering if it possible to : 

• first, create a Timeline
• then, on each tween, apply a ScrollTrigger with a different trigger for each element. 

 

The idea is to create a timeline where I can create animation for each element .hero, .infos, .other and the triggers would be these classes. 

 

<section>
  <div class="hero">
    <h1>Title</h1>
  </div>
  <div class="infos">
    <div>
      <p>blablabla</p>
    </div>
  </div>
  <div class="other">
    <div>
      <h2>Subtitle</h2>
    </div>
  </div>
</section>

 

Maybe I can do something like this but it creates multiple ScrollTrigger reference. 

const tweensConfig = [
  {
    type: "to",
    classname: ".hero",
    x: 100,
  },
  {
    type: "from",
    classname: ".infos",
    opacity: 1,
  },
]

const createAnimation = () => itemsClass.map(({ type, classname, ...rest }) =>
	gsap[type](classname, { scrollTrigger: { trigger: classname }, ...rest }))

 

 

Sorry in advance if I did a duplicated post and I just read the common mistakes usage for ScrollTrigger but I can't find a solution. 

 

Many thanks for your help  

[Cassie]

Hi there @medmedmed75

 

There's nothing wrong with creating a scrollTrigger for multiple tweens, so the example you provided is ok in theory.

I'm not sure what you mean by 'create a timeline - then on each tween...' though. You shouldn't add nested scrollTriggers - either add them to individual tweens or to timelines.

 

Obviously do what makes you happy - but I think personally I'd just write it out like this. 
 

gsap.to('.hero', {
 x:100,
 scrollTrigger: '.hero'
})

gsap.from('.infos', {
 opacity: 0,
 scrollTrigger: '.infos'
})

I know there's a common 'DRY' philosophy with code, but I find that animation code is easiest to understand and edit when it's declarative and a bit repetitive. Every time I've tried to abstract away animation code into a clever function I've ended up regretting it (unless it's doing something really repetitive that will definitely not change)

If you're doing custom animations for each section it's usually best to just keep it simple to allow for easy tweaks and adjustments, animation stuff always needs tweaking! That's a strength of GSAP, it makes changing your animation code easy peasy!

 

I hope this helps! Good luck and happy tweening.

[Cassie]

Oh FYI - it's best practice to make the trigger the containing element, not the element that's being animated - especially if you're moving the element on the Y axis, as this can cause buggy behaviour.