anime.js overrides static css transforms?
See original GitHub issueAdding a static css transform on a svg path
element and then animating the same element using anime.js overrides the original css transform.
In example if I attempt a transform: rotate(45deg)
on the static css, and then I run anime.js like this:
anime({
targets: "svg path#uno",
rotate: "-360deg",
duration: 8000,
loop: true,
easing: "linear"
})
… the element starts rotating from 0deg not 45deg as expected.
Visually, on load, I get a quick jump from the 45º rotated state to the 0º rotated state and then the animation starts.
The same happens with other css transforms, like translate.
If I cannot transform the svg path with regular CSS BEFORE the animation… can I do it within anime itself?
I mean:
on load
inmediately transform(rotate,translate...) the svg path ONCE
THEN rotate -360deg during 8000ms ON LOOP
I could just transform the svg before pasting it on my code, but I would like to randomize this transform on load.
Thank you
Issue Analytics
- State:
- Created 5 years ago
- Comments:14 (1 by maintainers)
Top Results From Across the Web
Documentation - Anime.js
Any CSS properties can be animated. Most CSS properties will cause layout changes or repaint, and will result in choppy animation.
Read more >Exploring Anime.js with an example site animation project
Learn to use Anime.js, one of the best and fastest JavaScript animation libraries out ... CSS transform properties, such as rotate or scale ......
Read more >Animating with AnimeJS - Medium
Using the anime object we can manipulate multiple CSS properties of the div element such as translate, rotate, skew, etc. This reduces effort...
Read more >Animating CSS Transforms in Anime.js - CodePen
URL Extension Required. When linking another Pen as a resource, make sure you use a URL Extension of the type of code you...
Read more >Anime Js and opacity - javascript - Stack Overflow
I set the "opacity" property to 0 in the .css and configured the script like this: var timeline = anime.timeline(); timeline.add({ targets: ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
This is working for me ! Thanks again @plagasul Quick sample :
I’ve found this on the documentation http://animejs.com/documentation/#specificInitialValue it allows to set initial value , perhaps that’ll be enough for our cases