Jump to content
GreenSock

Masohas

Multiple animation with one element not working. Why keyframes in css don't work?

Recommended Posts

I wanted that after the page is loaded the entire content of the page appeared, but when i added spawning animations on the ".hamburger" the rotation animation does not work then, but but as I remove reappearance animations it all works. How do i have rotation and appearance animations?

 

I don't understand why keyframes don't work

 

the line of code that causes the element to appear, when it is deleted, rotation will work

        .from('.hamburger', 0.3, {x:-100,})

See the Pen NWYKOPQ by jarek-babiak (@jarek-babiak) on CodePen

Link to comment
Share on other sites

  • Masohas changed the title to Multiple animation with one element not working. Why keyframes in css don't work?

I'm not sure I see the issue. Everything looks good to me. If you are having issues with CSS animations and GSAP conflicting, I would suggest moving your CSS animations to GSAP. The performance is similar in most cases and you are going to have to import GSAP anyway.

Link to comment
Share on other sites

Yeah, I don't really understand your question here, @Masohas. Can you elaborate? I don't notice any problems. 

Link to comment
Share on other sites

7 hours ago, GreenSock said:

Tak, naprawdę nie rozumiem tutaj twojego pytania,@Masohas. Czy możesz rozwinąć? Nie widzę żadnych problemów. 

I noticed that keyframes on "hamburger" element doesn't work if I add gsap on this element

.animationToggler {
    animation: animationTogglerMenu .8s ease;
}

@keyframes animationTogglerMenu {

    100% {
        transform: rotate(360deg);
    }
}

Just add this line of code to the timeline "preloaderTl"

.from('.hamburger', 0.3, {x:-100,})

How to make keyframes work?

Link to comment
Share on other sites

Oh, right, you can't have an inline transform and also a CSS animation that's changing it. That isn't logically feasible. It's just how browsers work - it's not a GSAP issue or anything.

 

I'd strongly recommend using GSAP for all your animations, especially transform-related ones. It offers far more flexibility, like animating each component independently (x, y, rotation, scaleX, scaleY, etc.) 

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