Jump to content
Search Community

Understanding of set() - animation start/default values

softevo test
Moderator Tag

Go to solution Solved by Carl,

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 think I've got the wrong understanding of how the set function works when placed inside a timeline. In the codepen I've created a small animation that should set the box to start at left=0px and then start an animation at the 1 second mark to move the box from 200 to 500px. The actual behavior is that the box already starts at 200px. I can also press the seek(0.0) button and nothing happens. As soon as the animation once passes the start time of the fromTo tween, the seek to 0s will work. Could someone please explain why?

 

I need to set a start value for the animation that will always work in the way that each call to seek with values < 1s will place the box at position 0px. How can I accomplish that?

 

Best regards

Alexander 

See the Pen ZeGyZe by ozerfrettelter (@ozerfrettelter) on CodePen

  • Like 1
Link to comment
Share on other sites

  • Solution

Hi Softevo,

 

Welcome to the GreenSock forums.

Thanks so much for the clear demo. Super helpful.

 

The problem isn't with set() not working, it has to do with how fromTo() works. 

All from-based animations (from(), fromTo(), staggerFrom() etc) are designed to render their start values immediately. When this happens your set() at the beginning of the timeline gets overwritten. 

 

The solution is to add immediateRender:false to your fromTo() tween so that the starting values do not get applied until that tween starts running.

tl.fromTo(".red", 1, {left:200}, {left:500, immediateRender:false}, 1);

http://codepen.io/GreenSock/pen/GWJxmX?editors=0010

 

immediateRender can be a tricky thing to understand, but hopefully this video helps: 

 

  • Like 2
Link to comment
Share on other sites

Hi Kreativ,

 

Its really best to start a new topic unless your issue is very closely related to the topic.

 

CSSPlugin has an xPercent property that allows you to set percentage-based translation values. This allows you to independently control x as pixels and xPercent as percentages. 

 

in other words setting 

x:0 and x:"0%" are 2 different css properties behind the scenes.

 

As a convenience, if you set the regular x or y to a percent-based value like 50%", GSAP will recognize that and funnel that value to xPercent or yPercent property for you, but we recommend using xPercent/yPercent directly. 

 

 

Please read: https://greensock.com/gsap-1-13-1

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