Physics Based Web Animation

💰 Budget: 200$

Description

This will be a physics animation where the elements in the storyboard reference (see attached) “pop” up from the bottom of the screen (the blue rectangle with text, the orange oval with text, and the pink circle).

Animation Details

The elements land and “sway” back and forth (left and right, like the reference animation).

Circle Animation

Like in the reference, an additional small circle falls in from the top, lands on the moving elements and rolls off screen. This cycles infinitely.

Physics and Realism

This animation should be based in physics and feel “realistic” in terms of the gravity and overall movement.

Requirements

1. This should be fill the viewport, 100vh and 100vw
2. This should be responsive, as the screen scales the positions and size of the text/elements on screen should scale to fit.
3. The final position of the elements should be roughly the same as what we see in the screenshot/attachment provided.
4. The way the elements come onto the screen and animation there-forward should use physics, preferably matter.js or similar technology. If you wish to use something other than matter.js make sure it is open source.
5. The styling should match the attachment storyboard

Skills/Experience

Front End Web Development
Animation
Matter.js (or similar)

Deliverable

Packaged index.html with CSS and Javascript

Assets

We will provide any assets needed (Fonts, Colors, Storyboards, Vector graphics)

Skills

JavaScript, HTML, Animation, CSS, Web Development