Jump to content
Search Community

animating circle shape

felek 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,

First of all great tool for animating.

I just start play with this and i want to create animation to circle around border of div. I create little pen for experiment but i can't figure out how to set transformOrgin just right. Is it possible to have some params from js as passing arguments ? If i change size of my circle div to animation follows ?

See the Pen govPYv by felek (@felek) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi @felek

 

You could mess with the transform origin. That's much easier to do with SVG.

 

Here's one way to do circular motion using 2 animations with a sine ease.

 

See the Pen 76aad24edc0a89f8445dffb968ff8395 by osublake (@osublake) on CodePen

 

And here's a function that will calculate an ellipse based bezier for you.

 

See the Pen qpxZjJ by osublake (@osublake) on CodePen

 

  • Like 4
Link to comment
Share on other sites

It working great !

That getBezier function is insane i would never write this :)

Is there any wait to start animation after 2 second?

When i add delay attrib it works but it moves my element to after delay place.

  • Like 1
Link to comment
Share on other sites

Another easy solution is to nest your element inside another element. This will allow you to easily animate the radius, i.e. the size of the circle. I added a background color to make it easier to see.

 

See the Pen zpRBre by osublake (@osublake) on CodePen

 

 

For a delay with the bezier, that requires a little work. We need to move it into its starting position and rotation, so you could do something like this.

 

See the Pen NXyrvy by osublake (@osublake) on CodePen

 

 

 

 

  • Like 4
Link to comment
Share on other sites

Hi @OSUblake,

 

I only say VERTIGO ...

 

"For the title sequence to Vertigo, Hitchcock had an additional, often unnoted, collaborator: John Whitney. A pioneer of computer animation who worked in television in the 50s and 60s and in the 70s created some of the first digital art, Whitney was hired to complete the seemingly impossible task of turning Bass’s complicated designs for Vertigo into moving pictures. A mechanism was needed that could plot the shapes that Bass wanted, which were based on graphs of parametric equations by 19th mathematician Jules Lissajous; plotting them precisely, as opposed to drawing them freehand, required that the motion of a pendulum be linked to motion of an animation stand, but no animation stand at the time could modulate continuous motion without its interior wiring becoming tangled.

To solve this problem, Whitney made use of an enormous, obsolete military computer called the M5 gun director. The M5 was used during World War II to aim anti-aircraft cannons at moving targets. It took five men to operate it on the battlefield, each inputting one variable, such as the altitude of the incoming plane, its velocity, etc.

Whitney realized that the gun director could rotate endlessly, and in perfect synchronization with the swinging of a pendulum. He placed his animation cels on the platform that held the gun director, and above it suspended a pendulum from the ceiling which held a pen that was connected to a 24-foot high pressurized paint reservoir. The movement of the pendulum in relation to the rotation of the gun director generated the spiral drawings used in Vertigo’s opening sequence.

The M5 weighed 850 lbs and comprised 11,000 components, but its movement was dictated by the execution of mathematical equations; it was very much a computer. Whitney’s work on the opening sequence for Vertigo could be considered an early example of computer graphics in film—and a clever détournement of military equipment."  (more here)

 

Were you already active then?

 

Kind regards

Mikel

  • Like 4
Link to comment
Share on other sites

Wow! I never heard of Vertigo, but just watched the intro. That's pretty impressive considering it's age.

 

And the use of a gun firing computer is really interesting. I did artillery in the US army for a couple of years, which involved using a more advanced version of that. In addition to figuring out the direction/movement of a gun, the computers dealt with another animation concept, parallax movement. It's used to figure out how far away something is.

https://en.wikipedia.org/wiki/Parallax#Artillery_gunfire

 

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