Jump to content
Search Community

onStart and ScrollTrigger

chrisgannon test
Moderator Tag

Recommended Posts

I would like to use the onStartevent of a timeline to do something when you start scrolling a ScrollTrigger animation.

 

I've noticed that before any interaction at all, onEnterfires once and onStart fires 3 times.

 

I think I understand why onEnter fires but I was only expecting onStart to fire once you start scrolling.

 

Any ideas?

 

Update: I've just noticed onStart also fires when I resize the browser window too.

 

See the Pen 601e72e4e725f0a3e8b0661dacd66b59 by chrisgannon (@chrisgannon) on CodePen

  • Thanks 1
Link to comment
Share on other sites

Hi Chris!

 

Hmmm, a few more things for me to add here when testing in

 

MacOS 10.15.5

Safari 13.1.1

Chrome 83.0.4103.61

Firefox 76.0.1

Edge 83.0.478.44

 

When resizing, onStart definitely fires for me (multiple times) in Safari, Chrome, Firefox.

When resizing, onStart doesn't fire in Edge.

 

onStart only fires once (for each start) in Safari, Chrome, Firefox.

onStart fires three times on page load in Edge ... and then once for each real start.

 

onEnter fires once in Chrome, Firefox ... but multiple times in Safari (when reversing to before onStart is called)

onEnter fires once on page load in Edge (and that one time only)

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Yeah, sorry about any confusion there. To be clear, the reason that happens is that in order to ensure that everything is lined up properly and the start/end positions are calculated the right way, ScrollTrigger must rewind any ScrollTrigger-linked animations when refreshing, do the measurements, then put them back to where they were. And it does a refresh() when the page first loads and when you re-activate a hidden tab and when the page resizes. The whole goal is to ensure that you don't get funky results when the browser shifts things around. That can happen as assets load or when a tab gets re-activated, and of course when the window resizes. 

 

I just replaced the beta file with a new one that I'll be pushing out as 3.3.1 and I added some code to suppressEvents in various scenarios so it should work more the way you expected. Please kick the tires and let me know if you can break anything. 
https://assets.codepen.io/16327/ScrollTrigger.min.js

  • Like 4
  • Thanks 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.
×
×
  • Create New...