Jump to content
Search Community

Nested Timeline Tweens not playing in reverse properly

BONOMITE 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

The following animated perfectly. All is well. But when I go to REVERSE() the timeline, the ball fades out, but never back in, and continues back to original starting spot at opacity = 0.

 

Why is this?

 

Thanks

 

-Thomas

 

function fadeIn(obj){

var tl = new TimelineMax();

tl.append(TweenMax.to(obj, duration, {css:{opacity:1}, ease:Linear.easeNone}));

return tl;

 

}

 

function fadeOut(obj){

var tl = new TimelineMax();

tl.append(TweenMax.to(obj, duration, {css:{opacity:0}, ease:Linear.easeNone}));

return tl;

 

}

 

var ball = document.getElementById('ball2');

 

 

var tl = new TimelineMax({});

tl.append(TweenLite.from(ball, 12, {css:{marginLeft:900},delay:1}));

tl.append(fadeOut(ball));

tl.append(fadeIn(ball));

Link to comment
Share on other sites

My apologies - there was a value that was literally 0.00000001 off that caused that issue and you'd only notice it if you had two tweens nested in separate timelines that were positioned exactly back-to-back and they tweened the identical properties. Glad you stumbled on that and mentioned it. Should be fixed in the latest version.

Link to comment
Share on other sites

But wait, there's more!

 

I am trying to have the timeline start from 2 seconds in and play reverse.... and it is playing it from the very end then reversing.

 

 

 

playGoingBack(2);

 

function playGoingBack(rev){

 

var tl = new TimelineMax({});

if(rev != undefined){tl.reverse(rev);}

tl.append(TweenMax.to(ball, 5, {css:{scale:4, rotation:360},delay:0}));

 

}

Link to comment
Share on other sites

It looks like you're trying to jump to a place in the timeline that doesn't exist yet - you didn't even populate the timeline before you reversed from a particular spot. See what I mean? You can't go to a time in a timeline that doesn't exist. Just flip-flop those two lines of code and you should be fine.

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