Understanding complex animations
Hey guys I have a question that I really can’t wrap my head around, how do you create like interactive animations? For example let’s say I want to create a gas pedal and a speed odometer, and when the user clicks the pedal the odometer moves as if accelerating.
The odometer is sinple but what my brain can’t understand is how would you animate a gas pedal being pressed down.
Or another example a watch being turned 360 or a statue holding a ball and it rotating .
Anyone have any good resources that really explain how this all works , I can’t find anything when I just look up animations
4 Replies
Those are not animations as in "CSS animations", but actual graphics running inside an HTML Canvas. There are libraries that can leverage those such as Three.js. The speedometer/pedal example is probably doable without this depending how realistic you want the pedal to look like.
SVGator
SVGator: Free SVG Animation Creator Online - No Coding
It's SVG animation made easy - Create impressive SVG animations online, without any coding skills. Add them easily to your website. Get started for free!
Rive - Build interactive animations that run anywhere
Use our familiar design and animation tools with our ground-breaking State Machine to create interactive motion graphics for your products, apps, sites, and games.
You'd use software like that to lay out the basic motions & then alter the scripts controlling them to be interactive.
Rive has state machines and you can program interactivity within the interface.
@dys 🐙 thank you ill look into it!