Scroll Animation Engine

Engine to register animations that are driven by scroll. That means that animation progress is dragged or progress change is triggered by scroll.

Originally part of an animated header which transitioned from a big state to a small state based on user scroll.

Code is not yet as clean and well structured as I'd like to have it, but it works.

Let's see where this project goes.

Requirements

Supports all major browsers, including IE11 and iOS Safari 8+

This project (and it's dependencies, especially popmotion) make use of some ES6 functionality that needs to be polyfilled in older Browsers:

• Map
• WeakSet
• WeakMap
• Math.sign
• Symbol.iterator
• Array.prototype.@@iterator

You can polyfill it using polyfill.io:

<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,WeakSet,WeakMap,Math.sign,Symbol.iterator,Array.prototype.@@iterator"></script>

Todo:

• Debug Log statements are still included in production bundle, DCE not working good enough to catch them
• I think we can use an array instead of an set for the animations
• cleanup code
• maybe a class is the wrong idea, since multiple instances don't really make sense
• store dom references globally in the engine, not per animation
  • currently, two animations can have the same dom references => duplicated objects

Demo

The engine includes a demo animation (the animation the engine was developed for) in demo folder.

Online demo: https://simonselg.github.io/ScrollAnimationEngine/

Development

Setup

# clone repo
git clone [email protected]:SimonSelg/ScrollAnimationEngine.git && cd ScrollAnimationEngine
# setup demo/dist subtree for gh-pages
git worktree add demo/dist gh-pages

Yarn/npm scripts

• yarn build builds the library
• yarn clean clean build artifacts
• yarn demo:start starts the dev server
• yarn demo:build builds the demo in demo/dist
• yarn demo:publish publish demo to Github Pages