Jump to content


Get/update Height on rotation

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

I am trying to rotate the top and botton element from particluar rotation angle to 0 deg. While the elemnts are getting rotated i want the height of that elemnt to get adjusted accordingly. It must look like that the arrow is geeting shhot from the bow.

See the Pen MavPdK by rahuljadav (@rahuljadav) on CodePen

Link to comment
Share on other sites

Hi rahuljadav :)


this isn't a GSAP related questions , we really have to focus on GSAP api . anyway you can use Trigonometry to find points/distance or whatever , pls explain what's your goal , i think in your case there should be another simpler solutions . 

  • Like 2
Link to comment
Share on other sites

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



Look, what Chris Gannon made!



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


  • Like 2
Link to comment
Share on other sites

Do you realize how simple this is with SVG? You don't need to make a single calculation. All you need is a polyline with 3 points, and you tween the middle point.


See the Pen avLxMx?editors=001 by osublake (@osublake) on CodePen

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