question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

anime.js overrides static css transforms?

See original GitHub issue

Adding 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:closed
  • Created 5 years ago
  • Comments:14 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
Akhucommented, Sep 18, 2018

This is working for me ! Thanks again @plagasul Quick sample :

basicTimeline.add({ 
        targets: '#id',
        opacity: [0,1], 
        rotateX: ['40deg', '0deg'], //Setting initial and target values for the transform
        translateY: ['-10px','0px'],
        easing: easingCustom,
        duration: 500
});
2reactions
plagasulcommented, Aug 24, 2018

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

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found