Anime Versions Save

Bug fixes

• Fix wrong expo easing calculation #591

Improvements

• Add "remove" method on instance #635
• (Re) Add easeOutIn easing function #684

Bug fixes

• Fix bug with visibilitychange event and paused instances #701, #560, #721, #711
• Fix condition for getAttribute when the returned value is 0 #540
• Fix a scaling issue on path animations when animating an element inside an SVG #568

Docs

• Fix ranged staggering example #704
• Better Elastic easings explanations #694
• Cleanup examples

Improvements

• Add matrix and matrix3d parameters to allow the use of matrix values in CSS Transforms #636
• Change steps easing behaviour to match jump-start CSS timing function #625

Bug fixes

• Fix (again) a bug where the animation will "flick" on reverse #623 #586 #503 #577

Improvements

• Add support for values with exponent (-1.12742e-12) #552
• Easing functions refactoring + added Bounce easing

Bug fixes

• Fix wrong unit detection when a value contains spaces #502
• Fix a bug where the parent of responsive SVG path was not properly set #556
• Fix a bug where the animation will "flick" on reverse #512
• Fix a bug where loopBegin callback could be called just before animation complete
• Update anime.running reference when clearing array on visibility change #560, #466
• Update ES6 module instal path #588, #527, #590

Bug fixes

• Fix ReferenceError on document when running anime.js on the server #472 #481 #345
• Fix a bug that prevented complete callback to be called again when re-playing the animation #483 #373 #378 #392 #408
• Fix a bug triggering a TL promise instantly #159

New features

• New easings: spring(mass, stiffness, damping, velocity) and steps(x)
• Add endDelay parameter
• New keyframes system
• New staggering helper
• New callbacks: loopBegin(), loopComplete(), changeBegin(), change() and changeComplete()
• Automatic CSS units conversion
• Responsive motion path animation
• New set() helper to apply values instantly to multiple targets
• ES6 Modules and new build process
• New documentation
• A website.

Bug fixes

• No need to re-define a transform property when animating multiple transforms on the same target in a timeline
• Improved simultaneous animations on the same target #257
• Allow remove() to remove targets from timeline #318 #286
• Reversed animations can now be delayed using endDelay #254
• Better inline style unit handling (check inline style before getComputedStyle) #251
• SVG scale property is no longer overridden by CSS transform scale #316
• Fix Uncaught “TypeError: Cannot read property 'targets' of undefined” when there are no TL parameters object specified #341
• Fix a bug that prevented specific HTML ids selectors to be selected (HEX colours) #281
• Fix wrong initial SVG transform value in some cases #340

API changes

• run() callback has been replaced by change()
• animations are now paused when tab of window is not active
• getValue() has been replaced by get()
• Cubic Bézier curves are now defined using a string ‘cubicBezier(x1,y1,x2,y2)’ instead of an array
• Timeline offset property has been replaced by timelineOffset #229
• Timeline offset can be set as a second argument inside .add()

Improvements

• Performances boost, up to 1.5 faster 🔥
• Add support for RGBA and HSLA colors animations

Bug fixes

• Fix timeline children begin() callback
• Fix a bug where some timeline durations weren’t properly calculated
• Fix a bug where anime.path() initial values weren’t properly set #245
• Fix a bug where percentage unit starting values were miscalculated #238
• begin() and complete() callbacks are now called instantly if duration is 0

Improvements

• Children animations can now inherit properties from their parent timeline (targets, duration, delay, easing, round) (#152)
• Add support for vmin/vmax/ch units
• Add support for the transform perspective property (#207)
• Add support for circle, rect, polyline, polygon and line shapes for anime.setDashOffset() (#145, #155)
• duration: 0 now instantly finish the animation (#228, #208)
• Animation initial values are now automatically set even if autoplay is false

Bug fixes

• Fix timeline Callbacks at initialisation (#215)
• Fix timeline Promise being called instantly (#159)
• Fix wrong values re-composition for complex CSS properties (like filter, box-shadow, calc()…) (#119, #174, #175, #167, #223)
• Numerical values are not converted to strings anymore (#116)
• Relatives values now keep their unit (#214)
• Seeking an animation to 0 now correctly set the initial properties values (#177, #208)
• run callback is now properly called after animation delay

• Fix Timeline bugs and improvement #113 #131 #121
• Fix an IE bug related to Promise #123
• Absolute images path in documentation #114

What's new?

• Up to 2 times faster
• Multiple keyframes by properties
• Animations timeline
• Custom bezier easing functions
• Promise support
• Relative values (+=, -=, *=)
• Reverse animations at anytime with animation.reverse()
• Brand new documentation

Improvements

• New elastic easing functions (elasticity can slightly differ from v1.x)
• Improved playback and callback systems
• Motion path animation supports reverse and alternate directions
• easing, elasticity and round properties accept functions as value
• Add animation.paused to check if the instance is running or not
• Add animation.reset() to properly reset an animation
• Simpler instance Object

Changes to consider when migrating from v1.x

• update callback is now called right after .play()
• animation.ended replaced by `animation.completed``
• animation.play() and animation.restart() no longer accept arguments
• anime.list is replaced by anime.running
• No more ...Bounce and OutIn... built in easing functions
• No more animation.settings, all parameters are now accessible directly at the root of the Object
• Remove will-change support on CSS animation
• reverse direction now make the animation goes from 100% to 0% instead of reversing tweens properties