Jump to content
Search Community

CSS3 Rotate animation

Poseidon test
Moderator Tag

Go to solution Solved by jamiejefferson,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello everyone, is the following animation possible with TweenLite?

.foot {
    width: 50px;
    height: 50px;
    animation-name: tap-foot;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-delay: 7s;
    transform-origin: right top;
}

@keyframes tap-foot {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(25deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
Link to comment
Share on other sites

  • Solution

It's definitely possible. I think this should replicate that (not really familiar with CSS animation, so hopefully it's at least close to what you are after - there are probably differences in the easing used):

var foot = $('.foot');
var tl = new TimelineMax({ delay:7, repeat:-1 });
// if animation-delay occurs every time, add repeatDelay:7 to the TimelineMax object vars.

tl.to(foot, 1, { rotation:"25_cw", transformOrigin:"right top", ease:Power1.easeInOut });
tl.to(foot, 1, { rotation:"0_ccw", transformOrigin:"right top", ease:Power1.easeInOut });
  • Like 1
Link to comment
Share on other sites

Thank you for speedy reply,

That's exactly what I'm after

 

 

It's definitely possible. I think this should replicate that (not really familiar with CSS animation, so hopefully it's at least close to what you are after - there are probably differences in the easing used):

var foot = $('.foot');
var tl = new TimelineMax({ delay:7, repeat:-1 });
// if animation-delay occurs every time, add repeatDelay:7 to the TimelineMax object vars.

tl.to(foot, 1, { rotation:"25_cw", transformOrigin:"right top", ease:Power1.easeInOut });
tl.to(foot, 1, { rotation:"0_ccw", transformOrigin:"right top", ease:Power1.easeInOut });
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...