f1-gsap

f1 animation parsing functions using GSAP

Usage no npm install needed!

<script type="module">
  import f1Gsap from 'https://cdn.skypack.dev/f1-gsap';
</script>

README

f1-gsap npm

experimental

f1-gsap was forked from f1-dom, which wraps f1 to animate style's of dom elements.

All styles properties are API-Compatible with GSAP. TweenMax.set is used as the parser.

Usage

npm install f1-gsap

Sample state definition:

{
  states: {
    idle: {
      elButton: {
        xPercent: 0,
        y: 100,
        backgroundColor: 'rgb(255, 0, 255)',
        cursor: 'pointer',
        display: 'inline-block'
      },

      text: {
        color: 'rgb(33,33,33)', // or '#212121'
        rotationZ: 0
      }
    }
  }
}

See the test folder for more examples

License

MIT, see LICENSE.md for details.