An initiative which aims to make it easy to create complex, light-weight, and performant web applications using modern js api's.
This is a beta release, you need to install it with the @beta tag, e.g. npm i @okikio/animate@beta or https://cdn.skypack.dev/@okikio/animate@beta.
Note: docs are still a WIP, for now the Changelog are all I've got tell me what you think.
Timeline class & timeline method to @okikio/animate. It's a very light wrapper around the Animate class, it functions very similarly to animejs's timeline method. It allows you to add a bunch of Animate instances you want to run in a specific order together and allows you to set the progress, play, pause, etc... of the timeline, which will then get passed to the Animate instances connected to the timeline.stagger, random, & StaggerCustomEasing to @okikio/animate
tween with AnimateAttributes class, it gains the ability to update tweens via the updateOptions method, but losses the ability to animate the style attribute of an elementarrFill to make transform property animations smooth, in browsers that don't support CSS.registerProperty
offset, and composite animation options not working properlyAnimate constructor's parameters to an empty object to avoid errorsinitialOptions, maxEndDelay, totalDurationOptions, and timelineOffset to Animate classupdate event, by default the limit is 60fpsAnimate.prototype.visibilityPlayState publicplaystate-change eventcommitStyles and persist methods to the Animate classtotalDuration, minDelay, maxSpeed, maxDuration, maxEndDelay, etc.. on the Animate class even if no targets are giveninitialOptions
toArr() to only convert strings with spaces to arrays. This is for animation options like this, translate: ["50px 60px", "60px 70px"], it replaces the old functionallity of using commas & it's easier on the eyesCSS.registerProperty) for animating transform functions. CSS vars are smoother and allows you to use multiple animations on the same individul transform property and have them just work with little to no hassle. Only Chromium based browsers support it at the moment, if the browser doesn't support it @okikio/animate will fallback to the old method of animating transform properties.@okikio/animate from @okikio/native, it added bulk that I feel would be better seperate. This is a major change, because this change will break multiple projects if devs are not careful.@okikio/native to better use raf during scroll and resize events. During my testing I determined that cancel raf was using up compute time, but wasn't actually helping performance.asyncMethodCall from @okikio/manager. I don't see many devs using it, and it's a confusing method, I feel it would be better for each person who needs the functionality to just create their own custom method....on("event1 event2 event3"), @okikio/emitter would create an array of with event{1, 2, & 3} but would also include empty eventsadd custom-easing with support for complex easing functions like spring, elastic, and bounce;
the CustomEasing, SpringEasing, and ApplyCustomEasing functions generate Array's that emulate custom easing;
add out-in as an extra supported easing variation for custom-easing alone;
add support for ordered transform functions as CSS properties, so, the resulting transform depends on the order you define the transform functions;
add DestroyableAnimate, a extended varient of the Animate class, that removes all targets from the DOM when it is stopped via the stop() method;
add tween() & tweenAttr() for animating empty elements that are forced on to the DOM, which are removed when the animation is stopped.
tweenAttr uses the "update" event together with an opacity animation of a hidden empty element to animate attributes and styles;
update docs with detailed info.;
add Effects section to docs;
add composite to Animation Options;
add docs on running, testing, & building locally;
add badges to docs;
update API docs;
Go through the @okikio/animate README.md for more details
remove all exported native initiative packages, including animate, emitter, & manager;
clean up code;
d842a46: support dashed css properties; add more auto unit css properties
You can now use both camelCase and dashed CSS properties; more CSS properties now support auto units by default all CSS properties with that have a name in this list ["margin", "padding", "size", "width", "height", "left", "right", "top", "bottom", "radius", "gap", "basis", "inset", "outline-offset", "perspective", "thickness", "position", "distance", "spacing"], this includes margin, padding, and inset, with thier mult value support, "5% 6 7 8", etc... Warning: all CSS properties that can accept color as a value are disallowed from auto units.
All notable changes to this project will be documented in this file. See standard-version for commit guidelines.
All notable changes to this project will be documented in this file. See standard-version for commit guidelines.
Bug Fixes @okikio/animate: 🐛 fix easing & loop bugs in animationKeyframes (9025933)
Public release of @okikio/native