An initiative which aims to make it easy to create complex, light-weight, and performant web applications using modern js api's.
MIT License
Bot releases are hidden (Show)
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 eventsPublished by okikio over 3 years ago
add 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
Published by okikio over 3 years ago
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.
Published by okikio over 3 years ago
Public release of @okikio/native