Not able to add scrolltrigger to this stagger animation

[JohnnyD]

Hello!

I'm trying to add ScrollTrigger with to this animation, but I'm not even able to see the markers.  Also, if I wait 5 seconds, the animation completes before I scroll down the page.  Any help would be greatly appreciated!

 

Thank you!

See the Pen dyQNJdd by jduttera (@jduttera) on CodePen

[akapowl]

Hey Johnny,

 

JavaScript is case sensitive, and it looks like you just have a typo.

You wrote scrolltrigger  in the tween's vars, all lower-case, but in there it is supposed to be written as scrollTrigger in camelCase.

 

That should work better already then.
 

gsap.to(triangles, {
  opacity: 1,
  stagger: {
    amount: 5,
    y: 0
  },
  scrolltrigger: { // <----- change this to scrollTrigger
    trigger: "#triangles-pattern",
    start: "top 80%",
    markers: true
  }
});