Jump to content

Jesse A Johnson

  • Posts

  • Joined

  • Last visited

Jesse A Johnson's Achievements


Newbie (1/14)



  1. Zomg it worked Jack. This makes me very happy. Ok, so you handed me a fish. The question now becomes, how do I fish these import answers for myself? Is there documentation on what to import for a given operation? import React, { Component } from 'react'; import {TweenLite, Linear} from 'gsap'; import TextPlugin from "gsap/TextPlugin"; // This worked!
  2. I added this before but saw no difference: import {TweenLite, Linear, TextPugin} from 'gsap'; I'll see what I can work up with the codesandbox in a bit.
  3. GSAP'ers, I'm trying to understand what I'm missing with a simple use case. I managed getting an example I found to work but when trying out something different out, I see no animations. Here is my simple ReactJS and GSAP test. Package versions: gsap": "1.20.4", "react": "16.2.0" Viewing the console, there are no errors. I do see "onStart" and "onComplete" printed. But no animation. import React, { Component } from 'react'; import {TweenLite, Linear} from 'gsap'; export default class TextExample extends Component { animate = () => { TweenLite.to(this.titleElement, 2, {text:this.props.endTitle, ease:Linear.easeNone}) .eventCallback("onStart", () => {console.log("onStart");}) .eventCallback("onComplete", () => {console.log("onComplete");}); } render() { return ( <div id="myId" ref={elm => this.titleElement = elm} onClick={this.animate}> {this.props.startTitle} </div> ) } }
  4. You probably want the ref to point to a raw dom element rather than a react component. Like so: <div style={styles.box} ref={box => this.box = box} className="box" />