Reverse Timeline onLeaveBack

[M90]

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

[Carl]

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. 

 

 

[M90]

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

 

[Carl]

Very glad to hear it worked!