Text rotation animation (vue 3 and js, css, anime.js, gsap or three.js) -- 2
Budget: $10 – $30 USD
I need someone with solid knowledge of web animation. The goal is to have a moving text.
Requirements:
1. The rotation must be clockwise.
2. The effect must be 3D with smooth animation.
3. It must look good in a 380 x 40 px div.
4. It should handle an array of different texts, one after another, with spacing between them.
5. The text should follow an elliptical path (longer on the X-axis), where the side of the ellipse (frontal on the Z-axis) is flat.
6. I need to control the radius of the ellipse's ends.
7. The opacity at the ends should depend on the position relative to the camera/user.
8. I need control over whether the animation should be continuous or paused. If paused, the text should center in the front position for a few seconds before sliding left, making way for the next text.
9. I need control over timing/speed for both pausing and sliding.
10. Ideally, this should be done within a Vue 3 composition API script setup component. If not, plain HTML is fine. Do not use React, Angular, or Svelte.
I have this CodePen showing something similar to what I need: https://codepen.io/Juan-Guillermo-Casta-o-Mercado/pen/RNwyeja
You can use HTML, CSS, JS, anime.js, GSAP, or Three.js—whatever is necessary to achieve the effect.
To confirm you read all the requirements, start your proposal with the word "copito." Proposals without this keyword will be reported as spam.
Requirements:
1. The rotation must be clockwise.
2. The effect must be 3D with smooth animation.
3. It must look good in a 380 x 40 px div.
4. It should handle an array of different texts, one after another, with spacing between them.
5. The text should follow an elliptical path (longer on the X-axis), where the side of the ellipse (frontal on the Z-axis) is flat.
6. I need to control the radius of the ellipse's ends.
7. The opacity at the ends should depend on the position relative to the camera/user.
8. I need control over whether the animation should be continuous or paused. If paused, the text should center in the front position for a few seconds before sliding left, making way for the next text.
9. I need control over timing/speed for both pausing and sliding.
10. Ideally, this should be done within a Vue 3 composition API script setup component. If not, plain HTML is fine. Do not use React, Angular, or Svelte.
I have this CodePen showing something similar to what I need: https://codepen.io/Juan-Guillermo-Casta-o-Mercado/pen/RNwyeja
You can use HTML, CSS, JS, anime.js, GSAP, or Three.js—whatever is necessary to achieve the effect.
To confirm you read all the requirements, start your proposal with the word "copito." Proposals without this keyword will be reported as spam.