Animation completing when hitting the scrollTrigger's "start" value

[BlakeDykes]

Hello!

 

I want my timeline to play when the element reaches the ScrollTrigger's start point. Right now it will play correctly when the page is refreshed with the element in view. If I scroll to the element, it will complete as soon as it reaches the start point. 

 

First time using ScrollTrigger, I'm sure I'm forgetting something pretty trivial 

 

Thanks

 

See the Pen vYZbraa by blakedykes (@blakedykes) on CodePen

[OSUblake]

Welcome to forums @BlakeDykes

 

ScrollTrigger should not be in the defaults object as that will create a ScrollTrigger for every tween in the timeline.

 

let t1 = gsap.timeline({
  defaults:{    
    duration: 0.75,
  },
  scrollTrigger: {
    trigger: ".cta-full-width-container",
    start: "top center",
    end: "bottom top",
    markers: true
  }
});

 

[BlakeDykes]

Of course 🙄. Thanks OSUBlake