Please provide in your quote the amount of time you expect this to take.
We need a developer asap to come on board and create an animated header
It consists of three circular devices:
A masked glow A sine wave An equaliser These elements are required to animate passively, but also be responsive to a user’s mouse position.
Glow The glow should become affected by the position of the mouse. The closer to the center the mouse is, the more outward movement the glow would have. See https://animation-tests-8e7f20.webflow.io
Wave This should have a slow, persistent ripple when in a passive state. On interaction, the waves should pick up pace and depth, again based on the distance of the mouse from the centre of the circle. The wave should begin, and chase its tail until it closes. An early example is at https://codepen.io/matt-isherwood/pen/ZEWrZpb
Equaliser This again should have a slow persistent ‘noise’. On interaction, the bands should pick up pace and spike further, again based on the distance of the mouse from the centre of the circle. An example is at the following URL, but our version would not need to be as extreme or ‘explosive’. https://www.behance.net/gallery/89511827/Centre-for-French-baroque-music-Brand-design?tracking_source=project_owner_other_projects
2. Deliverables
We require each circle as a standalone piece, built and delivered using HTML, CSS and Javascript. Where possible, variables should be used in the code to maintain editability of colours, timings, and animation amounts.
For reference – there’s a requirement for these devices to be used in an interface similar to this, https://www.vividcreative.com/animations/ (scroll this page to see the different examples) A passive state and single loop of the animations to be used on tablet and mobile should also be considered.
