Hi Need to animate the text like https://theshift.tokyo/en/project/bbf-gate-system-vid/

Hi Need to animate the text like https://theshift.tokyo/en/project/bbf-gate-system-vid/

Home.jsx file :

I am trying to import framer-motion into a react project but I get this compile error:

Replicate the Example from Framer Motion documentation.

I want to trigger a specific animation on the re-render of a component for my sorting visualisation program. I currently have the following;

Let me try to explain. I have this motion.span element where I am animating the width of the current index to be equal to the currentTab. It animates perfectly from 0% to 100% the first time upon initialization. However, once the end is reached and it goes back to the first item of the array, I first see a FLASHING effect. For a few milliseconds, the width is at 100%, then it goes to 0% and animates back to 100%. Additionally, when I click on the LI which has a click event, somehow it jumps and loses its reference and the width of the current and previous item. Can someone please help? I’ve been trying to solve this for 3 hours now, and I’m not sure what I am doing wrong.

I’m using the framer-motion library to create a rotating text effect inside a resizable box on my website. The goal is to make the box adjust its size smoothly as the text changes. When the text gets longer, the box grows nicely, but when the text gets shorter, it suddenly jumps to the new size instead of transitioning smoothly. I need help fixing this so the box adjusts smoothly whether the text gets longer or shorter.

I’m coding a little example with framer motion and React.js. I have a h2 with a text, but I want to imitate the animation from https://angular.dev/, using scroll it should change text color from red to yellow (e.g.),

If someone could give me some advice on this problem I have spent a long time on.