juliangarnier / anime

JavaScript animation engine

Home Page:https://animejs.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Jumps when animating from percentage to pixels

oddpxl opened this issue · comments

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):

  • MAC
  • Safari
  • Latest

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 :)