NeCCen Posted August 10, 2021 Share Posted August 10, 2021 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 Br NeCCen See the Pen mdmGNNX by DJ-PD (@DJ-PD) on CodePen Link to comment Share on other sites More sharing options...
Solution OSUblake Posted August 10, 2021 Solution Share Posted August 10, 2021 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) 4 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now