Jump to content
Search Community

Reverse nested timeline

classikd test
Moderator Tag

Go to solution Solved by Carl,

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

Hello,

 

I'm sorry I can't explain very well my issue because I don't know why this behavior happens.

In my exemple I would like to understand why as soon as i click a navigation link (home or contact), i get my navigation animations disappear (try opening the navigation again, you'll see the navigation appears without animation) 

 

Do yo have any idea ?

 

Thanks a lot.

 

See the Pen bgKMpO by classikd (@classikd) on CodePen

Link to comment
Share on other sites

  • Solution

If I understand, the problem is that you put your reversed tlNavigation timeline into another timeline and when you tried to play tlNavigation timeline again things looked weird. 

 

Once a timeline is nested in a parent, the nested timeline can only render based on where the parent timeline's playhead is.

When you called play() or reverse() on the nested one, the parents playhead wasn't moving.

 

A possible solution is to NOT nest the tlNavigation timeline in another timeline but add a tweenTo() of the tlNavigation timeline. This creates a tween that moves the position of the tlNavigation playhead but it doesn't technically play or reverse the timeline.

 

var tlChangePage = new TimelineLite();
  tlChangePage
    .add(tlNavigation.tweenTo(0));
    // Others timelines disabled for the example
    // .add(tlCamera)
    // .add(tlMoveCube)
    // .add(tlMoveCube)

tlNavigation must be a TimelineMax to call tweenTo()

 

Does this work better:

 

http://codepen.io/GreenSock/pen/pRZpoG?editors=0010

  • Like 3
Link to comment
Share on other sites

I was just looking at this at the same time Carl posted his answer. My first thought was why not use tlNavigation.reverse() on your <a> tag click function? Then I noticed you had that already but commented it out on line 27.  Is there a particular reason that you're nesting that tlNavigation timeline into a new parent timeline? Just curious.

 

Happy tweening.

:)

  • Like 1
Link to comment
Share on other sites

That's working perfectly now thanks a lot Carl.

I have to go deeper in learning TweenMax, with the experience i have now i think i would never have find this method to solve my problem.

 

I have nested the timeline in another because i tought it was the good way to do, but maybe it's not ?

It looks well organized, easily readable... as I will have many others timelines following the closing navigation animation.

But i'm pretty new in animation with this tool and maybe you have a better way to teach me :)

 

Thanks for your help.

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