Popmotion / popmotion

Simple animation libraries for delightful user interfaces
https://popmotion.io
20k stars 662 forks source link

Disable easing in and out #963

Open kaligrafy opened 1 month ago

kaligrafy commented 1 month ago

I search in all the documentation and I don't see how to completely disable easing in and out. Here are my settings:

const loopLength = 1000;
const animationSpeed = 100;
const [currentTime, setCurrentTime] = useState<number>(0);

useEffect(() => {
        const animation = animate({
            from: 0,
            to: loopLength,
            duration: loopLength,
            repeat: Infinity,
            onUpdate: setCurrentTime,
        });
        return () => animation.stop();
}, [loopLength, animationSpeed]);

How can I just get an animated arrow path, with a constant speed and no acceleration and deceleration between each loop?

Here is the current result, which includes an unwanted acceleration and deceleration: https://github.com/user-attachments/assets/31365ef9-19f1-4365-b647-f6fa85794d05

Thanks!

stokesman commented 1 month ago

Add ease: linear see: https://popmotion.io/#quick-start-animation-animate-keyframes-options-ease

kaligrafy commented 1 month ago

Works perfectly, thanks! I thought linear was just easing too, but in a linear fashion. Maybe replace this value by "none" or "no" would be more appropriate?

karlbot commented 1 month ago

Works perfectly, thanks! I thought linear was just easing too, but in a linear fashion. Maybe replace this value by "none" or "no" would be more appropriate?

maybe confusing, but "linear" is the way that kind of interpolation is typically described