Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Tee

GSAP.set position, but .reverse() with animation

Recommended Posts

So I'm navigating a page using transitions animated with gsap. I don't know if that's the correct approach, but currently my navigation consists of plain js code reacting to click events. Since I'm using react, I'm trying to implement react-router. 

 

F.e. to check if the about page is opened, I check whether the current path matches with about and then set the correct position of the container (initially it's transformed outside of the view):

aboutTransition = gsap.timeline({onComplete: () => destroyPreviousScroll()})
    .set(revealerAbout.DOM.inner, {
        yPercent: 0
    }, 0)
    .set(revealerAbout.DOM.reverse, {
        yPercent: 0
    }, 0);

 

That's how the transition to about usually looks:

aboutTransition = gsap.timeline({
    onComplete: () => destroyPreviousScroll(),
    onReverseComplete: () => destroyPreviousScroll()
})
    .to(revealerAbout.DOM.inner, duration, {
        ease: ease,
        yPercent: 0
    }, 0)
    .to(revealerAbout.DOM.reverse, duration, {
        ease: ease,
        yPercent: 0
    }, 0)

 

As you can see, usually it includes some ease - but for instantly setting it's position, it doesn't. Using aboutTransition.reverse() for the second example, obviously reverses the animation showing the same thing again but backwards - perfect - but currently for the first example, where I'm instantly setting the position, that's not the case, it just disappears again.

 

To put it short, I need it to appear instantly, as with the first example, but reverse with an animation, as with the second example. How can I achieve this? 

Link to post
Share on other sites

Hey Tee. You can set the reversed property on the timeline itself by setting reversed: true in the timeline vars.

 

If for some reason you need to first create the timeline and then later set its reversed state, you can using tl.reversed(true):

See the Pen zYvqYza by GreenSock (@GreenSock) on CodePen

 

Does that answer your question?

  • Like 1
Link to post
Share on other sites
On 4/16/2020 at 4:04 PM, ZachSaucier said:

Hey Tee. You can set the reversed property on the timeline itself by setting reversed: true in the timeline vars.

 

If for some reason you need to first create the timeline and then later set its reversed state, you can using tl.reversed(true)

 

Does that answer your question?

 

Sorry for the late response, but unfortunately not. But it's easier to explain having your example. 

 

So this black to red transitions happens on every click, that's how the app is supposed to start when it's being opened the normal way. 

But in my case I want a function to execute in case the user opens the app directly navigating to a specific path. This function shall execute the normal animation, but immediately show the red text without a transition - calling reverse() on the other hand, shall show a transition again.

Link to post
Share on other sites

Set up your timeline as a .to like your second example, and then immediately set the progress of that timeline to 1. You might also want to pause the timeline by default, so there isn't a flash of animation as it starts to render before setting the progress.

 

See the Pen WNQxpOX by gem0303 (@gem0303) on CodePen

  • Like 3
  • Thanks 1
Link to post
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.

×