https://github.com/zeh/fween-js

Fween.
https://github.com/zeh/fween-js

Last synced: 3 days ago
JSON representation

Fween.

• Host: GitHub
• URL: https://github.com/zeh/fween-js
• Owner: zeh
• License: mit
• Created: 2015-08-15T01:25:14.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2024-01-31T04:00:47.000Z (10 months ago)
• Last Synced: 2024-10-28T14:27:49.198Z (16 days ago)
• Language: TypeScript
• Size: 386 KB
• Stars: 7
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Fween

Fween tweens things - object properties, function calls, HTML element styles.

It is a TypeScript project that builds into a JavaScript library.

Its main concept is simplicity. Its syntax uses a chained/stream methodology to construct sequences.

It is experimental, and under early development.

## Syntax

With a getter/setter function pair:

    Fween.use(getterFunc, setterFunc)

        .from(value) // Optional: set the starting value

        .to(value, durationSeconds = 0, transitionFunction = Easing.none)

With an arbitrary object:

    Fween.use(obj)

        .todo

All Fween instances also include some common methods:

    Fween.use(...)

        .play()

        .pause()

        .call(function)

        .wait(seconds)

## Examples

A getter/setter animation, smooth scrolling in 1 second and then calling a function:

    Fween.use(getScrollY, setScrollY).to(0, 1, Easing.expoOut).call(completeCallback).play();

    function getScrollY() {

        return window.scrollY;

    }

    function setScrollY(value) {

        window.scrollTo(0, value);

    }

    function completeCallback() {

        console.log("Smooth scroll ended.");

    }

## Todo

    Fween.use(obj)

		.to({x: value}, 1, Easing.expoOut);

    Fween.use(element.style)

		.to({top: "valuepx"}, 1, Easing.expoOut);

    Fween.use(element)

		.to("background-color: #ffffff", 1, Easing.expoOutString)