Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
softevo

Understanding of set() - animation start/default values

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

Just a wild guess, maybe it has something to do with the left: 0 itself.

I am having a similar issue where x: 0 get's ignored after I set a percentage based value.

 

What do the Elders say?

 

See the Pen EWjwpj by katerlouis (@katerlouis) on CodePen

Link to comment
Share on other sites

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

Hi Carl,

 

Thank you for your great explanation. Understanding that the set(...) will be overwritten when not setting immediateRender = false in fromTo(...) really helps :)

 

Best regards

Alexander

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

 

 

.

 

Got it, boss!

Thought this might be considered as spam, when there is a similar topic.

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