Jump to content
Search Community

Replicate css animation styling in gsap

jamez test
Moderator Tag

Recommended Posts

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

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.

 

 

 

 

  • Like 2
Link to comment
Share on other sites

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.

:)

 

  • Like 2
Link to comment
Share on other sites

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.

 

  • Like 1
Link to comment
Share on other sites

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!

 

 

  • Like 4
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...