Jump to content
GreenSock

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

rotation on pinned point

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

Thanks Jack. It was totally helpful

  • Like 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

Hi @silverdust,

 

How about ...

 

.to(horizontal[0], duration, {
  x: -20
}, 'aj')
.to(horizontal[1], duration, {
  x: 20
}, 'aj')


Best regards
Mikel

  • Thanks 1
Link to comment
Share on other sites

That's what I needed. I'd thought about using `x` but my thought was that that will translate the entire thing. Can you explain how it worked without moving the whole group but just extending instead?

Link to comment
Share on other sites

Hi @silverdust,

 

Unfortunately I do not understand your question.

 


Best regards
Mikel

  • Like 1
Link to comment
Share on other sites

3 hours ago, mikel said:

Hi @silverdust,

 

Unfortunately I do not understand your question.

 


Best regards
Mikel

 

Nevermind. I figured it out

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