jiggy1965 Posted November 7, 2020 Share Posted November 7, 2020 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 More sharing options...
Solution akapowl Posted November 7, 2020 Solution Share Posted November 7, 2020 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 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 7, 2020 Share Posted November 7, 2020 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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now