Jump to content
Search Community

Text Plugin duration issue in timeline

Giles test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi All,

I've been using the Text Plugin with a duration successfully in a timeline, but just moved over to the object syntax to use the speed property and have all elements type at a constant speed. Now the timeline doesn't seem to adhere to the new dynamic duration of the typing, instead of finishing the typing and then moving onto the next part of the timeline it does it straight away. Is this expected behaviour?

 

Cheers,

Giles

See the Pen mdMZZwg by seed75 (@seed75) on CodePen

  • Like 1
Link to comment
Share on other sites

  • Solution

Yeah, that's a very tricky situation because the duration doesn't get updated until that tween actually renders for the first time, but you're inserting the next tween BEFORE that happens, thus it's based on the original duration. 

 

Here's a way you can force that tween to render first (thus update its duration) and then insert it into the timeline: 

See the Pen MWvNjbG?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Does that clear things up? 

  • Like 3
Link to comment
Share on other sites

Thanks Jack, that does!

 

Works well with a helper function to keep the timeline code simpler:

tl.add(createTextTween("#target", "Tween text goes here"));

 

function createTextTween(target, tweenText){
        var tween = gsap.to(target, {ease: "none", text: {speed: 0.4, value: tweenText}});
        tween.progress(1).progress(0);
        return tween;

}

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