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