Jump to content
Search Community

GSAP ScrollTrigger not working with Locomotive Scroll in Laravel after compiling asset with Laravel Mix

Nikhilverma test
Moderator Tag

Recommended Posts

// or all tools are exported from the "all" file (excluding members-only plugins):
import LocomotiveScroll from 'locomotive-scroll'
import { gsap, ScrollTrigger, TextPlugin} from "gsap/all";
// don't forget to register plugins
gsap.registerPlugin(ScrollTrigger, TextPlugin);


// Smooth Scroll Function
const locoScroll = new LocomotiveScroll({
    el: document.querySelector(".scroll-smooth-loco"),
    smooth: true,
    // for tablet smooth
    tablet: { smooth: true },
});
locoScroll.on("scroll", ScrollTrigger.update);

ScrollTrigger.scrollerProxy(".scroll-smooth-loco", {
    scrollTop(value) {
        return arguments.length
            ? locoScroll.scrollTo(value, 0, 0)
            : locoScroll.scroll.instance.scroll.y;
    },
    getBoundingClientRect() {
        return {
            top: 0,
            left: 0,
            width: window.innerWidth,
            height: window.innerHeight
        };
    }

    // follwoing line is not required to work pinning on touch screen

    /* pinType: document.querySelector(".smooth-scroll").style.transform
      ? "transform"
      : "fixed"*/
});

let tl = gsap.timeline(); // define timeline

// Animate graphs function
function initGraphSectionAnimate() {
    tl.from([".graphGrowY"], {
        scaleY: 0,
        transformOrigin: "bottom",
        duration: 2,
        scrollTrigger: {
            trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd",
            start: "top top",
            end: "bottom +=200",
            pin: true,
            scrub: true,
            // markers: true,
        },
    });

    tl.from([".graphGrowFromBottom"], {
        scaleY: 0,
        transformOrigin: "top",
        duration: 2,
        scrollTrigger: {
            trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd",
            start: "top top",
            end: "bottom center",
            scrub: true,
            // markers: true,
        },
    });

    tl.from([".graphGrowCreditCards1"], {
        scaleY: 0,
        transformOrigin: "bottom",
        duration: 2,
        scrollTrigger: {
            trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd",
            start: "top top",
            end: "bottom center",
            scrub: true,
            // markers: true,
        },
    })
        .from([".graphGrowCreditCards2"], {
            scaleY: 0,
            transformOrigin: "bottom",
            duration: 2,
            scrollTrigger: {
                trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd",
                start: "top top",
                end: "bottom center",
                scrub: true,
                // markers: true,
            },
        })
        .from([".graphGrowCreditCards3"], {
            scaleY: 0,
            transformOrigin: "bottom",
            duration: 2,
            scrollTrigger: {
                trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd",
                start: "top top",
                end: "bottom center",
                scrub: true,
                // markers: true,
            },
        })
        .from([".graphGrowCreditCards4"], {
            scaleY: 0,
            transformOrigin: "bottom",
            duration: 2,
            scrollTrigger: {
                trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd",
                start: "top top",
                end: "bottom center",
                scrub: true,
                // markers: true,
            },
        });
}

// Manipulation of numbers function
function initNumberManipulationAnimated(startCountNum, endCountNum, idOfElement) {
    let startCount = startCountNum,
        num = {var:startCount};

    gsap.timeline({
        scrollTrigger: {
            trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd",
            start: "top top",
            end: "+=300",
            scrub: true,
        }
    })
        .to(num, {var: endCountNum, duration: 5, ease:"none", onUpdate:changeNumber})
        .to({}, {duration:2})

    function changeNumber() {
        idOfElement.innerHTML = (num.var).toFixed();
    }

}

// Manipulate All Numbers Function
function manipulateAllNums() {
    initNumberManipulationAnimated(0, 205115, numbers); // For Credit Balance
    initNumberManipulationAnimated(0, 1540, buildbalancecount); // For Bill & Taxes
    initNumberManipulationAnimated(0, 4230, energyPower);
    initNumberManipulationAnimated(0, 3421, bonusNumAnm);
    initNumberManipulationAnimated(0, 56909, EarningsAm);
    initNumberManipulationAnimated(0, 6543, SpentThisMonth);
    initNumberManipulationAnimated(0, 543, clientAmNum);
    initNumberManipulationAnimated(0, 985, LeadsAmNum);
    initNumberManipulationAnimated(0, 780, RevenueAmNum);
    initNumberManipulationAnimated(0, 34, UsersAmNum);
}

// Big Animate Section UI, Code Speed up Section
function bigUiCodeAnimation() {
    // green light Animate
    const greenlightAnimate = gsap.timeline({ repeat: -1 }).to(".greenResLight", {
        opacity: 0,
        duration: 1.5,
        ease: "Power4.inOut"
    });

    // main animation
    const tl = gsap.timeline( {    // defining ScrollTrigger
        scrollTrigger: {
            trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a432-9f01ccfd",
            start: "top top",
            end: "bottom +=350",
            pin: true,
            scrub: true,
            // markers: true,
        }
    })
    tl.fromTo(   // Animating Best ui text
        ".hero-text",
        { y: "50px", opacity: 0, duration: 10, delay: 2 },
        { y: "0px", opacity: 1, stagger: 0.5 },
        "+=1"
    )
        .to(".hero-text", { opacity: 0 }, "+=1") // fade out Best ui text
        .to("#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a432-9f01ccfd", {
                background: 'linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%)',
                scale: 3,
                x: -50,
                ease: "none",
                duration: 10,
            }, "+=1"
        )
        .from([
                ".triangleElementUi",
                ".circleElementUi",
                ".uiShape1",
                ".uiShape2"
            ],
            {  scale: 0,
                opacity: 0,
                transform: "rotate(90deg)",
                duration: 3
            }
            , "+=1"
        )
        .from(".greatManImg1", {scale: 5, opacity: 0, duration: 10}, "+=1")
        .from(".greatManImg2", {scale: 5, opacity: 0, duration: 10}, "+=1")
        .from(".greatManImg3", {scale: 5, opacity: 0, duration: 10}, "+=1")
        .to(".bestUiDesignSec",{opacity: 0, duration: 3}, "+=1")
        .to("#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a432-9f01ccfd", {
                background: '#ffffff',
                x: 7,
                scale: 1,
                ease: "none",
                duration: 10,
            }, "+=1"
        )
        .to("#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a432-9f01ccfd",
            {backgroundImage: "url(frontend/media/best-in-class-ui-code/code-editor-bg.svg)", backgroundSize: "cover", opacity: 1, duration: 3}, "+=1")
        .from(".consoleEditorSvg", {scale: 0.5, opacity: 0, duration: 10, delay: 1}, "+=1")
        .to(".constText", {
            duration: 2,
            text: "const",
            delay: 1
        })
        .to(".getRespText", {
            duration: 2,
            text: "getResponse",
            delay: 1
        })
        .to(".getResEqText", {
            duration: 2,
            text: "=",
            delay: 1
        })
        .to(".getResDataLineText", {
            duration: 2,
            text: "axirio",
            delay: 1
        })
        .to(".getResDataDotText", {
            duration: 2,
            text: ".",
            delay: 1
        })
        .to(".getResDataGetText", {
            duration: 2,
            text: "GetData",
            delay: 1
        })
        .to(".getResDataBreText", {
            duration: 2,
            text: "()",
            delay: 1
        })
        .to(".getResDataColText", {
            duration: 2,
            text: ";",
            delay: 1
        })
        .from(".respSvg", {
            y: -50,
            scale: 1,
            opacity: 0,
            duration: 3,
        })
        .from(".showCodeSlow",{
            opacity: 0,
            duration: 3
        })
        .to("#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a432-9f01ccfd", {
            backgroundImage: '',
            duration: 3,
        })
        .to(".consoleEditorSvg", {
            opacity: 0,
            duration: 3
        })
        .to(".respSvg", {
            opacity: 0,
            duration: 3
        }, "+=1")
        .to("#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a432-9f01ccfd",
            {backgroundImage: "url(frontend/media/best-in-class-ui-code/speed-upBg.png)", backgroundSize: "cover", opacity: 1, duration: 3}, "+=1")
        .from(".speed-upSvg", {
            opacity: 0,
            scale: 0,
            duration: 10
        })
        .from(".fallingAngle", {
            opacity: 0,
            y: -70,
            duration: 3
        });
}


// initializer function
function init() {
    initGraphSectionAnimate();
    manipulateAllNums();
    bigUiCodeAnimation();
}
window.addEventListener("load", function () {
    init();
    // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll.
    ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
    ScrollTrigger.defaults({ scroller: '.scroll-smooth-loco' });
// --- SETUP END ---
});
Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

 

Hello there.

 

One problem is that you are not sticking to the order of progression as it is shown in the locomotive-scroll example on the .scrollerProxy() documentation page; which is this one here.

 

See the Pen zYrELYe by GreenSock (@GreenSock) on CodePen

 

 

 

This following example on the other hand sort of emulates your order of progression, and as you can see, it won't work this way. [Open in wider window to see it not working, because due to the way locomtoive reverts back to native scrolling on narrower viewports the preview here works just fine] 

 

See the Pen vYaErqP by akapowl (@akapowl) on CodePen

 

 

 

You should be adding the refresh-eventListener and setting the default scroller to ScrollTrigger before you create your ScrollTriggers. The latter one of those two probably is the one breaking things for you, so that is one thing that you will likely want to change.

 

If that doesn't resolve things for you, make sure to include a minimal demo that demonstrates your issue. 

 

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

Actually it is Laravel Project and Working Good in Plain Javascript Iam using GSAP, ScrollTrigger, TextPlugin & Locomotive Scroll but I want to compile assets with laravel Mix I compiled it and also there is no error but after including compiled Javascript File in Html file it breaks the animation this problem is coming it is working in plain javascript but not after compiled with Laravel Mix

Screenshot 2023-01-04 at 1.37.54 PM-min.png

Screenshot 2023-01-04 at 1.38.09 PM-min.png

Link to comment
Share on other sites

We're totally unfamiliar with Laravel, sorry, but GSAP should absolutely work anywhere JavaScript can run. It's framework agnostic.

 

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. This definitely sounds like more of a Laravel-related question/problem. I wonder if you've asked in that community. We really try to keep these forums focused on GSAP-specific questions (please see the forum guidelines).

 

Let us know if there are any GSAP-specific questions we can help with. 

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...