Jump to content
Search Community

ScrollTrigger start and end markers go to right place only after resize window

Aitor test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

At first load, start and end markers are placed all together at the top of viewport. This is a first load screenshot:

 

88021469_Capturadepantalla2021-11-21alas7_34_14.png.fd645f5290b1dcc2ffe460fa3cc9b728.png

 

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:

 

2067560646_Capturadepantalla2021-11-21alas7_34_50.png.ffba15d48134af45258550be9faa8bb9.png

 

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

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

  • Solution

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? 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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()  🙏

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