Jump to content

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

trigger splitText within a slide show.

Recommended Posts

Thanks for the demo. Very helpful. 

Probably a bunch of ways to do this, but what I came up with keeps most of your code intact.

I did the following:


  1. looped through each slide to split it's text and create a timeline animation for each slide
  2. assigned each slide element a "myTween" variable which references its animation
  3. I used an onComplete callback on the tween that introduces each slide to trigger that slide's myTween animation
  4. When a slide is done moving offscreen I use an onComplete callback to pause that slides animation at the beginning (text hidden).

Give it a look:


See the Pen QMKWxB?editors=0010 by GreenSock (@GreenSock) on CodePen


  • Like 1
Link to comment
Share on other sites

thanks Carl. now how do I do the alternating lines version of the split text within your code?

See the Pen gqAmk by GreenSock (@GreenSock) on CodePen

I can't figure out how/where to replace the chars version you did as a demo.


Again thank you.

Link to comment
Share on other sites

The good news is we recently added a cycle property to stagger tweens that allows you to do that effect in much less code!


tl.staggerFrom(split.lines, 0.5, {opacity:0, cycle:{x:[100, -100]}}, 0.2);


Watch the video here: https://greensock.com/gsap-1-18-0 (same info in docs for stagger methods too)




See the Pen KvgpvW?editors=0010 by GreenSock (@GreenSock) on CodePen


Thanks for bringing that old pen to our attention. I removed it from the SplitText collection and added a new one using cycle.

  • Like 2
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.