Jump to content
Search Community

rotation on pinned point

silverdust 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

From the codepen, I would like to achieve an oscillatory bell movement and although gsap is giving me a lot better than I could achieve on my own with CSS. I plan to read this later. I would like if the bottom tip of the bell doesn't obviously leave the point around the circle its hanging on. I also tried to look through the docs for guides on using rotation, rotationX, etc, but I could only find information on other secondary options for the tween object. I will appreciate a link that documents how primary (x, y, rotation, translate, etc) tween options work. Thank you!

See the Pen VOJmwL by josephrexme (@josephrexme) on CodePen

Link to comment
Share on other sites

If I understand your goal correctly, you can simply add a transformOrigin to your tween: 

 

tl.from(leftBell, duration, { rotation: 15, transformOrigin:"50% 5%" })

 

That basically means that the pivot point would be halfway along the element's bounding box's x-axis (centered), and 5% down on the y-axis. 

 

These resources may be useful: 

https://greensock.com/docs/Plugins/CSSPlugin

https://css-tricks.com/writing-smarter-animation-code/

 

Does that help? 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Another question regarding attached pen. I didn't know if it was create an entirely new post. At the reception time section, I would like the transform origin to be the right but simply passing `transformOrigin: 'right'` or `transformOrigin: right top` wouldn't do it. How else may I go about that?

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