Package Exports

gzap

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gzap) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

gzap

Immutable DOM animations using GSAP.

GSAP wrapper that doesn't modify the source object/DOM node. Performs animations on shadow DOM with support for computed styles. Made with intent to use together 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
      }
    }
  }

  componentDidMount() {
    gzap.from(this._ref, 1, {
      y: '+=100',
      opacity: 0,
      onUpdate: (apply, vars) => {
        console.log(vars)
        // {
        //   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,
        //   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
      }
    }
  }

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

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

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

    tl.to(this._ref, 1, {
      rotation: 100,
      onUpdate: (apply, vars) => {
        this.setState({ circleCSS: apply(this.state.circleCSS) })
      },
      onComplete: (apply, vars) => {
        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, vars) => {}
onComplete: (apply, vars) => {}

apply(object) A function that safely assigns the animated vars to object. Uses lodash' _.assign({}, sourceObject, vars)

vars An object containing all the animated vars. 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, vars) => {}
onComplete: (apply, vars) => {}

apply(object) A function that safely assigns the animated vars to object. Uses lodash' _.assign({}, sourceObject, vars)

vars An object containing all the animated vars. 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, vars) => {}
onComplete: (apply, vars) => {}

apply(object) A function that safely assigns the animated vars to object. Uses lodash' _.assign({}, sourceObject, vars)

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

`let tl = new gzap.tl(vars)`

Implements TimelineMax with the following modifications:

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

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