Adding a SplitText timeline to my ScrollTrigger

[DeltaFrog]

Hi All,

 

How do I merge these two codes so the SplitText timeline restarts as well when the ScrollTrigger toggleActions fire?       

 

Currently this ScrollTrigger is working by itself: 

gsap.from("#panel1ID", {
  scrollTrigger: {
    trigger: "#panel1ID",
    toggleActions: "restart pause pause pause"
  }, 
  x: -300, 
  duration: 1,
  ease: "expo.out"
});

 

This is the SplitText timeline which is also working by itself. 

let animation = gsap.timeline({})

function init() {
  
  let split = new SplitText("#panelTitleID1", {type:"chars"})
  animation.from(split.chars, { 

  opacity:0, y:50, ease:"back(4)", stagger:{
    from:"start", //try "center" and "edges"
    each:0.05
  }

})
  
  
}

window.addEventListener("load", init)

 

I tried to merge them like this: 
 

let animation = gsap.timeline({})

function init() {
  
  let split = new SplitText("#panelTitleID1", {type:"chars"})
  animation.from(split.chars, { 

    scrollTrigger: {
    trigger: "#panel1ID",
    toggleActions: "restart pause pause pause"
  }, 

  opacity:0, y:50, ease:"back(4)", stagger:{
    from:"start", //try "center" and "edges"
    each:0.05
  }

})
  
  
}

window.addEventListener("load", init)

 

Can anyone help?   

 

 

 

 

 

[PointC]

Hey @DeltaFrog 

 

If I understand your desired outcome, you'd want to add the ScrollTrigger to the timeline rather than individual tweens. There's a nice example on the ScrollTrigger docs page.

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

A minimal demo would also really help to get you the best answers.  

 

Happy tweening.

 

[DeltaFrog]

Thanks Craig!  I'll take another stab at it.  If I still can't get it I'll set up a codepen.  

[DeltaFrog]

 "you'd want to add the ScrollTrigger to the timeline rather than individual tweens" ohhhh I got it.  

See the Pen 4c881a587077bdd68d6c43cffb5d5418 by chriscalabrese (@chriscalabrese) on CodePen

 

   

[PointC]

Yep. 

 

Since the stand-alone ScrollTrigger tween and the SplitText timeline have the same trigger, you can add all of the tweens to the same timeline. Like this.

See the Pen 362d27df4bdb9026630e7b976413cd06 by PointC (@PointC) on CodePen

 

Happy tweening.

 

[DeltaFrog]

Very helpful, thanks Craig.  

[DeltaFrog]

Hey Craig, what's the cleanest way to apply the same animation to another panel and text a little further down the page?   Can I override the default trigger and use the same timeline or should I create a new timeline?  

See the Pen 4c881a587077bdd68d6c43cffb5d5418 by deltafrogcraft (@deltafrogcraft) on CodePen

[PointC]

You'd want to loop through the elements and create a separate timeline and trigger for each group.

 

[PointC]

Like this:

See the Pen e68373e8ab31f5a91f56abc3a9ea524f by PointC (@PointC) on CodePen

 

Happy tweening.

 

[DeltaFrog]

So clean!  Thanks Craig.