Jump to content
GreenSock

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

ScrollTrigger: scrolling fast back breaks reverse. Scrolling slowly works perfectly.

Recommended Posts

Hello!

 

I did try and make a simplified code pen for this issue but I can't reproduce the problem.

 

Scrolling slowly in, out, back, past... reverse works perfectly.

Scrolling fast into a specific section and then back breaks the reverse animation.

 

Here is the published site on github: https://sonya-ninja.github.io/EMIT-Front/

Here is the js file: https://github.com/sonya-ninja/EMIT-Front/blob/master/js/ninja.js

Here is the html: https://github.com/sonya-ninja/EMIT-Front/blob/master/index.html

 

To reproduce the issue:

scroll slowly into the "Our Story" section and back again: should animate reverse smoothly and correctly.

scroll quickly into the "Our Story" section and back again: position and scale does not reverse correctly.

 

Sorry again that this is not a codepen - please tell me if I should create a codepen that duplicates the entire page.

Link to comment
Share on other sites

Hey Sonya. It seems to be working for me. What sort of breaking are you talking about? Does it only happen on a specific OS or browser? Or if you scroll with something in particular (mouse wheel, scrollbar, etc.)?

Link to comment
Share on other sites

Thanks for looking Zach!

 

(Edit: I've only tested in chrome on macbook)

 

When I scroll fast back from the "Our Story" section then the little animated logo doesn't get his size back and his position goes to the centre of the spheres.

 

I've attached two screenshots: The one where he is on the left and slightly bigger is the expected response (slow scroll).

The one where he is smaller and in the centre is the broken reverse - fast scroll.

 

 

Screenshot 2020-07-02 at 22.08.51.png

Screenshot 2020-07-02 at 22.09.21.png

Link to comment
Share on other sites

I'm not seeing that on my Mac in Chrome with my touchpad or magic mouse. Can you check to see if the same thing occurs on another device?

 

As for debugging more, please try to minimize the amount of code. Cut out sections and see if the same error still occurs. Continue to cut out HTML, JS, and CSS until you get to the minimum amount necessary to reproduce the error. Then make a CodePen :) 

Link to comment
Share on other sites

Okay - thanks so much - I'll follow your advice and rework the codepen until I can reproduce the error.

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.
×