GSAP 3 Scroll Trigger on leave animation reverse

I have used GSAP 3.0 ScrollTrigger in one of my websites everything is working fine but I want my animations to be reversed when leaving the section or div. I know there is a callback call onLeave but I am not able to figure out how to use it. I am new to the scroll trigger. I am pasting the code sample for you to understand.

armor animation config

 let armor = gsap.timeline({ scrollTrigger: { trigger: '.armor-animation', pin: true, pinSpacing: true, anticipatePin: .5, scrub: 1, start: "top 150px", end: "+=1500", toggleActions: "play reverse none none", // scroller: ".smooth-scroll" // markers: true, onLeave: () => { // armor.from(".layer-1", .8, { // translateY: 200, // opacity: 0 // }, .5) // console.log("leave"); } } }); 

armor section animation

 armor.from(".layer-1", .8, { translateX: -200, opacity: 0 }, .5) .from(".layer-2", .8, { translateY: 200, opacity: 0 }, .6) .from(".layer-3", .8, { translateY: -200, opacity: 0 }, .6) .from(".crack-effect", 2, { translateY: -200, opacity: 0 }, 2) .from(".method h1", 2, { translateX: 200, opacity: 0 }, .6); 
5

Related questions 0 Scrolling animation issue using Greensock 0 Horizontal scrolling using ScrollMagic and GSAP 0 Slide animation from right to left using scrollMagic Related questions 0 Scrolling animation issue using Greensock 0 Horizontal scrolling using ScrollMagic and GSAP 0 Slide animation from right to left using scrollMagic 0 How to delay GSAP animation with Scroll Magic plugin 1 GSAP ScrollTrigger - Create a Timeline for Every Section 0 GSAP scrollTrigger - animating only the element that was triggered 1 Using GSAP to create horizontal scroll section 0 GSAP stagger animation 1 Run ScrollTrigger animation once (once: true not working) 4 Animating child elements in ScrollTrigger GSAP horizontal scroll Load 7 more related questions Show fewer related questions

Reset to default

Know someone who can answer? Share a link to this question via email, Twitter, or Facebook.

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password

Post as a guest

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

You Might Also Like