Aitor Posted November 21, 2021 Share Posted November 21, 2021 At first load, start and end markers are placed all together at the top of viewport. This is a first load screenshot: So, all animations start at the first load. Then, when the window is resized, the markers goes to its right place. This is a screenshot after resize window: When I try to do the same in a isolated codepen (see attached codepen) it works as expected. The wrong behavior just happens in my app. I know that is hard to help with no minimal demo that reproduces the error. I'm so sorry about that. I just hope this issue is a known problem. Here is the live site. And here the GSAP code in context import gsap from 'gsap' import ScrollTrigger from 'gsap/ScrollTrigger' gsap.registerPlugin(ScrollTrigger) export default class PostsHtml { constructor() { this.posts = gsap.utils.toArray('.post'); this.posts.forEach(post => { let postName = post.id.replace(/-/g, "") gsap.to(post, { x: 100, scrollTrigger: { trigger: post, start: 'top center', end: 'bottom center', onEnter: () => console.log('enter: ' + postName), onLeave: () => console.log('leave: ' + postName), onEnterBack: () => console.log('enter back: ' + postName), onLeaveBack: () => console.log('leave back: ' + postName), markers: true } }) }) } } What is happening here? Why start and end are not set in the right place at first load? Thanks! See the Pen jOLRWJN?editors=0011 by aitormendez (@aitormendez) on CodePen Link to comment Share on other sites More sharing options...
Aitor Posted November 21, 2021 Author Share Posted November 21, 2021 I've solved the issue starting the gsap stuff into a setTimeout(). I think it is not a clean fix. I dont know exactly why gsap is not working when it is normally called. All the code are into a jQuery document ready function. Any thought about it appreciated. Link to comment Share on other sites More sharing options...
Solution GreenSock Posted November 21, 2021 Solution Share Posted November 21, 2021 ScrollTrigger automatically calls its .refresh() method when the page fires its "load" event (and "DOMContentLoaded", and on "resize" events and when the window goes from hidden to visible) in order to calculate all the start/end positions. Your app must not have the DOM layout set when the page fires the "load" event. Perhaps you're dynamically-loading in new assets or something that takes some extra time. Maybe you're using a framework that takes extra time to actually render things to the DOM. This is why your setTimeout() is helping. None of this is a bug in ScrollTrigger - it's just something in your app that's causing the DOM layout to shift after the "load" event fires. So you need to make sure you tap into whatever lifecycle event your framework fires when it's done messing with the DOM and positioning things, and just call ScrollTrigger.refresh() after the DOM layout is settled. See what I mean? 1 1 Link to comment Share on other sites More sharing options...
Aitor Posted November 22, 2021 Author Share Posted November 22, 2021 13 hours ago, GreenSock said: See what I mean? Yes! very clear. Thank you so much for the explanation. I know this exceed your rol in the forum. This is my first time with this level of complexity. Fortunately, your explanation had excelent results. I've included the html setup (that includes gsap stuff) in a custom ready event after resources are loaded: https://github.com/aitormendez/tomasgarciapiriz/blob/main/site/web/app/themes/sage/resources/scripts/Experience/World/World.js#L36 Now it works as expected with no setTimeout() 🙏 3 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