Scroll Trigger Help!

[Chey Flammer]

I got it working yesterday and I didn't even include the Scroll Trigger CDN but now this afternoon no matter what I do I can't get anything to work in regards to Scroll Trigger. No errors in the console. I included "gsap.registerPlugin(ScrollTrigger)" and nothing still so I got rid of it cause I like as less stuff possible in my JS. This particular animation the line should go from 0 width to 100% when the .hr come to the viewport. 

See the Pen XWmjrEm by Cheyroseflammer (@Cheyroseflammer) on CodePen

[Rodrigo]

Hi @Chey Flammer and welcome to the GreenSock forums!

 

You're making one of the most common ScrollTrigger mistakes, that is nest a ScrollTrigger instance inside a Timeline. So who's actually controlling the animation, the scroll position or the timeline? See the problem?

https://greensock.com/st-mistakes/#st-in-tl

 

From the ScrollTrigger docs:
Can I have multiple nested ScrollTriggers in various child tweens in a timeline?
Technically you could but it usually doesn't make sense. An animation's playhead is controlled by its parent timeline's playhead so as it sweeps over the children it updates their playheads accordingly. However, when you assign an animation to a ScrollTrigger, it gets paused and the ScrollTrigger instance controls its playhead. It wouldn't be good to have multiple things trying to control the same animation's playhead. It's typically best to either have one ScrollTrigger control the entire timeline or use independent tween, each with their own ScrollTrigger.

 

If you want to animate just the <hr> with Scrolltrigger and leave the rest of the elements of that timeline play on page load, just remove that instance from the timeline and create it's own GSAP instance or timeline.

 

If you want that timeline to be controlled by ScrollTrigger, then create a ScrollTrigger configuration for the timeline and not for a single instance inside the timeline.

 

Hopefully this clear things up. Let us know if you have more questions.

Happy Tweening!

[GreenSock]

Yep, @Rodrigo is correct about all that. Also, this is extremely inefficient:

 

$(window).scroll(function () {
  // scroll-up button show/hide script
  if (this.scrollY > 500) {
    $('.scroll-up-btn').addClass('show');
  } else {
    $('.scroll-up-btn').removeClass('show');
  }
});

And could be replaced with a much more efficient ScrollTrigger: 
 

ScrollTrigger.create({
  trigger: ".scroll-up-btn",
  start: 500,
  end: 99999,
  toggleClass: "show"
});

Be very careful about applying CSS transitions to anything that you're animating with JavaScript too. 

 

I wouldn't recommend this either: 

$('html').css('scrollBehavior', 'smooth');

Because that can throw off scroll positioning. It'd be better to just do simple gsap.to(..., {scrollTo: ...}) to get a gradual result. Don't forget to load ScrollToPlugin. 

 

If you're trying to have each .hr line animate in when you scroll it into view, you could do something like: 

let lines = gsap.utils.toArray(".hr");
lines.forEach(line => {
  gsap.from(line, {
    width: 0,
    duration: 3,
    ease: "power4",
    scrollTrigger: {
      trigger: line,
      start: "top 80%",
      toggleActions: "play none none reverse"
    }
  });
});

I'm not sure what you were trying to do with your timeline animation (ScrollTriggered?) but here's a quick fork: 

See the Pen rNrZYoG?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I hope that helps. Enjoy the tools!

[Chey Flammer]

Thanks guys for the solutions. I'm still on my JavaScript learning journey so I am a bit unaware of best practices/efficiency in certain situations so I appreciate the revision help with the scroll up button as well! 

[GreenSock]

No problem, @Chey Flammer. We're all learning. Glad the input was helpful. Good luck!