Jump to content
GreenSock

jiggy1965

gsap.from runs immediately

Go to solution Solved by akapowl,

Recommended Posts

Fail to understand something here. gsap.to it works: the movement occurs after 3 seconds. When I use gsap.from it doesn't: the movement occurs straight away instead of waiting 3 seconds. 

 

When I want the box to move from 100px to 400px and add that 3 seconds as the position parameter it moves after 3 seconds. 

When I want it to move from 400px to 100px with the same 3 seconds as the position parameter it moves straight away.

 

Why is this happening? I'm probably missing something very simple...

See the Pen mdEGvjZ by coder1965 (@coder1965) on CodePen

Link to comment
Share on other sites

  • Solution

Hey @jiggy1965

 

I think, what you actually want to use is the delay property inside the vars, and not the position parameter, that is meant for timelines.

 

Also, you can simply just write 'left: 400' instead of left: "400px" -

And maybe you'd also want to consider translating the element on the x-axis instead of tweening on the left-value.

 

 

See the Pen e0519abae681ece9fdbed9abec396bce by akapowl (@akapowl) on CodePen

  • Like 2
Link to comment
Share on other sites

Alternatively add it to a timeline:

gsap.timeline().from(".box", {rotation: 27, x: 400, duration: 1}, 3);

You should probably use x instead of left if you can as well. It performs better.

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