Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Joshua Harmon

Can't seem to get rotation working

Go to solution Solved by Cassie,

Recommended Posts

Hi, I'm new to GSAP and almost got my animation working except the rotating element in the timeline.

 

I'm trying to rotate an element but it doesn't seem to rotating correctly it rotates in negative and returns to the original position.

 

I have tried OriginTransform but it didn't work.

 

How do I rotate it from the original position?

 

  .from(man,  0.5, {
    rotation: 43,
  }, 1.8, '-=0.5')

 

I have recorded a short video of the animation

https://www.loom.com/share/23f6791cd6334d80856a4ae976eb7f8f

 

Link to comment
Share on other sites

Hey Joshua,

 

Welcome to the forums!

The property you're looking for is transformOrigin  I can't  guarantee this will solve your problem though, as I watched the video and I'm not sure what the issue is you're looking to solve.

Also this doesn't look right to me - you shouldn't have two parameters at the end like this, what is the 1.8 for? It looks like you're using the old tweenMax stagger syntax.

 

 .from(man,  0.5, {
    rotation: 43,
  }, 1.8, '-=0.5') 

// new GSAP3
 .from(man, {
    // duration in the vars object, although 0.5 is the default so it's not really needed
    duration: 0.5,
    rotation: 43,
  }, '-=0.5') // overlap the previous tween by 0.5 seconds


Here's a migration guide to help you move to the new syntax, don't be intimidated - it's pretty much the same, just a couple of tweaks.


I recommend popping a minimal demo together for us if you need more help and we can help you figure this out!

 

Happy tweening.

  • Like 2
Link to comment
Share on other sites

Hi there, thanks for replying what I meant is at the end of the animation the position of the stick man figure is the original position I would like it to rotate from that position.

 

The stick man figure in the video goes from fallen position to standing position. It should be the opposite.

 

Link to comment
Share on other sites

  • Solution

oh ok!

 

Then you're looking for 'to' not 'from' - nice and easy!
 

.to(man, {
  rotation: 43,
})

 

  • Like 1
Link to comment
Share on other sites

13 minutes ago, Cassie said:

oh ok!

 

Then you're looking for 'to' not 'from' - nice and easy!
 

.to(man, {
  rotation: 43,
})

 

That worked, I'll keep that mind. Thanks a lot!

  • Like 1
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.
×