gzap

GSAP wrapper that doesn't mutate the source object/DOM node. Animates on shadow DOM with support for computed styles. Made with intent to use with React, but supports other usecases as well.

npm install gzap

Example

import React, { Component } from 'react';
import gzap from 'gzap'

export class ComponentName extends Component {
  constructor(props) {
    super(props)

    this.state = {
      circleCSS: {
        background: '#BADA55',
        width: 100,
        height: 100,
        borderRadius: '50%'
      }
    }
  }

  componentDidMount() {
    gzap.from(this._ref, 1, {
      y: '+=100',
      opacity: 0,
      onUpdate: (apply, styles) => {
        console.log(styles)
        // {
        //   transform: "matrix3d(-1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 200, 6.845, 0, 1)",
        //   opacity: "0.965775"
        // }

        let mergedStyles = apply(this.state.circleCSS)
        // {
        //   background: '#BADA55',
        //   width: 100,
        //   height: 100,
        //   borderRadius: '50%',
        //   transform: "matrix3d(-1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 200, 6.845, 0, 1)",
        //   opacity: "0.965775"
        // }

        this.setState({ circleCSS: mergedStyles })
      }
    })
  }

  render() {
    return (
      <div className="circle" ref={(c) => this._ref = c} style={this.state.circleCSS}></div>
    );
  }
}

import React, { Component } from 'react';
import gzap from 'gzap'

export class ComponentName extends Component {
  constructor(props) {
    super(props)

    this.state = {
      circleCSS: {
        background: '#BADA55',
        width: 100,
        height: 100,
        borderRadius: '50%'
      }
    }
  }

  componentDidMount() {
    let tl = gzap.tl()

    tl.to(this._ref, 1, {
      y: 100,
      onUpdate: (apply, styles) => {
        this.setState({ circleCSS: apply(this.state.circleCSS) })
      },
      onComplete: (apply, styles) => {
        console.log('Completed animation #1')
      }
    })

    tl.to(this._ref, 1, {
      x: 100,
      onUpdate: (apply, styles) => {
        this.setState({ circleCSS: apply(this.state.circleCSS) })
      },
      onComplete: (apply, styles) => {
        // The circleCSS state object can be modified at any time without interfering with gzap animations
        this.setState({ circleCSS: Object.assign({}, this.state.circleCSS, { background: '#00FF00' }) })
        console.log('Completed animation #2')
      }
    })

    tl.to(this._ref, 1, {
      rotation: 100,
      onUpdate: (apply, styles) => {
        this.setState({ circleCSS: apply(this.state.circleCSS) })
      },
      onComplete: (apply, styles) => {
        console.log('Completed animation #3')
      }
    }, 0.5)
  }

  render() {
    return (
      <div className="circle" ref={(c) => this._ref = c} style={this.state.circleCSS}></div>
    );
  }
}

API

gzap.to(target, duration, vars)

Implements TweenMax.to with the following modifications to vars:

onUpdate: (apply, styles) => {}
onComplete: (apply, styles) => {}

apply(object) A function that safely assigns the animated styles to object. Uses Object.assign({}, sourceObject, styles)

styles An object containing all the animated styles. All properties has been converted to Style Object Properties

gzap.from(target, duration, vars)

Implements TweenMax.from with the following modifications to vars:

onUpdate: (apply, styles) => {}
onComplete: (apply, styles) => {}

apply(object) A function that safely assigns the animated styles to object. Uses Object.assign({}, sourceObject, styles)

styles An object containing all the animated styles. All properties has been converted to Style Object Properties

gzap.fromTo(target, duration, fromVars, toVars)

Implements TweenMax.fromTo with the following modifications to fromVars and toVars:

onUpdate: (apply, styles) => {}
onComplete: (apply, styles) => {}

apply(object) A function that safely assigns the animated styles to object. Uses Object.assign({}, sourceObject, styles)

styles An object containing all the animated styles. All properties has been converted to Style Object Properties

let timeline = gzap.tl(vars)

Implements TimelineMax with the following modifications:

timeline.to(target, duration, vars, position) // Uses gzap.to
timeline.from(target, duration, vars, position) // Uses gzap.from
timeline.fromTo(target, duration, fromVars, toVars, position) // Uses gzap.fromTo

Since GZAP is a wrapper, all other GSAP functionality should be available