Jump to content
Search Community

ScrollTrigger: how to keep progress value on window resize?

sytx.99 test
Moderator Tag

Recommended Posts

Hi, so I have created multiple backgrounds which I would like to squeeze and expand as shown in my codepen example. However, trigger position gets messed up everytime I resize the window, the <img> will be gone and the start position is shifted. 1) How do I keep everything as it is even on window resize? 

 

2) And also because I will be making quite a few of these backgrounds and repeating the squeeze and expand for each of them as shown in my Codepen, I'm wondering if there is a more effective way to do it rather than having one timeline for each background? I've noticed some lag when I have too many timelines, especially with the start position adding +=180% for each timeline... (by the 20th background the start is at +=3420%... )

 

I'm new to all of this so I apologise if any of my questions seem obvious. Any help is appreciated, thanks in advance!

See the Pen dyMmRPy by cocotx (@cocotx) on CodePen

Link to comment
Share on other sites

Hey sytx.99 and welcome to the GreenSock forums. 

 

7 hours ago, sytx.99 said:

trigger position gets messed up everytime I resize the window, the <img> will be gone and the start position is shifted. 1) How do I keep everything as it is even on window resize? 

I assume that you mean that the image will be scaled after the section's height is animated after resize? Why not combine both of those into a singular timeline with a singular ScrollTrigger? Doing it separately makes things more complex if you ask me.

 

8 hours ago, sytx.99 said:

I'm wondering if there is a more effective way to do it rather than having one timeline for each background?

If you have a bunch of sections doing the same or similar things then that's a great time to use a loop. I write more about that in my article on animating efficiently which I highly recommend.

Link to comment
Share on other sites

33 minutes ago, ZachSaucier said:

I assume that you mean that the image will be scaled after the section's height is animated after resize? Why not combine both of those into a singular timeline with a singular ScrollTrigger? Doing it separately makes things more complex if you ask me.

Hi Zach, thanks for your response! I mean if you scroll down and then rescale the window viewport width/height of my Codepen you will be able to see that the image will either disappear after resize or it will jump to a smaller size because the start and end positions of my trigger has been shifted. How could I fix that? and how do you mean to combine these?

 

Thanks again!

Link to comment
Share on other sites

12 minutes ago, sytx.99 said:

I mean if you scroll down and then rescale the window viewport width/height of my Codepen you will be able to see that the image will either disappear after resize or it will jump to a smaller size because the start and end positions of my trigger has been shifted. How could I fix that?

ScrollTriggers with scrub base its timing on the scroll position of the page. So if on resize your elements are resized based on the viewport its very likely that your progress before the resize won't match the progress after the resize. The only way to keep the same progress would be to record the progress value before the resize and then use that progress value to set a new scroll position after the resize. Does that make sense?

 

14 minutes ago, sytx.99 said:

how do you mean to combine these?

You have two timelines with two ScrollTriggers for each section. You could combine the timelines so that you only need one timeline and one ScrollTrigger for each section.

Link to comment
Share on other sites

10 minutes ago, ZachSaucier said:

The only way to keep the same progress would be to record the progress value before the resize and then use that progress value to set a new scroll position after the resize. Does that make sense?

Right, that makes sense now. Is there any documentation on how to do that so I could look into it? 

Link to comment
Share on other sites

I made a demo that shows how to do it. I also added a basic animation to show it working (resize vertically to see it working) but you're welcome to remove that. You could use one of your own ScrollTriggers to measure the progress instead but it probably makes sense to use a ScrollTrigger that takes up the full scrollable area as a reference so the progress is correct. 

See the Pen xxVWJGe?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...
On 9/11/2020 at 1:30 AM, ZachSaucier said:

I made a demo that shows how to do it. I also added a basic animation to show it working (resize vertically to see it working) but you're welcome to remove that. You could use one of your own ScrollTriggers to measure the progress instead but it probably makes sense to use a ScrollTrigger that takes up the full scrollable area as a reference so the progress is correct. 

 

 

Hi Zach, 

 

I tried to implement this into my own code but it hasn't been working as expected— whenever I resize the window, it just jumps to some random progress value and my other timelines would stop working. I'm also using locomotive scroll, would they be affecting each other? 

 

This is my Codepen: 

See the Pen ZEWdMJV by cocotx (@cocotx) on CodePen

 

I'm not sure what I'm missing here... would really appreciate some help! Thank you.

 

Link to comment
Share on other sites

On 10/2/2020 at 2:12 AM, sytx.99 said:

I'm also using locomotive scroll, would they be affecting each other? 

That's easy to test - just comment out the smooth scrolling code :) You'll find it has nothing to do with the smooth scrolling code.

 

Removing trigger: "body" from the ST ScrollTrigger seems to fix the issue. I didn't test enough.

 

Side note: I highly recommend my article about animating efficiently that I recommended earlier. You should definitely use a loop to set up these sections. 

  • Like 1
Link to comment
Share on other sites

Thank you for your time! I'll have a crack at building a loop!

 

7 hours ago, ZachSaucier said:

Removing trigger: "body" from the ST ScrollTrigger seems to fix the issue.

Strangely removing trigger: "body" didn't do the trick for me... However, I discovered that if I put like random.progress or anything else instead of ST.progress everything stays in place. (but there'll be error message saying random is not defined)

What might be the problem?

Link to comment
Share on other sites

  • 2 years later...

Hi,

I've just came across that topic when looking for how to implement keeping progress in Next/React apps.

 

So I'm undigging this topic with a specific question/request:
- can I find anywhere a tut/solution example how to do in Next App (not very big but with dozen of ScrollTriggers in different components)?

 

regards

PEgaz
 

Link to comment
Share on other sites

Hi @PEgaz,

 

Do you have a minimal demo of what you have and the issue you're having with your current setup?

 

ScrollTrigger will update the progress of all the animations it handles based on the current scroll position. Translating that into a specific progress value might be a bit trickier, because you'll have to track the current scroll position when the refresh event happens, ScrollTrigger instance is the active one at that point and it's current progress. Then store that value in state or React Context, then find the exact same ScrollTrigger instance and based on the new start and end values apply that progress to get a specific scroll value. Finally use either the native window.scrollTo() method or GSAP ScrollTo Plugin or a ScrollTrigger instance's scroll() method. As I mentioned without a minimal demo is a bit hard for us to know exactly what you're dealing with and what you're trying to do and based on the description I wrote, you can see that this is not the simplest of tasks and a bit beyond the scope of the help we can provide in these free forums.

 

Hopefully this is enough to get you started.

Happy Tweening!

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