dr.Pxl Posted October 19, 2021 Share Posted October 19, 2021 First things first. I absolutely love GSAP and their Scrolltrigger. Everything works fine, but unfortunately, the object I move on the x-axis based on scroll does not update when the user resizes his browser window.' The x value is based on a formula I wrote. Here is a part of the function later added in a master timeline with matchMedia Scrolltrigger: var seoShowBenefitsTl = gsap.timeline(); seoShowBenefitsTl.addLabel("first Benefit") .to(".anim-screen-item-0", {opacity: 0, duration: 0.5}, "first Benefit") .to(seoATFHardware, {x: () => (document.documentElement.clientWidth - seoATFHardware.clientWidth) / 2 + calculateOffsetToElement(document.querySelector('.anim-point-item.--revenue'), 120, "right"), duration: 1, ease: Power3.in, onUpdate: function() { if (this.progress() >= 0.5) { document.querySelector('.anim-screen-item.--revenue').classList.add("js-screen-item-engaged"); document.querySelector('.anim-point-item.--revenue').classList.add("js-point-item-engaged"); } else { document.querySelector('.anim-screen-item.--revenue').classList.remove("js-screen-item-engaged"); document.querySelector('.anim-point-item.--revenue').classList.remove("js-point-item-engaged"); } }}, "first Benefit") //some more code return seoShowBenefitsTl I also built a little demo via codepen: The red cube should move to the center of the window after scrolling. It works fine, but after resizing the window, it moves not to the center. If I reload the pen (on same window size it didn't work before) and try again it works again. You habe to open the pen for a better view. Maybe someone can give me a little help. Thank you in advance! See the Pen QWMjqPW by dr_pxl (@dr_pxl) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted October 19, 2021 Share Posted October 19, 2021 Hey @dr.Pxl Try adding invalidateOnRefresh: true to your ScrollTrigger - that should do the trick. From the ScrollTrigger documentation: 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. See the Pen 2827a530689a5a53049cc37b058956ab by akapowl (@akapowl) on CodePen 4 Link to comment Share on other sites More sharing options...
dr.Pxl Posted October 19, 2021 Author Share Posted October 19, 2021 Wow amazing! That was it. You awesome @akapowl 4 Link to comment Share on other sites More sharing options...
Cassie Posted October 20, 2021 Share Posted October 20, 2021 He is pretty awesome 🥳 2 1 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