search

juliangarnier / anime

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

Reverse AnimeJS Properties? #369

Closed MonsterDeveloper closed 6 years ago

MonsterDeveloper commented 6 years ago

Hi Julian! I am writing AnimeJS plugin for ScrollMagic, and when user scrolls up (reverse) animation must play backwards. So I am looking for a way to reverse properties, e.g. if opacity: 0, reverse should be opacity: 1, or if opacity: [0, 1], reverse should be opacity: [1, 0]

juliangarnier commented 6 years ago

hey,

did you try reverse() ? http://animejs.com/documentation/#reverseAnim

You should also look into the seek() function when working on scroll based animations. http://animejs.com/documentation/#seekAnim

MonsterDeveloper commented 6 years ago

Yeah, thanks. When the plugin is done, i will send link to you:) Also I have an idea to rewrite or create library like scrollmagic, because last commit was 3 years ago, and it is one scroll library that works with gsap or velocity.

MonsterDeveloper commented 6 years ago

@juliangarnier Also there is one thing, the ScrollMagic Scene has no duration in time, only in px. I calculate seek time for Anime like that: Scene.duration() * Scene.progress(). But I noticed that when the target element is almost hidden on top, it starts to fade in (I set opacity to 0 in anime). I think this is because seek duration is > than animation duration at all. The opacity just like goes reverse. Any solutions?

MonsterDeveloper commented 6 years ago

Oh sorry, thats was because of easing ))