Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sytx.99

ScrollTrigger: how to keep progress value on window resize?

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 post
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 post
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 post
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 post
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 post
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 post
Share on other sites

Perfect! Thank you for the demo, it's solved the problem :)

Link to post
Share on other sites
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 post
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 post
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 post
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.

×