Jump to content
Search Community

Immediate (0s) tweens to ensure GSAP is tweening from the right starting point

maxedison test
Moderator Tag

Go to solution Solved by PointC,

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

There are times when I need to change an element's styles without any animation, and then later animate that element. Although the initial style changes don't need to be animated, if I simply change them via vanilla JS (e.g. el.style.opacity = 0), the subsequent GSAP tween won't know to begin animating it from that value. Instead, it will animate it from whatever was the last value it had animated it to. To clarify, consider the following sequence:

 

1) GSAP animates element's opacity to 0.5

2) Vanilla JS sets opacity:  el.style.opacity = 0

3) GSAP animates element's opacity to 1

 

In step #3, the opacity will initially jump to 0.5 and then tween to 1 from there, since GSAP's last "knowledge" of the opacity state was 0.5.

 

I'm currently solving this by simply using GSAP in step 2 with an animation time of 0. Is that the correct way to do it, or is there some method that simply update's GSAP's "knowledge" without creating a 0s tween?

Link to comment
Share on other sites

Hello maxedison, Welcome to the GreenSock Forum!

 

When using GSAP its best practice to use the GSAP set() method for setting CSS properties. This way GSAP can keep track and record those CSS properties you are changing. Otherwise you would be changing CSS properties outside of GSAP.

 

GSAP set() method

  • Immediately sets properties of the target accordingly - essentially a zero-duration to() tween with a more intuitive name.
TweenMax.set( target:Object, vars:Object ) : TweenMax

set(): http://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/

 

Looks like PointC beat me to it, as i was writing up my answer! :)

  • Like 2
Link to comment
Share on other sites

Using a set() is great advice.

 

However, I can't say definitively that it is necessary without seeing how and when you are creating your tweens.

Should be pretty simple to replicate your set-up in a CodePen demo: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

When a new tween renders for the first time it will record the existing values, so it really shouldn't matter how those values were previously set (vanilla js or set()). However if you are messing with values that were already recorded in a timeline or you are using from() tweens somewhere, that may be another story. Tough to tell without seeing what you are doing. 

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