Jump to content
GreenSock

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

How to smoothen behind animation

Go to solution Solved by PointC,

Recommended Posts

Hey everyone,

I am still learning the basic with GSAP but liking it so far.

I made this codepen and have some trouble making it more smooth. Basically whenever you click the move button, the first red box should move behind the next blue box in a semicircular motion, as to indicate it goes to the back of the queue sorta like a Jukebox as it flips through the records! I'm just having some trouble getting that semicircular motion down and making it look great as it flips back as well.

 

The back animation shouldn't start at the center of the second blue box either but rather just next to it as to illustrate it comes back, but I guess that's just adding a new frame inbetween with another x coordinate?

See the Pen QWQZpoe by itsmeagian (@itsmeagian) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @mangobanan :)

 

Welcome to the forum.

 

It sounds like you're looking for something like this?

See the Pen ea1b2a2e3c17fb66429ff548629f39d5 by PointC (@PointC) on CodePen

 

Adding a transform perspective on the containing element can add a lot. You'll also see I split the tween into two as I thought it worked better in this case. Other than that, it's just a little finessing with timing and eases.

 

Happy tweening.

:)

  • Like 4
Link to comment
Share on other sites

Thank you so much @PointC! Exactly what I was going for, I never knew about the transform perspective which is really useful! I really appreciate it :) 

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