Jump to content
Search Community

Perspective animation in GSAP

Gilbert test
Moderator Tag

Recommended Posts

I would like to know whether or not there are methods in GSAP to animate perspectives.
In the codepen I am using a js library call perspective transform. Is there something equivalent on GSAP that besides allowing to edit the 4 points manually allows to animate them?

Or how to use this library to animate those points with GSAP

See the Pen vYOoYjb by gilbertmizrahi (@gilbertmizrahi) on CodePen

Link to comment
Share on other sites

Hey Gilbert. GSAP can animate any values that you throw at it! 

 

With that being said, the effect that you're asking about is quite different than just animating the perspective value. The demo that you link to is a GUI for editing the transforms of an element. GSAP doesn't have any GUI like that built in.

 

If you're just asking how to create an animation that creates a similar effect to what happens when you drag around the point with your mouse, you should try animating the rotation and skew values of your element like rotationX, rotationY, skewX, and skewY. Maybe even move the transformOrigin around or animate the perspective value. 

Link to comment
Share on other sites

5 hours ago, Gilbert said:

equivalent on GSAP that besides allowing to edit the 4 points manually allows to animate them?

 

From their documentation:

// the properties represent the 4 corners are "topLeft", "topRight", "bottomLeft" and "bottomRight"

var transform = new PerspectiveTransform( ...

// transform.topLeft
// transform.topRight
// transform.bottomLeft
// transform.bottomRight

So in GSAP it would be:

gsap.to(transform.topLeft, {duration: 1, ...

// etc.,

 

You can also find a JSFiddle referenced in this older post, as well as in this JSFiddle.

  • Like 3
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.
×
×
  • Create New...