Share Posted April 9, 2017 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 Link to comment Share on other sites More sharing options...
Share Posted April 9, 2017 Hi Adveris Welcome to the forum. Just a couple corrections and we can have this working for you. 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. 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. 4 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now