Animator Core is the runtime and rendering engine for Haiku Animator and the components you create with Animator

Overview

Animator Core

NPM

Animator Core is the runtime and rendering engine for Haiku Animator and the components you create with Animator. This engine is a dependency for any Haiku Animator components that are run on the web.

Note that for iOS and Android, Haiku Animator also supports exporting to Lottie. Animator Core is only used when rendering Animator components for the web.




Compatible with modern browsers


Animator Core is compatible with all major modern web browsers: Firefox, Chrome, Safari, and Edge. Its footprint is ~50kB gzipped.



Hackable + compatible with existing codebases

Animator Core provides a simple and familiar API for runtime manipulation of components that were built in Animator. You can play and pause animations, react to events, and even pass in dynamic data. (See the docs for more info.)


Getting started

Creating an Animator component begins in Haiku Animator:

  1. Design a component in Animator — or ask your designer for a component's Animator share URL
  2. Install the Haiku CLI: $ yarn global add @haiku/cli or $ npm i @haiku/cli --global
  3. Add that component to an existing React or web codebase: $ haiku install @haiku/yourusername-yourcomponent
  4. Seamlessly update the component as its design changes: $ haiku upgrade [projectname] [--version=rev]

Dev tip: If you have Animator installed, you can also $ npm link or $ yarn link your Animator components to make them available to your codebase toolchain's hot reloading hooks. Animator projects live in ~/.haiku/projects.


Direct installation

If you want to install and develop with Animator Core directly, you can do so with:

$ npm install @haiku/core

Or via yarn:

$ yarn add @haiku/core

Animator Core is also available via Haiku's CDN:

">



API / Docs

For our full documentation (a work in progress), please see docs.haikuforteams.com. We welcome your contributions on Github.


Usage examples

Simple:

import AnimatorCore from "@haiku/core/dom";
const definition = {template: {elementName: 'div', children: ['Hello Animator!']}};
const factory = AnimatorCore(definition);
const component = factory(document.getElementById("mount"));

Animated:

import AnimatorCore from "@haiku/core/dom";
const definition = {
  timelines: {
    Default: {
      "#box": {
        "style.width": { 0: { value: "100px" }},
        "style.height": { 0: { value: "100px" }},
        "style.backgroundColor": { 0: { value: "red" }},
        "rotation.z": {
          0: { value: 0, curve: "linear" },
          1000: { value: 3.14159 },
        },
      },
    },
  },
  template: {
    elementName: 'div',
    attributes: {id: 'box'},
    children: ['Hello Animation!'],
  },
};
const factory = AnimatorCore(definition);
const component = factory(document.getElementById("mount"));

Interactive:

import AnimatorCore from "@haiku/core/dom";
const definition = {
  options: {
    autoplay: false,
  },
  states: {
    clicks: {
      value: 0,
    },
  },
  eventHandlers: {
    "#box": {
      "click": {
        handler: function () {
          this.state.clicks += 1;
          this.getTimeline("Default").play();
        },
      },
    },
  },
  timelines: {
    Default: {
      "#box": {
        "content": { 0: {
          value: function (clicks) {
            return clicks + "";
          },
        }},
        "style.width": { 0: { value: "100px" }},
        "style.height": { 0: { value: "100px" }},
        "style.backgroundColor": { 0: { value: "red" }},
        "rotation.z": {
          0: { value: 0, curve: "linear" },
          1000: { value: 3.14159 },
        },
      },
    },
  },
  template: {
    elementName: 'div',
    attributes: {id: 'box'},
  },
};
const factory = AnimatorCore(definition);
const component = factory(document.getElementById("mount"));

Tracking / Analytics

By default, Haiku tracks usage of published components by transmitting metadata to Haiku's Mixpanel account when components are initialized on the page. We send only public information: your component's name, its Haiku account username, the software version it was built with, and its share identifier.

To disable this, set the mixpanel option to false:

// ...
const factory = AnimatorCore(definition);
const component = factory(document.getElementById("mount"), {
  mixpanel: false // Or the string of your own Mixpanel API token
})

Bugs / Feature Requests / Troubleshooting

Please use GitHub Issues.


Contributing

Please send contributions via pull request.


Roadmap

Code improvements

  • Use arrow functions throughout (in progress!)
  • Improve test coverage
  • Inline source code docs
  • Types

Features

  • Alternative component formats
  • Improved Lottie integration
  • More comprehensive programmatic API

Development

To develop Animator Core locally:

  1. Fork the repo
  2. $ yarn install

Compile with:

$ yarn compile

Test with:

$ yarn test

Find formatting problems with:

$ yarn lint

Run demos in your browser:

$ yarn demos

License / Copyright

MIT. Please refer to LICENSE.txt. Copyright (c) 2016-2018 Haiku Systems Inc.

Comments
  • "TypeError: Cannot read property 'defaultView' of undefined"

    Hello guys! Nice concept!

    I just tried importing the exported vue component,

    <template>
        <div>
            <percy :loop="true"></percy>
        </div>
    </template>
    
    <script>
        import Vue from 'vue'
        import percy from '@haiku/trusktr-percy'
    
        export default Vue.extend( {
            components: { percy },
        } )
    </script>
    

    and I get an error in the browser console:

    screen shot 2018-08-14 at 8 42 23 pm

    Any ideas?

    opened by trusktr 3
  • timeline.matchesCriteria is not a function

    timeline.matchesCriteria is not a function

    I have the next issue apparently with Haiku. When I make a build and run on local It works fine but when I deploy on my https web page It just doesn't work.

    HaikuTimeline.js?abdd:411 Uncaught TypeError: timeline.matchesCriteria is not a function
        at eval (HaikuTimeline.js?abdd:411)
        at Array.filter (<anonymous>)
        at Function.HaikuTimeline.where (HaikuTimeline.js?abdd:410)
        at HaikuComponent.fetchTimelines (HaikuComponent.js?4537:325)
        at eval (HaikuComponent.js?4537:315)
        at HaikuComponent.HaikuBase.cacheFetch (HaikuBase.js?419e:78)
        at HaikuComponent.getTimelines (HaikuComponent.js?4537:314)
        at HaikuComponent.assignConfig (HaikuComponent.js?4537:258)
        at new HaikuComponent (HaikuComponent.js?4537:110)
        at new HaikuContext (HaikuContext.js?b900:80)
        at HaikuComponentFactory (HaikuContext.js?b900:338)
        at ProxyComponent.HaikuReactDOMAdapter.HaikuReactComponentInternal.createContext (HaikuReactDOMAdapter.js?4056:138)
        at ProxyComponent.wrappedMethod (react-hot-loader.development.js?d9b4:502)
        at ProxyComponent.HaikuReactDOMAdapter.HaikuReactComponentInternal.attemptMount (HaikuReactDOMAdapter.js?4056:60)
        at ProxyComponent.wrappedMethod (react-hot-loader.development.js?d9b4:502)
        at ProxyComponent.HaikuReactDOMAdapter.HaikuReactComponentInternal.componentDidMount (HaikuReactDOMAdapter.js?4056:56)
        at ProxyComponent.wrappedMethod (react-hot-loader.development.js?d9b4:492)
        at commitLifeCycles (react-dom.development.js?5cd0:8770)
        at commitAllLifeCycles (react-dom.development.js?5cd0:9946)
        at HTMLUnknownElement.callCallback (react-dom.development.js?5cd0:542)
        at Object.invokeGuardedCallbackDev (react-dom.development.js?5cd0:581)
        at invokeGuardedCallback (react-dom.development.js?5cd0:438)
        at commitRoot (react-dom.development.js?5cd0:10050)
        at performWorkOnRoot (react-dom.development.js?5cd0:11017)
        at performWork (react-dom.development.js?5cd0:10967)
        at requestWork (react-dom.development.js?5cd0:10878)
        at scheduleWorkImpl (react-dom.development.js?5cd0:10732)
        at scheduleWork (react-dom.development.js?5cd0:10689)
        at Object.enqueueSetState (react-dom.development.js?5cd0:6212)
        at ProxyComponent.Component.setState (react.development.js?a3af:237)
        at ProxyComponent._callee8$ (index.js?4b73:670)
        at tryCatch (runtime.js?d004:62)
        at Generator.invoke [as _invoke] (runtime.js?d004:296)
        at Generator.prototype.(/anonymous function) [as next] (webpack-internal:///../../../regenerator-runtime/runtime.js:114:21)
        at step (index.js?4b73:481)
        at eval (index.js?4b73:481)
    (anonymous) @ HaikuTimeline.js?abdd:411
    HaikuTimeline.where @ HaikuTimeline.js?abdd:410
    HaikuComponent.fetchTimelines @ HaikuComponent.js?4537:325
    (anonymous) @ HaikuComponent.js?4537:315
    HaikuBase.cacheFetch @ HaikuBase.js?419e:78
    HaikuComponent.getTimelines @ HaikuComponent.js?4537:314
    HaikuComponent.assignConfig @ HaikuComponent.js?4537:258
    HaikuComponent @ HaikuComponent.js?4537:110
    HaikuContext @ HaikuContext.js?b900:80
    HaikuComponentFactory @ HaikuContext.js?b900:338
    HaikuReactDOMAdapter.HaikuReactComponentInternal.createContext @ HaikuReactDOMAdapter.js?4056:138
    wrappedMethod @ react-hot-loader.development.js?d9b4:502
    HaikuReactDOMAdapter.HaikuReactComponentInternal.attemptMount @ HaikuReactDOMAdapter.js?4056:60
    wrappedMethod @ react-hot-loader.development.js?d9b4:502
    HaikuReactDOMAdapter.HaikuReactComponentInternal.componentDidMount @ HaikuReactDOMAdapter.js?4056:56
    wrappedMethod @ react-hot-loader.development.js?d9b4:492
    commitLifeCycles @ react-dom.development.js?5cd0:8770
    commitAllLifeCycles @ react-dom.development.js?5cd0:9946
    callCallback @ react-dom.development.js?5cd0:542
    invokeGuardedCallbackDev @ react-dom.development.js?5cd0:581
    invokeGuardedCallback @ react-dom.development.js?5cd0:438
    commitRoot @ react-dom.development.js?5cd0:10050
    performWorkOnRoot @ react-dom.development.js?5cd0:11017
    performWork @ react-dom.development.js?5cd0:10967
    requestWork @ react-dom.development.js?5cd0:10878
    scheduleWorkImpl @ react-dom.development.js?5cd0:10732
    scheduleWork @ react-dom.development.js?5cd0:10689
    enqueueSetState @ react-dom.development.js?5cd0:6212
    Component.setState @ react.development.js?a3af:237
    _callee8$ @ index.js?4b73:670
    tryCatch @ runtime.js?d004:62
    invoke @ runtime.js?d004:296
    prototype.(anonymous function) @ runtime.js?d004:114
    step @ index.js?4b73:481
    (anonymous) @ index.js?4b73:481
    Promise.then (async)
    step @ index.js?4b73:481
    (anonymous) @ index.js?4b73:481
    (anonymous) @ index.js?4b73:481
    RouteData._this2.loadRouteData @ index.js?4b73:680
    componentWillMount @ index.js?4b73:688
    wrappedMethod @ react-hot-loader.development.js?d9b4:502
    callComponentWillMount @ react-dom.development.js?5cd0:6370
    mountClassInstance @ react-dom.development.js?5cd0:6435
    updateClassComponent @ react-dom.development.js?5cd0:7840
    beginWork @ react-dom.development.js?5cd0:8225
    performUnitOfWork @ react-dom.development.js?5cd0:10224
    workLoop @ react-dom.development.js?5cd0:10288
    callCallback @ react-dom.development.js?5cd0:542
    invokeGuardedCallbackDev @ react-dom.development.js?5cd0:581
    invokeGuardedCallback @ react-dom.development.js?5cd0:438
    renderRoot @ react-dom.development.js?5cd0:10366
    performWorkOnRoot @ react-dom.development.js?5cd0:11014
    performWork @ react-dom.development.js?5cd0:10967
    requestWork @ react-dom.development.js?5cd0:10878
    scheduleWorkImpl @ react-dom.development.js?5cd0:10732
    scheduleWork @ react-dom.development.js?5cd0:10689
    scheduleTopLevelUpdate @ react-dom.development.js?5cd0:11193
    updateContainer @ react-dom.development.js?5cd0:11231
    (anonymous) @ react-dom.development.js?5cd0:15226
    unbatchedUpdates @ react-dom.development.js?5cd0:11102
    renderSubtreeIntoContainer @ react-dom.development.js?5cd0:15225
    render @ react-dom.development.js?5cd0:15290
    render @ index.js?84b3:14
    (anonymous) @ index.js?84b3:18
    (anonymous) @ index.js?84b3:19
    ../../../../src/index.js @ app.225e5abc.js:1149
    __webpack_require__ @ app.225e5abc.js:679
    fn @ app.225e5abc.js:89
    0 @ app.225e5abc.js:5822
    __webpack_require__ @ app.225e5abc.js:679
    (anonymous) @ app.225e5abc.js:725
    (anonymous) @ app.225e5abc.js:728
    index.js?4bfd:2177 The above error occurred in the <HaikuReactComponentInternal> component:
        in HaikuReactComponentInternal (created by Unknown)
        in div (created by StyledComponents__MainAnimation)
        in StyledComponents__MainAnimation (created by Unknown)
        in div (created by StyledComponents__MainSection)
        in StyledComponents__MainSection (created by Unknown)
        in div (created by Unknown)
        in div (created by StyledComponents__HomeContainer)
        in StyledComponents__HomeContainer (created by Unknown)
        in div (created by Unknown)
        in Unknown (created by RouteData)
        in RouteData (created by Route)
        in Route (created by withRouter(RouteData))
        in withRouter(RouteData) (created by ConnectedRouteData)
        in ConnectedRouteData (created by Route)
        in Route (created by Routes)
        in Routes (created by App)
        in div (created by App__AppStyles)
        in App__AppStyles (created by App)
        in RouterScroller (created by Route)
        in Route (created by withRouter(RouterScroller))
        in withRouter(RouterScroller) (created by Router)
        in Router (created by Router)
        in Router (created by App)
        in App (created by HotExportedApp)
        in AppContainer (created by HotExportedApp)
        in HotExportedApp
    
    React will try to recreate this component tree from scratch using the error boundary you provided, Router.
    
    opened by paulgalarza 2
  • Potential Trademark Issues

    Potential Trademark Issues

    It's possible that Haiku might conflict with the trademarks of Haiku, Inc. and Haiku (the operating system)

    The similar Industry (Software) and similar branding could cause consumer confusion. Haiku is proud of its branding and has enjoyed use of the trademark (registered and unregistered) since 2003. Haiku lives in the open-source ecosystem, so I'm posting this here publically to document our concerns.

    opened by kallisti5 2
  • Use ES6 throughout

    Use ES6 throughout

    First, congrats on open sourcing this! Really excited to see where this project goes. I was curious if there is a roadmap for converting things to use ES6? I'd love to take a stab at converting things if possible, seems simple enough and I'd love to learn more about the interworkings of everything 😇please let me know and I can start working on a PR.

    opened by souporserious 2
  • update domain + app name

    update domain + app name

    Update lingering haiku.ai references

    • ISSUE_TEMPLATE
    • README.md
    • package.json

    ...and app name (ISSUE_TEMPLATE).

    Also need to update Website in repo description area as I have done on my fork.

    opened by rdela 1
  • Add Elm support.

    Add Elm support.

    Would it be possible to add support for Elm? Our entire front-end is written in Elm and we try hard to shy away from porting out to JavaScript as much as possible. Having Elm support would provide us with greater flexibility.

    opened by bkuhlmann 1
  • problems to use the app

    problems to use the app

    I just created my account, downloaded the app but I can't log in. Apparently t's not the password or the email that is wrong or anything like that, but it keeps showing just an "Uncategorized Error" message, so I don't really know, no feedbacks.

    screen shot 2018-02-19 at 11 42 57
    opened by agnespinhanelli 1
  • We couldn't load the contents of ..

    We couldn't load the contents of ..

    Hi, I'm trying to add sketch file or svg file without success on the mac app. I'm having a: "We couldn't load the contents of designs/icon.svg"

    file is here: icon_huit.svg.zip

    Thanks you

    opened by goldo 1
  • Install @haiku@core in angular project

    Install @haiku@core in angular project

    Having trouble with Haiku Animator? Realtime support is available in our Haiku Community Slack. Thank you for your interest in Haiku! Hello Team,

    I am trying to install @haiku/core in my angular project but it says...

    ´´´ hrathod@Mini-de-hexasys poc-haiku-animator % npm i @haiku/core npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: @angular/[email protected] npm ERR! node_modules/@angular/core npm ERR! @angular/core@"^14.0.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer @angular/core@"^6.0.9" from @haiku/[email protected] npm ERR! node_modules/@haiku/core npm ERR! @haiku/core@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See /Users/hrathod/.npm/eresolve-report.txt for a full report.

    npm ERR! A complete log of this run can be found in: npm ERR! /Users/hrathod/.npm/_logs/2022-07-01T08_28_54_948Z-debug-0.log

    ´´´ Can you please tell me how to install the haiku core in an angular project? Also, Can you add me to the haiku slack community so I can ask all the problems I am facing, please!!!!

    opened by hiren3897 0
  • Working vanilla JS code example

    Working vanilla JS code example

    Is this project still maintained? I tried many examples and none of them worked.

    In docs it's stated to use

    <script src="https://code.haiku.ai/scripts/core/HaikuCore.VERSION.js"></script>
    

    but it doesn't seem to work. Can you provide codepen to working example, where HaikuCore is imported from CDN (no React/Vue project)?

    Thanks!

    opened by p-janik 0
  • Update to support react 17

    Update to support react 17

    Update react adapter to support react 17 and remove warning:

    Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
    
    * Move data fetching code or side effects to componentDidUpdate.
    * If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
    * Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.
    
    Please update the following components: HaikuReactComponentInternal
    
    opened by CodySchaaf 0
  • Demos throw type error

    Demos throw type error

    Checking out master and running demos gives,

    bash-3.2$ yarn install
    bash-3.2$ yarn compile
    bash-3.2$ yarn demos
    yarn run v1.15.2
    $ yarn ts ./scripts/demos.ts
    $ cross-env NODE_ENV=test ts-node -r tsconfig-paths/register -P tsconfig.all.json ./scripts/demos.ts
    
    .../core/node_modules/ts-node/src/index.ts:253
        return new TSError(diagnosticText, diagnosticCodes)
               ^
    TSError: ⨯ Unable to compile TypeScript:
    scripts/demos.ts(19,3): error TS2345: Argument of type '{ stdio: string; cwd: string; }' is not assignable to parameter of type 'SpawnOptions'.
      Types of property 'stdio' are incompatible.
        Type 'string' is not assignable to type 'StdioOptions'.
    
        at createTSError (.../core/node_modules/ts-node/src/index.ts:253:12)
        at getOutput (.../core/node_modules/ts-node/src/index.ts:363:40)
        at Object.compile (.../core/node_modules/ts-node/src/index.ts:551:11)
        at Module.m._compile (.../core/node_modules/ts-node/src/index.ts:435:43)
        at Module._extensions..js (internal/modules/cjs/loader.js:732:10)
        at Object.require.extensions.(anonymous function) [as .ts] (.../core/node_modules/ts-node/src/index.ts:438:12)
        at Module.load (internal/modules/cjs/loader.js:620:32)
        at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
        at Function.Module._load (internal/modules/cjs/loader.js:552:3)
        at Function.Module.runMain (internal/modules/cjs/loader.js:774:12)
    error Command failed with exit code 1.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
    error Command failed with exit code 1.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command
    

    yet all tests pass successfully.

    opened by robinsonkwame 1
  • Custom style attributes

    Custom style attributes

    Hi Haiku,

    I'm using Haiku for Mac, and would like to know if custom style css could be added to elements, just like cursor, z-index, and so on. One example would be "fill" attribute for svgs. Example: angry state could result in my character being red instead of black. I tried to manually add it into code.js, but it didn't change anything.

    Thank you!

    opened by keywinf 2
  • UI to revert back to old version

    UI to revert back to old version

    Thanks for such a nice concept.

    The problem is all changes get auto-saved by clicking Back Arrow ( Next to Haiku Logo )

    It would be great if you Haiku UI can provide git versions to revert back/ or Alert user should change be auto saved.

    Currently, the only workaround is Developer > Open in Terminal > $git reset --hard HEAD~1

    opened by qalqi 0
Owner
Haiku
Open source projects including Haiku Animator and Haiku Optimizer
Haiku
JavaScript animation engine

anime.js JavaScript animation engine | animejs.com Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful AP

Julian Garnier 44k Dec 30, 2022
Tiny Javascript tweening engine.

Weeee.js Tiny Javascript tweening engine. Homepage Usage Step 1: npm install --save weeee.js Step 2: import Weeee from 'weeee.js'; const example = ne

Ivan Bogachev 3 Nov 30, 2022
fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.

What is fakeLoader.js fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulat

João Pereira 721 Dec 6, 2022
fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

fullPage.js English | Español | Français | Pусский | 中文 | 한국어 Available for Vue, React and Angular. | 7Kb gziped | Created by @imac2 Demo online | Cod

Álvaro 34.3k Dec 30, 2022
Javascript library to create physics-based animations

Dynamics.js Dynamics.js is a JavaScript library to create physics-based animations To see some demos, check out dynamicsjs.com. Usage Download: GitHub

Michael Villar 7.5k Jan 6, 2023
Create beautiful CSS3 powered animations in no time.

Bounce.js Bounce.js is a tool and JS library for generating beautiful CSS3 powered keyframe animations. The tool on bouncejs.com allows you to generat

Tictail 6.2k Dec 30, 2022
Create scroll-based animation without JavaScript

Trigger JS Create scroll-based animation without JavaScript. Sometimes we want to update the CSS style of an HTML element based on the scroll position

Trigger JS 1.1k Jan 4, 2023
Animation Academy teaches you CSS animations using the transition and animation properties.

Animation Academy Open Animation Academy > Contents Background Built With Functionality Feature Highlights Wireframes Features In Development Backgrou

Jacob Benowitz 6 Jun 23, 2022
Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element a bit easier, and a bit more fun!

Scrawl-canvas Library Version: 8.5.2 - 11 Mar 2021 Scrawl-canvas website: scrawl-v8.rikweb.org.uk. Do you want to contribute? I've been developing thi

Rik Roots 227 Dec 31, 2022
It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

impress.js It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prez

impress.js 37k Jan 2, 2023
Super-smooth CSS3 transformations and transitions for jQuery

jQuery Transit Super-smooth CSS3 transformations and transitions for jQuery jQuery Transit is a plugin for to help you do CSS transformations and tran

Rico Sta. Cruz 7.4k Dec 23, 2022
Javascript and SVG odometer effect library with motion blur

SVG library for transitioning numbers with motion blur JavaScript odometer or slot machine effect library for smoothly transitioning numbers with moti

Mike Skowronek 793 Dec 27, 2022
🐿 Super easy and lightweight(<3kb) JavaScript animation library

Overview AniX - A super easy and lightweight javascript animation library. AniX is a lightweight and easy-to-use animation library with excellent perf

anonymous namespace 256 Sep 19, 2022
:dizzy: TransitionEnd is an agnostic and cross-browser library to work with transitionend event.

TransitionEnd TransitionEnd is an agnostic and cross-browser library to work with event transitionend. Browser Support 1.0+ ✔ 4.0+ ✔ 10+ ✔ 10.5 ✔ 3.2+

Evandro Leopoldino Gonçalves 95 Dec 21, 2022
A simple and easy jQuery plugin for CSS animated page transitions.

Animsition A simple and easy jQuery plugin for CSS animated page transitions. Demo & Installation http://git.blivesta.com/animsition/ Development Inst

Yasuyuki Enomoto 3.8k Dec 17, 2022
A jQuery plugin that assists scrolling and snaps to sections.

jQuery Scrollify A jQuery plugin that assists scrolling and snaps to sections. Touch optimised. Demo http://projects.lukehaas.me/scrollify. More examp

Luke Haas 1.8k Dec 29, 2022
Slickscroll - A Lightweight JavaScript library for quick and painless momentum & parallax scrolling effects.

Slickscroll is a JavaScript library that makes momentum & parallax scrolling quick and painless View Demo: slickscroll.musabhassan.com Momentum Scroll

Musab Hassan 33 Dec 28, 2022
Slide-element - A ~700 byte Promise-based library for animating elements with dynamic heights open & closed. Basically, a modern variant of jQuery's slideUp(), slideDown(), and slideToggle().

slide-element A tiny, accessible, Promise-based, jQuery-reminiscent library for sliding elements with dynamic heights open & closed. To see it in acti

Alex MacArthur 165 Dec 12, 2022
Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility

Animate Plus Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility. It aims to deliver a steady 60 FPS and

Benjamin De Cock 5.9k Jan 2, 2023