Jump to content
GreenSock

venn

Move object back to the original position in a simple way?

Go to solution Solved by Tahir Ahmed,

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

tl.to('#object', 1, {y: 10})
  .to('#object', 1, {y:0})

A very simple but yet dumb question.

 

I have an #object that I want to move y:10. Is there a way that the object will move back to its original position once the to animation is completed? Rather than specifying another .to to animate back to the original position?

 

Can I use easing to achieve that? Or do I need to be verbose with my code?

 

Cheers,

Venn.

Link to comment
Share on other sites

It starts to become unwieldy when you need to animate JUST 4 objects in 4 directions.

tl.to('#top', 1, {y: 10})
  .to('#top', 1, {y:0}, 'label')
  .to('#bottom', 1, {y: -10}, 0)
  .to('#bottom', 1, {y: 0}, 'label')
  .to('#left', 1, {x: 10}, 0)
  .to('#left', 1, {x: 0}, 'label')
  .to('#right', 1, {x: -10}, 0)
  .to('#right', 1, {x: 0}, 'label');
Link to comment
Share on other sites

  • Solution

Hi @venn,

I think you can use `repeat: 1` along with `yoyo: true` in order to make them return to their original positions. Take a look at this simple fiddle for example.

 

The takeaway is:

timeline.to(top, animDuration, { y: 0, repeat: 1, yoyo: true, ease: animEase });
timeline.to(right, animDuration, { x: 0, repeat: 1, yoyo: true, ease: animEase });
timeline.to(bottom, animDuration, { y: 0, repeat: 1, yoyo: true, ease: animEase });
timeline.to(left, animDuration, { x: 0, repeat: 1, yoyo: true, ease: animEase });

Hope this helps.

  • Like 6
  • Haha 1
Link to comment
Share on other sites

Hi @venn,

 

I think you can use `repeat: 1` along with `yoyo: true` in order to make them return to their original positions. Take a look at this simple fiddle for example.

 

The takeaway is:

timeline.to(top, animDuration, { y: 0, repeat: 1, yoyo: true, ease: animEase });
timeline.to(right, animDuration, { x: 0, repeat: 1, yoyo: true, ease: animEase });
timeline.to(bottom, animDuration, { y: 0, repeat: 1, yoyo: true, ease: animEase });
timeline.to(left, animDuration, { x: 0, repeat: 1, yoyo: true, ease: animEase });

Hope this helps.

 

AH! Yes! That's what I am looking for. The YOYO!

 

Thanks!

 

I think this is the best and most efficient solution.

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