Splittext.js playing on scroll

[Adveris 0 Likes (Newbie)]

Hello, i'm trying to make splittext animation on scroll using scrollmagic, the animation works but every animations are playing when windows is load, and i want my animations works when the parent section of my "content__text" div  is in the viewport 

Anyone can help me to fix it ? 

 

See the Pen aJebRJ by AdverisTeam (@AdverisTeam) on CodePen

[PointC 8,599 Likes (Superhero)]

Hi Adveris 

 

Welcome to the forum.

 

Just a couple corrections and we can have this working for you. 

1. I'm assuming you want the '.is-splited' SplitText to play when each slide hits its trigger in the window? If that's the case, you want to use your jQuery each() loop to create a scene for each slide. As you have it now, you're looping through the .content_text class, but there is only one of those so only one scene is created. Looping through the .slide class fixes that part.
2. The other problem is that you're creating one big timeline for all the SplitText animations rather than one for each slide so the whole thing is triggered on page load. If you create a timeline for each slide in your loop and add it to that scene, you'll be all set.

Here's a fork of your pen with those corrections:

 

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

 

One thing I find quite helpful when working with GSAP and ScrollMagic is to use the ScrollMagic addIndicators plugin. You'll see in my fork of your demo that we now have a a start indicator for each scene so you can be sure everything is created and working correctly.

 

Hopefully that helps.

 

Happy tweening.