Gilbert Posted April 9, 2020 Share Posted April 9, 2020 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 More sharing options...
ZachSaucier Posted April 9, 2020 Share Posted April 9, 2020 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 More sharing options...
Shrug ¯\_(ツ)_/¯ Posted April 10, 2020 Share Posted April 10, 2020 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. 3 Link to comment Share on other sites More sharing options...
Gilbert Posted April 10, 2020 Author Share Posted April 10, 2020 @Shrug ¯\_(ツ)_/¯ Thanks. That's what I was looking for. 1 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