Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Splittext.js playing on scroll

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

  • Solution

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.


  • Like 4
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.