0

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);
jps
  • 20,041
  • 15
  • 75
  • 79
Chandan Baruah
  • 23
  • 8
  • please read [Under what circumstances may I add “urgent” or other similar phrases to my question](https://meta.stackoverflow.com/questions/326569/under-what-circumstances-may-i-add-urgent-or-other-similar-phrases-to-my-quest) and why it is usually counter productive to do so. – jps Oct 07 '20 at 08:30
  • 1
    You can EITHER have your animation wired to the scrollbar (scrub: true) OR have its play state triggered with toggleActions, not both. It wouldn't make much sense to have scrub: true and also make things reverse when you leave the section - see what I mean? It's logically incoherent. If you need more help, the best place for dedicated GSAP/ScrollTrigger support is at https://greensock.com/forums. Happy tweening! – Jack Oct 09 '20 at 07:36
  • Hi @Jack sorry for the late reply. I figured that out by myself. I created separate functions and I called each one of them within the scroll trigger callbacks now animations are working but I am facing another issue. If you are within a particular section and if you try refreshing the page then the scroll trigger animations are not re-initializing. For Example, if you are inside a section with the class name 'ABC' and then if you refresh the page the animations are not happening also the pinned element goes up somewhere. Any solutions would be really appreciable. Thanks. – Chandan Baruah Oct 19 '20 at 13:03
  • It's really tough to troubleshoot blind - the best way to handle this would be to create a minimal demo (see https://greensock.com/demo) and post your question along with the demo in the forums at https://greensock.com/forums. Once we see the demo, I'm sure we'll be able to offer some suggestions. – Jack Oct 20 '20 at 14:49
  • Sure I am going to create a demo right away in the GSAP forums. Thanks – Chandan Baruah Oct 20 '20 at 16:50

0 Answers0