Jump to content
Search Community

Issue with ScrollTrigger refresh on resize

teminndtx07 test
Moderator Tag

Recommended Posts

I'm new to ScrollTrigger and looking for some help with screen resizing.

 

I am trying to animate a line along each div as the user scrolls down the page. The triggers and animations work great in both full screen or mobile resolution, but when a user resizes the page (without reloading), the line lengths no longer match the div heights.

 

I'm guessing this is user error, because when I turn on markers, the scroll trigger start and end seem to  be updating to the right locations, but the length of the lines are off.

 

If anyone could point me in the right direction, I would really appreciate it. Thanks!

See the Pen qBbxwgN by teminndtx07 (@teminndtx07) on CodePen

Link to comment
Share on other sites

Hey teminndtx07 and welcome to the GreenSock forums. Thanks a lot for the clear and minimal demo!

 

By default, ScrollTrigger doesn't recalculate functional values in the animation applied to it on refresh (that way it avoids unnecessary calculations if it's not necessary). To have it recalculate values like the height, simply set invalidateOnRefresh: true inside of your ScrollTrigger's options.

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

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