Jump to content
Search Community

Get/update Height on rotation

rahuljadav 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

Hi Diaco,

 

I want the height of the div to get changed with roation. I have given the values in the js. The hieght values get set at the end to 50%. Its not getting gradully deacresed as I want.

 

My goal is to reduce the hieght with roation angle. The effect should look like arrow is geeting realeased from the bow.

Link to comment
Share on other sites

hmm, i don't see an arrow.

Diaco is right, this is not a simple matter of shrinking a div while it rotates. 

Each time you change the rotation of the lines, you would need an onUpdate to calculate their new length.

Instead of rotating 2 divs in a tween, you probably need to think more about moving the center point of a triangle where the 2 lines meet and then calculating the distance (height or scaleY) of each line and its rotation. Again a fair bit of trig and coordinate mapping. Its by no means impossible, just a bit beyond our typical level of support with the GSAP API.

 

 

The cleanest GSAP solution is to use SVG and MorphSVGPlugin

http://codepen.io/GreenSock/pen/PPKXVK?editors=001

 

Look, what Chris Gannon made!

http://codepen.io/chrisgannon/pen/epZyEK?editors=001

 

It's really a matter of using the right tool for the job. 

http://greensock.com/morphSVG

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