Jump to content
Search Community

trigger splitText within a slide show.

iammarkmulvey test
Moderator Tag

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

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

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)

 

Demo:

 

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.
×
×
  • Create New...