Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Tissi_2

[SOLVED] rotation tween is not taking place at current position

Recommended Posts

Hello everybody!

I would like to create a small riddle with kind of a dial. I have already created 8 buttons to control some tweens but I encountered a problem with the rotation of the outer number. Every time the outer scale is rotated out of its original position the rotation of the number itself takes place at the "12 o clock" position. When rotating the outer scale again the number jumps back to the new position. I would like to rotate the number by 180 degrees at its current position. Can anyone help me with this, please?

 

Thanks in advance

Tissi

 

See the Pen BrbGzX by Tissi_2 (@Tissi_2) on CodePen

Link to post
Share on other sites

I think the easiest win here, if I understand correctly, is to just wrap the 6 in another div.

rotate the outer "#number"  for what you are calling scale, and rotate the inner "#number div" for the number to spin around its center

 

<div id="number" style="position:relative; top:60px; font-size:48px;"><div>6</div></center>

 

See the Pen BrELLL?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Doing multiple transforms on an element and changing the transformOrigin is just generally difficult.

  • Like 4
  • Thanks 1
Link to post
Share on other sites

Wow, that was easy! Thank you so much for the very quick answer! The result is exactly what I wanted to have. I really appreciate it!

  • Like 1
Link to post
Share on other sites

No problem. I love the easy ones ;)

  • Like 3
Link to post
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.

×