Jump to content
Search Community

Update tween values on window resize

qarlo test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

I know a similar question has been asked before, but I think my case is a bit different and I couldn't find a solution.

 

In the pen I posted I have a very long image which I want to scroll from the beginning to its end, which mean that it should stop when its right edge reaches the right side of the window. In order to do this I calculate the distance, so the amount of x translation, as the difference between the image width and the window width. I know about the xPercent property, but I guess that it's not useful in this case, because I have no way of using it account also for the window width.

 

Anyway, the animation works fine. But if after the first animation you resize the browser window and click repeat (top right corner), the image doesn't stop at the right point: it goes too far left, or too far right, depending how you resized the window.

 

So, I'm thinking that the solution would be to update the values inside the tweens on the window resize event. I'm not sure how to to this, or if that's even possible. Is there a better, more appropriate, approach?

See the Pen vKkmQP by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi qarlo :)

 

You're right - you have to get new values for the window width so everything works correctly. I moved your window calculations and tween into a function that will play on page load as well as a click of the repeat button.

function moveIt() {
var windowWidth = $(window).width();
var distance = $('.img-wrap').width() - windowWidth;
TweenMax.fromTo(".img-wrap", 5,{x:0} ,{x:-distance, ease:Power3.easeInOut});
}

Here's a fork of your pen with that option:

 

See the Pen VjWWaJ by PointC (@PointC) on CodePen

 
Hopefully that helps a bit.
 
Happy tweening.
:)
  • Like 2
Link to comment
Share on other sites

 

Hi qarlo  :)

 

You're right - you have to get new values for the window width so everything works correctly. I moved your window calculations and tween into a function that will play on page load as well as a click of the repeat button.

function moveIt() {
var windowWidth = $(window).width();
var distance = $('.img-wrap').width() - windowWidth;
TweenMax.fromTo(".img-wrap", 5,{x:0} ,{x:-distance, ease:Power3.easeInOut});
}

 

Thanks, this is helpful, but it's still not what I need, I think. But it's my fault. I created the pen as simply as possible, just to illustrate this issue, but in my project the whole animation will be controlled via the scrollbar and I'll be animating multiple layers in a timeline. If needed I'll create a more accurate pen.

 

The thing is that I don't need to restart the animation. On the window resize I would like to recalculate the distance (which will be the same for all the layers, anyway), so just a variable, but after doing it, updating all the tweens in the timeline. They might be two, sometimes four, but possibly even more.

I saw that there is an updateTo method, but I'm not sure is the best approach. It would mean that I would need to write the code twice, basically.

 

If it's not clear what I mean, I'll post another pen later.

In the meantime, thank you!

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