Jump to content
Search Community

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

Tissi_2 test
Moderator Tag

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