// 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 ---
});
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
