Jump to content
Search Community

Reverse Timeline onLeaveBack

M90 test
Moderator Tag

Go to solution Solved by Carl,

Recommended Posts

Hey Guys ! 

 

Straight to the point.

 

I'm animating a element with two different timelines onEnter & OnleaveBack. I really need two separate TL, and not just reverse the effect so I guess I can't use the "toggleActions" method. I am able to make this work once but while scrolling down again the TL won't trigger anymore.

 

Since a lot of animation are consecutives on the same element, my guess was it has something to do with some props leftovers. I've tried different options with the kill() and clearprops method but without result. 

 

I could use some help on this one. 

 

Thanks :)

See the Pen OJwvWjm by m_90 (@m_90) on CodePen

Link to comment
Share on other sites

  • Solution

Hi, 

i'm not exactly sure what effect you are going for. FWIW it seems a bit disorienting to move something down to a y:200 while scrolling up.

That aside I would avoid creating 2 timelines initially time that control the same properties of the same thing.

To avoid conflicts I would suggest creating these animations fresh when you need them inside your callbacks sort of like:

ScrollTrigger.create({
    trigger: ".top-page",
    start: "top-=100 top",
    end: "top+=200 top",
  markers: true,

    onEnter: () => {let tl1 = gsap.timeline({})
    .fromTo("header", 
    {
        y: 0,
        overwrite: 'auto'
    },{
        duration: 2,
        y: 200,
        ease: CustomEase.create("custom", "0.5, 0, 0, 1"),
        overwrite: 'auto'
    })},
    onLeaveBack: () => {let tl2 = gsap.timeline({})
    .to("header", {
        scale: 1.2,
        y: 200,
    })
    .set("header", {y: 200,scale: 1,},"hide")
    .to("header", {opacity:1},"start2")
    .to(("header"), { y: 0, duration: 1, ease: "power4.out" }, "start2")}

});

I would also remove locomotive scroll until you know things are working fine without it.

 

Hopefully this set up will allow you to remove some of redundancy between the 2 animations like tweening and setting y:200 multiple times.

If you need more help please try to simplify the animations as much as possible in a fork of the original pen. 

 

 

  • Like 3
Link to comment
Share on other sites

Hi Carl, 

 

Thanks for the quick answer. 

I implemented your solution, everything works like a charm. 

 

I guess the timeline control were indeed misplaced, much simpler this way.

 

Thanks again

 

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