Jump to content
Search Community

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

Tee test
Moderator Tag

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