GSAP scroll trigger stagger SVG

[Dmoco]

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",

  });

});

[Dmoco]

Hi guys, no worries I manage to fix it, was quite easy but I forgot to add "path" after the target element name! Here's the updated code for anyone else in the future... 

 

$(".footer-spacer").each(function (index) {

  let triggerElement = $(this);

  let targetElement = $(".footer-logo path");

 

  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",

  });

});

[mvaneijgen]

Hi @Dmoco welcome to the forum! 

 

Glad you've managed to fix it! If you're new to code I would strongly encourage the use of codepen, with it you can just jump in and worry about code and not your whole setup. It is great for experimenting and when facing a bug it is always nice to take a step back and make it small, this is what Codepen is great for! And if that didn't fix it you have an easily sharable link you can post on places like this, which allows others to see/edit your code which is a must when trying to debug something (and isn't possible on a live site).