Jump to content
Search Community

ScrollTrigger timeline not valid when resizing window

Apnw2 test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hello,

I'm trying to move an object (whith position and size function of the window size) to a certain point and size using ScrollTrigger scrub. The problem is that when I resize the window during the scroll, all the timeline is not valid any more because the new move is computed with the current position of the object instead of its initial position. I don't know how to get the position independtely of the properties modified by GSAP. 

I tried to make a codepen to illustrate my problem, but I'm not sure it works well, the goal here is to move the green rectangle on the middle of the screen to the position and size of the one on the top left.

 

Thank's a lot for your help

See the Pen xxpBNLa?editors=1111 by MaxOlliv (@MaxOlliv) on CodePen

Link to comment
Share on other sites

Hi Apnw2,

 

One issue is that you forgot to put invalidateOnRefresh inside the scrollTrigger object. Another issue is that getBoundingClientRect includes transform, which is going to mess up your calculations if there are any transforms applied. It's best to compute all that when animation is invalidated as it will reset those transforms, allowing you to get the correct getBoundingClient values.

 

See the Pen GRyLgYP by GreenSock (@GreenSock) on CodePen

 

  • Like 2
Link to comment
Share on other sites

Hello @OSUblake, thank's for your answer.

I was really enthusiast when I read it since it looked like the answer, but unfortunately so disappointed when I saw it doesn't work on field. I think that's because getBoundingClientRect gives me the value with transform at each time. So maybe because the use of invalidateOnRefresh is not the one we wait.

An other hypothesis could be that my start and end objects are in fact SVG paths so maybe it messes up

Edited by Apnw2
Link to comment
Share on other sites

24 minutes ago, Apnw2 said:

when I saw it doesn't work on field. I think that's because getBoundingClientRect gives me the value with transform at each time.

 

What do you mean by field? It's doing getBoundingClientRect correctly as you can see in the logs there are no transforms when it's called.

 

See the Pen GRyLgYP by GreenSock (@GreenSock) on CodePen

 

If you're trying to have it match up exactly with size and position, it would be probably be better to calculate and animate to the center of each element. The scaling is going to mess up the x and y coordinates if you use the elements top left corner because the transform origin is in the center.

 

  • Like 1
Link to comment
Share on other sites

17 minutes ago, akapowl said:

You might just need the offsetLeft / offsetTop instead - like in this very similar thread:

 

Yeah, that can work too. You just have to be careful if the elements are nested deeply as offsetLeft/offsetTop are relative to the nearest offset parent.

 

 

  • Like 1
Link to comment
Share on other sites

2 hours ago, akapowl said:

Hello @Apnw2

 

You might just need the offsetLeft / offsetTop instead - like in this very similar thread:

 

 

Thank's a lot @akapowl. As @OSUblake pointed out, offsetLeft/ offsetTop was much more difficult because of parents positioning. I discovered the Flip plugin in the thread you joined, and especially its fit() function. I was so amazed because it's doing exactly what I want but in a simplier way.

But now it creates me another problem 😅. I tried a Flip.fit() which is working and doing exactly the move that I want when I give it a duration. But as soon as I try to give it a scrollTrigger with scrub: true instead of the duration parameter, it stops functioning. I found a topic (here) where Flip and ScrollTrigger work together but I think the difference is because it uses Flip.to() instead of Flip.fit() in my case. Moreover, in this other post (here), I'm not sure to understand well but it seems that in any case the animation would be broken on window resizing as in my first problem.

 

I create a new 

See the Pen QWaPNJv by MaxOlliv (@MaxOlliv) on CodePen

 to illustrate the problem, in this, if we comment the second Flip.fit(), the blue rectangle is at its initial position (center of the screen), but if we uncomment it, it jumps instantly to the end position (top left) without any ScrollTrigger scrub.

Thank's for your patience.

Edited by Apnw2
Added Codepen
Link to comment
Share on other sites

2 hours ago, OSUblake said:

You really can't use fit like that by passing in a scrollTrigger. However, you can still use fit to get the values you need. 

 

 

 

 

It works PER-FECT-LY ! 👌
I'm SO grateful to both of you. I'm amazed by how powerful GSAP is and how helpful this forum is.
It has made my week 😍

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