Hi guys, I am currently trying to stagger a svg using scroll trigger. For some reason it docent seem to work with the code im using, which is strange because I used the same code for a logo load animation and seems to work perfect. I don't use codepen unfortunately as im new to code. Any ideas what might be the problem? Ive also attached the share link to my site as im using Webflow and you can see the first animation is what im looking for but in the footer section. Ive got my footer position fixed, and using a spacer to reveal the footer when scrolled to the bottom.
https://preview.webflow.com/preview/stellar-bikes?utm_medium=preview_link&utm_source=designer&utm_content=stellar-bikes&preview=8fd574af2c15ba7d2d05f9b7702446c0&workflow=preview
https://stellar-bikes.webflow.io
$(".footer-spacer").each(function (index) {
let triggerElement = $(this);
let targetElement = $(".footer-logo");
let tl = gsap.timeline({
scrollTrigger: {
trigger: triggerElement,
// trigger element - viewport
start: "top 20%bottom",
end: "bottom bottom",
scrub: 1
}
});
tl.from(targetElement, {
opacity: 100,
y: "150",
stagger: .5,
ease: "expo.out",
});
});