I have this Gsap timeline code where Each text box reveals an image. How can I rewrite this code in a proper way where I don't have to duplicate the timeline?
gsap.registerPlugin(ScrollTrigger);
let tl = gsap.timeline({
scrollTrigger: {
trigger: ".text-2", //text wrapper 3
start: "top center ",
end: "top top",
scrub: 1,
markers: true
}
});
tl.fromTo(
".image-1",
{
clipPath: "polygon(0% 0%, 100% -50%, 100% 100%, 0% 100%)"
},
{
clipPath: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)"
}
);
let tl2 = gsap.timeline({
scrollTrigger: {
trigger: ".text-3", //text wrapper 3
start: "top center ",
end: "top top",
scrub: 1,
markers: true
}
});
tl2.fromTo(
".image-2",
{
clipPath: "polygon(0% 0%, 100% -50%, 100% 100%, 0% 100%)"
},
{
clipPath: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)"
}
);
This is the current outcome of the above code https://pixhance-d0ffb1.webflow.io/test
