I've been trying to work with GSAP since yesterday and I'm running into some problems and maybe some of you can point me into the right direction (I don't expect a full / complete solution). Let me explain it alongside my code:
Snippet from HTML with TailwindCSS:
<section id="intro" class="flex flex-col items-center relative bg-white text-black overflow-hidden">
<div id="scrolling-text-1" class="w-full py-8 md:py-12 lg:py-16 xl:py-24 2xl:py-32">
<div class="container grid lg:grid-cols-5 gap-8">
<div class="lg:col-span-2 py-12 sm:py-16 lg:py-20 xl:py-24">
<h5>Lorem Ipsum</h5>
<h2 class="mb-12">Lorem ipsum dolor sit amet</h2>
</div>
<div class="lg:col-span-3 py-12 sm:py-16 lg:py-20 xl:py-24">
<p class="text-lg font-grotesk font-medium my-12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
<div id="scrolling-text-2" class="w-full py-8 md:py-12 lg:py-16 xl:py-24 2xl:py-32">
<div class="container grid lg:grid-cols-5 gap-8">
<div class="lg:col-span-2 py-12 sm:py-16 lg:py-20 xl:py-24">
<h5>Lorem Ipsum</h5>
<h2 class="mb-12">Lorem ipsum dolor sit amet</h2>
</div>
<div class="lg:col-span-3 py-12 sm:py-16 lg:py-20 xl:py-24">
<p class="text-lg font-grotesk font-medium my-12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
</section>
JS:
import gsap from "gsap/dist/gsap";
import ScrollTrigger from "gsap/dist/ScrollTrigger"
gsap.registerPlugin(ScrollTrigger);
// fade-in/out animation
let elem1 = gsap.to('#scrolling-text-1', {opacity:0, paused: true, y:"-50%"})
let elem2 = gsap.to('#scrolling-text-2', {opacity:0, paused: true, y:"0%"})
// pin section
ScrollTrigger.create({
trigger: "#intro",
start: "top top",
end: "bottom top",
pin: true,
scrub: true,
markers: true,
animation: elem1
})
I have tried putting elem1 and elem2 into a timeline and executing elem2 after elem1 was finished but elem2 would never appear in the animation it would stay where it originally is. Here's the code from one of my attempts at trying to time elem1 and elem2:
JS (attempt at timing elem1 & elem2):
let elem1 = gsap.timeline({
paused: true,
onComplete: function () {
elem2.play();
}
});
elem1.to("#scrolling-text-1", { opacity: 0, y: "-50%" });
let elem2 = gsap.timeline({
paused: true,
});
elem2.fromTo(
"#scrolling-text-2",
{ opacity: 0, y: "50%" },
{ opacity: 1, y: "0%", ease: "none" }
);
ScrollTrigger.create({
trigger: "#intro",
start: "top top",
end: "bottom top",
pin: true,
scrub: true,
markers: true,
animation: elem1,
});
I tried to run elem2 after the animation of elem1 was done but that didn't seem to work. Can anyone tell me why or push me into the right direction?
Thank you for reading and thank you in advance.
EDIT:
I tried this super simple addition with a timeline but to no avail.
let tl = gsap.timeline();
tl.to('#scrolling-text-1', {opacity:0, paused: true, y:"-50%"});
tl.fromTo('#scrolling-text-2', {y:"100%", opacity:0}, {y:"0%", opacity:1})
ScrollTrigger.create({
trigger: "#intro",
start: "top top",
end: "bottom top",
pin: true,
scrub: true,
markers: true,
animation: tl //added timeline
})
