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); 5Related 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