So I’m working on an intro animation for my Motion Study web series and figured I’d just share my process and let you get involved.
The video below explains a bit of how it all works.
Although this isn’t an official episode of Motion Study it actually represents what it will be like:
- I’ll explore an animation
- Talk about it
- Encourage you to give it a try
Your Homework
Make an object follow a curved path and make it look like the speed is related to the steepness of the curve.
The Not Really Rules
- You can use web technologies, Adobe Animate, After Effects or whatever you want.
- You can fork the CodePen demo below and mess with my clunky ease editor (see video above for instructions).
- You can use any path and artwork you want. It can be TOTALLY different than mine.
Submit your homework
Post a video, gif, or CodePen of your results on twitter and use tags: @snorkltv #motionStudy
I’ll retweet it, follow you, and tell you how awesome you are.
Starter CodePen
You can use the demo below if you want to use GreenSock.
Click anywhere on the svg to replay the animation.
Ease Editor Instructions
- Add points – ATL/OPTION-click anywhere on the curve
- Delete points – Select the point and then press the DELETE key on the keyboard
- Toggle smooth/corner – ALT/OPTION-click on an anchor point. Or, ALT/OPTION-drag a control handle to turn it into a corner (not smooth) point.
- Select multiple points – Hold the SHIFT key while clicking anchor points.
- Undo – Press CTRL-Z
- Disable snapping – Hold SHIFT while dragging
Once you get a curve you like you can “Copy Motion Path” and paste it into the ease variable at the top of the JS panel
let easePath = "M0,400 400,0" // paste motion path string here
Remember the Ease Editor is very experimental and will move if you drag it wrong. See video above for more instructions on how to use it and save your curve data.