Jump to content
Search Community

ScrollTrigger parallax effect out of sync

NeCCen test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hello

First of all I would like to thanks for an extremely good and powerful platform, great work!
For some time ago (long time ago to be honest) I started to build a HTML template based on GSAP, ScrollMagic and jQuery and I was almost done when GSAP released v3 so I started all over since I thought I should give it a try and do all effects via one platform. I was more and less done for months ago (working on this on my spare time) when I saw that the parallax images gets out of sync efter I resize the browser window (see attached print screens that explain the phenomena better). If I refresh the page it seems to work again but I can't figure out what I am doing wrong. Tested on three different laptops with use of Chrome, Edge and Firefox but the issue can be seen from all of the different browsers and it driving my crazy ;). I have tried so many different things to get this function to work in a 80% (80VH) mode but I am stuck. The other "FlipCard" effect down the page works ok but not as smooth as I would like it to be.

 

Thanks in advance

 

GSAP_parallax_effect_out_of_sync_2.pngGSAP_parallax_effect_out_of_sync_1.png

 

Br

NeCCen

See the Pen mdmGNNX by DJ-PD (@DJ-PD) on CodePen

Link to comment
Share on other sites

  • Solution

You probably need to use invalidateOnRefresh.

Quote
invalidateOnRefresh Boolean - If true, the animation associated with the ScrollTrigger will have its invalidate() method called whenever a refresh() occurs (typically on resize). This flushes out any internally-recorded starting values.

 

And use functions to get values that might change on resize.

 

tl1.to(layer, {
  y: (i, el) => -(el.offsetHeight * el.dataset.depth),
  ease: "none"
}, 0)

 

  • Like 4
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...