Timeline transform element property multiple times with relative value
See original GitHub issueI just discovered anime.js for a svg animation project, so first off: thanks for this great library which fits my need exactly!
I ran into the problem with animating the same element property multiple times with relative values.
TL = anime.timeline().add({targets: '.el', translateX: '+=100'})
.add({targets: '.el', translateX: '+=100'})
I’d expect these relative transforms to be cumulative, but instead they restart from the same initial state.
Not sure if this is design or a bug, but in my opinion this takes away a lot of the value of relative transforms. With the velocity framework, $.Velocity.RunSequence()
chains relative transforms in a cumulative way.
Issue Analytics
- State:
- Created 7 years ago
- Comments:15 (7 by maintainers)
Top Results From Across the Web
transform - CSS: Cascading Style Sheets - MDN Web Docs
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual ...
Read more >Documentation - Anime.js
Animation keyframes are defined using an Array, within the keyframes property. If there is no duration specified inside the keyframes, each keyframe duration ......
Read more >Docs | GSAP | gsap.to() - GreenSock
A function to call when the animation begins (when its time changes from 0 to some other value which can happen more than...
Read more >Adjust layer properties in After Effects - Adobe Support
Set a property value. If multiple layers are selected and you change a property for one layer, then the property is changed for...
Read more >Tumult Hype Documentation
Keyframes define a property's value at a specific time on a timeline. ... Guides assist in arranging elements relative to each other and...
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
@juliangarnier, keep in mind that v2.0.2-TL breaks the behavior above, just in a different direction (sort of). I’ll try to find some time to take a look at the code. Until then, all 3 versions (v2.0.1, v2.0.2, v2.0.2-TL) - respectively:
I am not following all the technical details described above (JavaScript newbie), but I think I encounter the same issue. I would like to move shapes around randomly, so make a random translation again and again, but not returning to the initial value:
It seems like you guys have a solution to this issue, would it be possible to lay that out for me once again in simple steps?
Thanks in advance! (+ Beautiful library & documentation!!)