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 transform overriding the elements existing transform

See original GitHub issue

button {

z-index: 387;
width: 133px;
border-width: 0px;
-webkit-transform: matrix(0,-1,1,0,-2,135);
-ms-transform: matrix(0,-1,1,0,-2,135);
transform: matrix(0,-1,1,0,-2,135);
margin-bottom: -2px;
position: relative;
margin-right: -10000px;
margin-top: -2px;
left: 307px;
background: transparent url(../images/thumb3.jpg?crc=39550032) no-repeat center center;
background-size: cover;

} “button” already have a transform-matrix. Now if I apply translateX animation var anim = anime({ targets: button, translateX: 200, duration: config.transition_time, delay: function(el, i) { return i * 1; }, easing: config.ease + ‘Sine’, update : onUpdate, complete : onComplete });

Now button’s transform matrix is overridden, however I want bot the transforms to merge/exist together

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

4reactions
juliangarniercommented, Oct 5, 2016

@maaizelahi : @alexchantastic is right, and setting the initial transform values in your animation is the proper way to achieve what you want to do.

@alexchantastic Agreed, unfortunately getting the initials transforms values with getComputedStyle is tricky It will return a transform matrix, and the code needed to decode and extract the values from the matrix will double the size of the library!

3reactions
alexchantasticcommented, Jun 7, 2017

@HauntedSmores, yes that is correct. Anime will ignore (overwrite) existing transform properties. For example if you wanted to go from translateX(100%) to translateX(0%) you would need the following regardless of if transform: translateX(100%); was defined in your CSS:

anime({
  targets: 'div',
  translateX: [100%, 0%]
});
Read more comments on GitHub >

github_iconTop Results From Across the Web

Animate transform only one property (scale) override other ...
Generally when you add an animation with changes to the transform property then the transforms that are specified in the base element should ......
Read more >
Documentation - Anime.js
CSS Transforms. Animate CSS transforms properties individually. It's possible to specify different timing for each transforms properties, more details in ...
Read more >
Transformation Sequence - TV Tropes
Generally overlaps with Suit Up of Destiny the first time the character transforms. Example Subpages: Anime & Manga. Other Examples: open/close all folders....
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 >
How to Approach SVG Animations: A CSS Tutorial - Toptal
The available attributes depend on the element, so while <rect> has width and ... to apply CSS styles and transformations to multiple elements...
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