Typeface animation for wordpress site - ".json" output file
Budget: €30 – €250 EUR
Hi there,
We need someone to take a layout of characters inside a design and create a specific animation for each time every character is been hovered. So in the layout, every time a user moves its cursor above each character, a different animation occurs. The animation will never be the same between each character, but the animation won't take much space.
We have an example of the desired effect in this link -> https://readymag.com/readymag/2022-product-updates/
There will be two animations, but with repeating animations. We don't care which type of platform (After Effects, Lottie, Bodymovin, etc) you use to do this job, as long as its delivered in ".json" format. This means “lightness is king” - as it will be loaded into a deployed website.
We will deliver the files in .svg format and independent, so the way you do it is up to you.
For the first animation it will be only one word:
L - 180º rotation
O - small jump within the box that surrounds the character
G - spin
O - 360º rotation on the “o”
T - 45º axis rotation upward
I - the dot of the i moves up into top of the line
P - the upper part of the p (rounded area) reduces downward into the base
O - moves to the top of box
S - the stroke fills up the character
For the second animation, 2 words are used:
G - flip
A - moves up inside the red box
T - 45º axis rotation
O - 360º rotation
D - small move to the left inside the box
E - small move to the right inside the box
B - the stroke fills up the character
I - the dot of the i moves up into top of the line
G - zooms out
O - jumps continuously
D - the down part of the d (rounded area) moves upward into the top
E - background color changes to cyan
BUDGET - 75€
We need someone to take a layout of characters inside a design and create a specific animation for each time every character is been hovered. So in the layout, every time a user moves its cursor above each character, a different animation occurs. The animation will never be the same between each character, but the animation won't take much space.
We have an example of the desired effect in this link -> https://readymag.com/readymag/2022-product-updates/
There will be two animations, but with repeating animations. We don't care which type of platform (After Effects, Lottie, Bodymovin, etc) you use to do this job, as long as its delivered in ".json" format. This means “lightness is king” - as it will be loaded into a deployed website.
We will deliver the files in .svg format and independent, so the way you do it is up to you.
For the first animation it will be only one word:
L - 180º rotation
O - small jump within the box that surrounds the character
G - spin
O - 360º rotation on the “o”
T - 45º axis rotation upward
I - the dot of the i moves up into top of the line
P - the upper part of the p (rounded area) reduces downward into the base
O - moves to the top of box
S - the stroke fills up the character
For the second animation, 2 words are used:
G - flip
A - moves up inside the red box
T - 45º axis rotation
O - 360º rotation
D - small move to the left inside the box
E - small move to the right inside the box
B - the stroke fills up the character
I - the dot of the i moves up into top of the line
G - zooms out
O - jumps continuously
D - the down part of the d (rounded area) moves upward into the top
E - background color changes to cyan
BUDGET - 75€