Jump to content
Search Community

Timeline Partial Element Reverse

netroid 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

Hy

 

Is der any way to set reverse:false on partial elements in Timeline like this:

 

var Texte = new TimelineMax();

    Texte
        .to(one, 1.5, {opacity:1}, REVERSE:FALSE ?!?)
        .to(two, 1.5, {opacity:1})
        .to(three, 1.5, {opacity:1})
        .to(text, 1.5, {opacity:1})
        .staggerTo(likes, 1, {opacity:1, yoyo:true, repeat: 1}, 2)
        .to('.like:last()', 1, {opacity:1}, "-=1");

Link to comment
Share on other sites

Hi netroid :)

 

I'm not sure I understand the question. Are you reversing the timeline, but you don't want that first tween to reverse? If that's the question, you could simply put that tween off on its own or use a label to control how far the timeline plays in reverse.

 

Could you possibly put that into a CodePen for us and provide a few more details about your question please? 

 

Thanks and happy tweening.

:)

Link to comment
Share on other sites

"Are you reversing the timeline, but you don't want that first tween to reverse?"

 

Exactly :)

 

 

"simply put that tween off on its own or use a label to control how far the timeline plays in reverse"

 

Ok, dont Know how to do this, can you explain without a Codepen?

Link to comment
Share on other sites

You could put the non-reversing tween on its own timeline or just use a single tween and add an onComplete callback to play the main timeline when it's done. Then you can play/reverse the main timeline all you want without affecting the tween that shouldn't reverse.

 

You could also add a label and use an onComplete to tweenTo() the label. In your example, it could be something like this:

var Texte = new TimelineMax({onComplete: goBack});    
Texte
.to(one, 1.5, {opacity:1})
.add("stopHere")
.to(two, 1.5, {opacity:1})
.to(three, 1.5, {opacity:1})
.to(text, 1.5, {opacity:1})
.staggerTo(likes, 1, {opacity:1, yoyo:true, repeat: 1}, 2)
.to('.like:last()', 1, {opacity:1}, "-=1");

function goBack() {
  Texte.tweenTo("stopHere");
}

I'm not sure what your exact needs are for this, but those are just a couple ideas that could work.

 
Hopefully it helps.
 
Happy tweening.
:)
  • 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...