rotate and move Rotating 4 different SVG objects whilst moving each one a certain distance from the origin

[PaulM2022]

Hi there!

 

I'm a total newbie (first post after signing up a few seconds prior to it) that's just starting to learn the joys of animation, and I'm looking for an easier and more productive way to get things done. Can you help guide me so I can "learn by doing"?

 

Recently I've designed an SVG object, and I will be designing the others in the coming days with a bit of luck. (For arguments sake, let's say these objects are; a unit square, a unit triangle, a unit circle and a unit octagon.)

 

My idea is to do an animation where these 4 superimposed items will each roll to the right from their common origin, with varying travel distances so that they end up lined up in a row visually (kerned) at the same distance apart from each other. The first item "deposits" after one rotation, the second after two, and so on.

 

I've manage (amongst other failed attempts) to do a mock up for proof of concept with one of the objects so far using Sketch, Affinity Designer and (believe it or not) even Powerpoint. I then exported that into an MP4 file and the result wasn't too shabby, considering its by first foray into this. I used 15 degree increments and single stepped in PowerPoint to do most of the work after the initial SVG file was done (in Sketch and Affinity).

 

Very tedious and time consuming, a bit "chunky" (at 25 frames it's just too coarse for decent animation steps), and I just know there has to be a better way!

 

I really don't want to spend weeks making 5 degree increments on each object, doing the travel animation frames for each object, somehow combining them into a superimposed animation and then exporting that. The file size alone would be crazy big and the time and effort needed would be prohibitive!

 

Doing some rough searches with Google I found some basic information, but nothing that really nailed my requirement.

 

Looking at the HTML/CSS/Java etc. code snippets I saw in my searches (including those that pointed to this website, which I am as yet not ofé with), I'm convinced that this is the way to go - instead of single stepping through every constructed animation frame, step after step and then trying to export that in to some usable format.

 

I'd love some stand alone animations in a file, but also am really keen at the most elegant coding solution that will achieve this same effect (an a lot more fluidly to boot!).

 

Can any of you Animation and Coding Gurus out there sprinkle some magic fairy dust on this problem I need to solve, and help me to achieve the goal? I'm really keen on learning by doing, so I'd really appreciate specific and step by step instructions that could help me further.

 

Thanks in advance for your constructive feedback! I really appreciate it!

 

Kind Regards

 

Paul

 

[GreenSock]

Welcome, @PaulM2022! I think you'll find GSAP waaay easier to work with than something like PowerPoint where you've gotta manually create each frame. Yikes! 

 

With GSAP, you just plug in property values that you want to animate to (the destination values) and then it'll handle all the inbetween states. Here's a super quick demo with 2 squares that kinda shows you one approach: 

See the Pen MWVPXeG?editors=0010 by GreenSock (@GreenSock) on CodePen

 

It may look fancy/confusing because I did that loop to dynamically calculate various things like the x, rotation, and duration but the benefit I was trying to illustrate is the ability to just add more shapes and tweak the speed or distance variable and it just automatically updates the animation accordingly. Super easy to tweak rather than hard-coding every value. 

 

I'd encourage you to go through the getting started article:

 

 

If you want a video course, I'd highly recommend @Carl's stuff: 

https://www.creativecodingclub.com/courses/FreeGSAP3Express?ref=44f484

 

Good luck on your learning journey.