anime transform overriding the elements existing transform
See original GitHub issuebutton {
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:
- Created 7 years ago
- Comments:6 (4 by maintainers)
Top 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 >
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 Free
Top 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
@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!
@HauntedSmores, yes that is correct. Anime will ignore (overwrite) existing
transform
properties. For example if you wanted to go fromtranslateX(100%)
totranslateX(0%)
you would need the following regardless of iftransform: translateX(100%);
was defined in your CSS: