Beta Release 2021-July-30

Changelog

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.

@okikio/[email protected]:

• add 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.
• update typescript types for better intellisense
• add stagger, random, & StaggerCustomEasing to @okikio/animate
  • stagger: Creates complex staggered animations, it does it by creating a closure function and using it as an AnimationOption
  • random: Generates random numbers within a range of values
  • StaggerCustomEasing: Allows you to create custom easings for the stagger function; note that it returns a function
• replace 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 element
• add arrFill to make transform property animations smooth, in browsers that don't support CSS.registerProperty
• fix offset, and composite animation options not working properly
• set Animate constructor's parameters to an empty object to avoid errors
• add initialOptions, maxEndDelay, totalDurationOptions, and timelineOffset to Animate class
• add a frame rate limit for raf (requestAnimationFrame) and the update event, by default the limit is 60fps
• make Animate.prototype.visibilityPlayState public
• fix bugs with playstate-change event
• add commitStyles and persist methods to the Animate class
• set totalDuration, minDelay, maxSpeed, maxDuration, maxEndDelay, etc.. on the Animate class even if no targets are given
• add support for array easings
• fix bug with computed transforms by excluding transforms not found in initialOptions
• use updatePlaybackRate for change playback rate by default, if the browser doesn't support it set the playbackRate manually
• add better comments & update documentaion (WIP, I am currently working on updating the documentation)
• update 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 eyes
• remove color-rgba.ts & replace it with DOM colors. Move all unit conversions including colors to a new unit-conversion.ts file
• use DOM colors for custom easing interpolation
• remove matrix & matrix3d from animation options
• use CSS variables (via CSS.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/[email protected]:

• remove @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.
• update @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.

@okikio/[email protected]:

• remove 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.

@okikio/[email protected]:

• fix event listener scope bugs. Fixed errors where event listeners scope wasn't being applied properly.
• fix bug with event selection when specifing multiple events. Prior to this fix, if you did this ...on("event1 event2 event3"), @okikio/emitter would create an array of with event{1, 2, & 3} but would also include empty events

@okikio/[email protected]

Changelog

3.0.0

Major Changes

• remove all exported native initiative packages, including animate, emitter, & manager;

  clean up code;

Patch Changes

• Updated dependencies [undefined]
  • @okikio/[email protected]

@okikio/[email protected]

Changelog

2.3.0

Minor Changes

• 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

@okikio/[email protected]

Changelog

2.1.8

Patch Changes

• Updated dependencies [d842a46]
  • @okikio/[email protected]

@okikio/[email protected]

Changelog

2.2.0

Minor Changes

• 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.

@okikio/[email protected]

Changelog

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

2.1.7 (2021-05-28)

Bug Fixes

• @okikio/animate: 🐛 use -/+ Infinity as initial value for minDelay, maxSpeed, totalDuration (9aeec2e)
• @okikio/native: 🐛 add url to request & timeout errors event (0be77c6)

@okikio/[email protected]

Changelog

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

2.1.6 (2021-05-26)

Bug Fixes

• @okikio/animate: 🐛 fix transfom is "" bug; use document.timeline as default timeline; (da5e640)

@okikio/[email protected]

Bug Fixes
@okikio/animate: 🐛 fix easing & loop bugs in animationKeyframes (9025933)

@okikio/[email protected]

Public release of @okikio/native

Features

• @okikio/animate: ✨ (8a83f0e)
• @okikio/animate: ✨ (017044d)
• @okikio/animate: ✨ (b388ff1)
• @okikio/animate: ✨ add updateOptions method; (382da7e)
• @okikio/emitter: ✨ (8bcbf61)
• @okikio/native: ✨ (e1a687b)
• @okikio/native: ✨ add support for paths; (e5ae22b)
• @okikio/native: ✨ rename @okikio/emitter types; (936d190)

Bug Fixes

• root: 🐛 add sideEffects false; (e82fc66)