juliangarnier / anime

JavaScript animation engine
https://animejs.com
MIT License
49.7k stars 3.67k forks source link

Jumps when animating from percentage to pixels #897

Open oddpxl opened 4 months ago

oddpxl commented 4 months ago

update Just realised I can fix this by using calc --> {top: ['50%', 'calc(0% + 100px)']},

Less intuitive perhaps...but works fine !

Describe the bug Position jumps when animating from top:'50%' <--> top:'100px'

To Reproduce anime({ targets: '.myobject', keyframes: [ {top: ['50%', '100px']}, {top: ['100px', '50%']}, ], duration: 4000, easing: 'easeInOutSine', loop: true, });

Expected behavior Animate between top:50% <--> top:200px

Desktop (please complete the following information):

Additional context Perhaps this was never intended to work - as I didn't have this problem with GSAP I got used to this being solved - it is very useful to animate from part of a screen to a known location... ..but hey I love AnimeJS regardless so thanks :)