Jump to content
Search Community

How to update tween property dynamically

TDT test
Moderator Tag

Go to solution Solved by GreenSock,

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

I'm animating the backgroundPosition from a div based on 50% of viewport width.

Since not all browsers support vw units, I need to create a global variable that is updated when window resizes, getting the viewport width in pixels, divide it by 2, and then give this value to the animation.

 

The Tween that animates the backgroundPosition is inside a big timeline.

I dont have the JavaScript's reference's variable of Tween, nor of Timeline.

 

How can I update the backgroundPosition with the new value get by JavaScript when the window resizes?

I guess that is also important to tell that this animation is triggered by scrolling the page using ScrollMagic plugin. I'm using a fixed duration.

 

What I need is something like dynamicProps Plugin from GSAP Flash.

 

Thank you for read.

Link to comment
Share on other sites

 

Hi TDT :)

 

If I understand you correctly, you could do something like this:

$(window).resize(function() {
w = document.documentElement.clientWidth;
TweenLite.set(yourDiv,{backgroundPosition:w/2+"px"});
}

});

 

Hi, thank you but I cant use .set, because I need to animate the current animation, not set another one. Maybe updateTo, or .vars as GreenSock answer.

 

 

You could keep a reference to your tween and then update its vars object (tween.vars.backgroundPosition = "whatever") and then invalidate() it to force it to re-initialize everything internally. Or just replace that tween in the timeline altogether. 

 

The tween is for N animations inside a "for" loop.

That's why I didnt have the Tween reference in JavaScript.

I think that will not be elegant to maintain a variable for each object, even if is an array.

 

I tried to get the tween reference from the DOM element with TweenMax.getTweensOf("#id"), look for the Tween that want to change, but when I change the backgroundPosition property nothing happens. This does not update the tween I need to do this only by javascript variable reference that I need to save?

 

Another problem is that I cant simple invalidate(), because I'm using ScrollMagic, if the scroll is on 50%, for example, the animation will be on 50%, so if I invalidate it it will be again on 0% and the scroll will tottaly bug the animation.

 

ScrollMagic has an example for a thing like that, but he uses a JavaScript reference for the Tween and for the Scene see that on: http://janpaepke.github.io/ScrollMagic/examples/expert/manipulating_tweens.html

 

Thank you for answers, I'm still trying to solve this.

Link to comment
Share on other sites

  • Solution

To be clear, if you invalidate() a tween, it doesn't change its position in its parent timeline. So if if the tween is 50% done and you invalidate(), the next time the timeline renders, the tween will be at 50% (or whatever the new/normal update is at).

 

Simply changing the tween.vars.backgroundColor won't do anything (as you discovered) because when a tween renders for the first time it records the start/end values so that it can do interpolation super-fast. It doesn't constantly analyze on every render. Again, that's a good thing - it makes things very fast. When you invalidate() it tells it to dump anything it recorded and re-record on the next render. 

 

It's fine to use the getTweensOf() method to snag the tween you want. Or record the references in an array yourself. Whatever you find easiest. Note that the timeline classes also have that method as well (so you can only grab the tweens of that object that are in a particular timeline). 

 

If you're still struggling, feel free to create a reduced test case in codepen and post it here so we can see what's going on and provide advice. 

  • Like 1
Link to comment
Share on other sites

Hello Jack,

 

Thank you it works. I was testing on "onUpdate" eventCallback and that was what was bugging. Nevermind.

Once I put it on window resize it works.

 

The funny thing is that I will not use this, because the animation was ugly hehehe. If the guy start with a window at X width, resume the animation forward, then resize the window, now the width is Y, and he resumes the animation forward, then resize the window again back to X width, and resume the animation backward, the backgroundPosition animation will be ugly xD

 

But thanks at all, probably I'll fix this animation on some pixels without checking the viewport width :)

At least I learn one thing more :)

 

Thank you again.

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