Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

ScrollTrigger - start: "top top" not working as expected

Recommended Posts

In this pen I have 3 sections and want the first section to load the animation by using "top top" is the scrollTrigger start but it seems to not load in the first section animation unless I add start: "-1 top" what I am doing wrong this can't be normal behaviour for the plugin. I feel like it must be me doing something wrong here

See the Pen GRNGXyQ by darren-ignition (@darren-ignition) on CodePen

  • Thanks 1
Link to comment
Share on other sites

Yeah, I don't think that's a bug - it's because you've go the start and end scroll positions to exactly the same value because if the trigger is the same height as the viewport and you set start: "top top" and end: "bottom bottom" that means it's hitting the start and the end at exactly the same time (the top of the element is at the top of the viewport and the bottom of the element is a the bottom of the viewport).


I assume maybe you meant to set end: "bottom top"


Also, if you set start: "top top" but the scrollbar is at the very top, it hasn't really started yet. Think of it like the playhead of a tween/timeline that's positioned at the very beginning (time: 0), it hasn't really started until it moves at least like 0.0001 - see what I mean? 


So it's fine if you want to set your first one to start: "-1 top" to force it to trigger when at the very top of the viewport. 


Does that clear things up? 

  • Like 3
Link to comment
Share on other sites

I did think it may have been me just trying to get a better understanding, thanks for the explanation 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.