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

[Tee 3 Likes (Newbie)]

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? 

[ZachSaucier 7,132 Likes (Superhero)]

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?

[Tee 3 Likes (Newbie)]

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.

[gmullinix 17 Likes (Newbie)]

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