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

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