Jump to content
Search Community

SplitText callback to start second animation

NickNo test
Moderator Tag

Recommended Posts

I've got this animation running where I want the red line to animate to 100% width  once the second line of SplitText has animated in...

 

I've tried setting an active class using a callback - but can't figure out how to get it to fire just on the second line - as I've got it, it fires every time....any help appreciated :)

 

See the Pen dyvxRvd by nickjacobsnz (@nickjacobsnz) on CodePen

Link to comment
Share on other sites

Every tween you have is calling doBackground. You need to add it conditionally like this.

 

let vars = {duration:0.55, yPercent:100, stagger:0.03,ease:'power4.out'};
if (index === 1) {
  vars.onComplete = doBackground;
}

tl.from(chars.chars, vars, ">-30%")

 

Or you could just put the callback in your timeline.

if (index === 1) {
  tl.add(doBackground)
}

 

  • Like 4
  • Thanks 1
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...