jamez Posted August 28, 2020 Share Posted August 28, 2020 so guy i pretty new to do. i would love to know how i go replicate a css animation in gsap for this basically something like this @keyframes slidein { from { transform:rotateY(180deg); } 10% { transform:rotateX(-90deg); } 30% { transform:rotateX(90deg) rotateZ(360deg); } 75% { transform:rotateY(0deg) rotateZ(360deg); } 80% { transform:rotateY(90deg) rotateZ(360deg); } to { transform:rotateY(180deg) !important; margin:10px; } } See the Pen jOqwPxE by jamezzz123 (@jamezzz123) on CodePen Link to comment Share on other sites More sharing options...
Visual-Q Posted August 28, 2020 Share Posted August 28, 2020 Hi Jamez, Welcome to the forum. It looks like pretty much everything is setup in your pen (html and css)to accomplish this you just need to create tweens or a timeline and replace the specific animation you referenced. If someone wants to wade in and help set it up for you they are welcome to do so but I think the getting started section goes over pretty much everything you need to learn to do this, I would suggest you spend some time learning your way around gsap basics then if you have a more specific problem or something you're not sure about we'd be happy to help. 2 Link to comment Share on other sites More sharing options...
PointC Posted August 28, 2020 Share Posted August 28, 2020 Hi @jamez Welcome to the forum. I'd echo @Visual-Q's advice about going through the getting started section and see if you can convert the animation. If you get stuck, we're here to help with any GSAP related questions. To get you started, you'd write your tweens like this. gsap.from("#dice", {rotationY:180}); Happy tweening and welcome aboard. 2 Link to comment Share on other sites More sharing options...
jamez Posted August 28, 2020 Author Share Posted August 28, 2020 hello @PointC so i actually tried a lot of different ways on my local system but was not able to get a similar animation as the raw css style. i did update the code pen with on of the implementation but... See the Pen VwaWaby?editors=1111 by jamezzz123 (@jamezzz123) on CodePen Link to comment Share on other sites More sharing options...
Visual-Q Posted August 28, 2020 Share Posted August 28, 2020 Your dice has some base css settings your aren't applying to the dice 2, but it's mainly your timings that are off , the css animation has rotations on different axis overlapping and occurring simultaneously. Your pen just plays a single axis rotation at a time so your'e part way there. You should review the docs again to learn about how to place tweens in the timeline and scheduling their playback, I also note your animation has no z axis rotation as the css animation does. 1 Link to comment Share on other sites More sharing options...
jamez Posted August 28, 2020 Author Share Posted August 28, 2020 @Visual-Q i think i got close this time thank for the advice See the Pen QWNgKBV?editors=1111 by jamezzz123 (@jamezzz123) on CodePen 1 Link to comment Share on other sites More sharing options...
Visual-Q Posted August 28, 2020 Share Posted August 28, 2020 Good work, I think you've got the basic techniques! If you want to get it exactly the same you'll just have to break down exactly what the sequence and rotation timings the css is executing. Gsap should certainly allow you to reproduce it. The methods of sequencing and syntax are a little different from gsap structure so you just have to be patient and work it out. You'll learn a lot in the process. Happy Tweening! 4 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