Find easy to follow instructions
All GSAP animations used in this template are collected here. On this page, you’ll find guidance on how to locate and edit them. Each code block comes with extra notes to make it easier to understand.
You can find the code in the Embed Code inside this template.
Before that, prepare the library package from GSAP for some animations. This animation makes the scrolling experience smoother across all devices.
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/Flip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/TextPlugin.min.js"></script>
<script src="https://unpkg.com/lenis@1.3.1/dist/lenis.min.js"></script> /* =====================================================
SMOOTH SCROLLING (Desktop & Tablet Only)
===================================================== */
if (window.matchMedia("(min-width: 768px)").matches) {
const lenis = new Lenis({
duration: 1.2,
easing: (t) => 1 - Math.pow(1 - t, 3),
smoothWheel: true,
smoothTouch: false
});
function raf(time) {
lenis.raf(time);
ScrollTrigger.update();
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
lenis.on("scroll", ScrollTrigger.update);
} else {
console.log("Lenis disabled on mobile");
}/* =====================================================
HERO (Page Load Animation)
===================================================== */
const splitHeadingHero = new SplitText(
[".heading-home-first", ".heading-home-second"],
{ type: "words" }
);
const splitSublineHero = new SplitText(".subline-home", { type: "lines" });
// Logo & Menu
gsap.from([".menu-left", ".menu-right"], {
y: -80,
opacity: 0,
duration: 0.7,
ease: "power3.out",
stagger: 0.2,
delay: 0.2
});
gsap.from(".brand-logo", {
y: -100,
opacity: 0,
duration: 1,
ease: "back.out(1.7)",
delay: 0.4
});
// Headings & Subline
gsap.from(splitHeadingHero.words, {
y: 100,
opacity: 0,
filter: "blur(20px)",
stagger: 0.05,
duration: 1,
ease: "back.out(1.7)",
delay: 0.6
});
gsap.from(splitSublineHero.lines, {
y: 80,
opacity: 0,
stagger: 0.08,
duration: 1.2,
ease: "power2.out",
delay: 1
});
gsap.from(".button-home", {
opacity: 0,
scale: 0.8,
duration: 1.2,
ease: "power2.out",
delay: 1.3
});
gsap.from([".inner-content-left", ".inner-content-right"], {
y:100,
opacity:0,
duration:1,
ease:"back.out(1.7)",
stagger:0.2
}); /* =========================
ABOUT
========================== */
const splitHeadingAbout = new SplitText(".heading-about", { type: "chars" });
const splitSublineAbout = new SplitText(".tagline-about", { type: "lines" });
const splitDesc = new SplitText(".description-about", { type: "lines, words" });
gsap.timeline({
scrollTrigger: {
trigger: ".featured-art-about",
start: "top 80%",
toggleActions: "play none none none"
}
})
.from(splitHeadingAbout.chars, {
y: 75,
rotateY: -90,
opacity: 0,
stagger: 0.05,
duration: 0.7,
ease: "power2.out"
})
.from(splitSublineAbout.lines, {
y: 80,
opacity: 0,
stagger: 0.08,
duration: 1.2,
ease: "power2.out"
}, "-=0.2")
.from(splitDesc.lines, {
y: 80,
opacity: 0,
stagger: 0.06,
duration: 1.1,
ease: "power2.out"
}, "-=0.3");/* =========================
EVENTS
========================== */
const splitHeadingEvents = new SplitText(".heading-events", { type: "chars" });
gsap.from(splitHeadingEvents.chars, {
y: 75,
rotateY: -90,
opacity: 0,
stagger: 0.05,
duration: 0.7,
ease: "power2.out",
scrollTrigger: {
trigger: ".wrapper-events",
start: "top 80%",
toggleActions: "play none none none"
}
});
/* =========================
COLLECTIONS
========================== */
const splitHeadingColl = new SplitText(".heading-collections", { type: "words, chars" });
const splitSublineColl = new SplitText(".subline-collections", { type: "lines" });
document.querySelectorAll(".subline-collections [aria-hidden='true']")
.forEach(el => el.style.textAlign = "center");
gsap.from(splitHeadingColl.chars, {
y: 75,
rotateY: -90,
opacity: 0,
stagger: 0.05,
duration: 0.7,
ease: "power2.out",
scrollTrigger: {
trigger: ".relative-trigger",
start: "top 60%"
}
});
gsap.from(splitSublineColl.lines, {
y: 100,
opacity: 0,
duration: 1,
delay: 0.5,
ease: "power2.out",
scrollTrigger: {
trigger: ".relative-trigger",
start: "top 60%"
}
});/* =========================
PARTNER
========================== */
const splitHeadingPartner = new SplitText(".heading-partner", { type: "chars" });
const partner = document.querySelectorAll(".div-vlock");
gsap.timeline({
scrollTrigger: {
trigger: ".relative-trigger",
start: "bottom 20%",
toggleActions: "play none none reverse"
}
})
.from(splitHeadingPartner.chars, {
y: 75,
rotateY: -90,
opacity: 0,
stagger: 0.06,
duration: 0.7,
ease: "power2.out"
})
.from(partner, {
opacity: 0,
scale:0.8,
duration: 0.45,
ease: "power2.out",
stagger: 0.05
}, "-=0.3");/* =========================
FAQ
========================== */
const splitHeadingFaq = new SplitText(".text-heading-faq", { type: "chars" });
const accordions = document.querySelectorAll(".accordio-type-one");
gsap.timeline({
scrollTrigger: {
trigger: ".wrapper-faq",
start: "top 70%",
toggleActions: "play none none none"
}
})
.from(splitHeadingFaq.chars, {
y: 75,
rotateY: -90,
opacity: 0,
stagger: 0.05,
duration: 0.7,
ease: "power2.out"
})
.from(accordions, {
opacity: 0,
y: 40,
duration: 0.8,
ease: "power2.out",
stagger: 0.2
}, "-=0.2");
});
</script>