Gilbert

Members
  • Content count

    2
  • Joined

  • Last visited

Community Reputation

1 Newbie

About Gilbert

  • Rank
    Newbie
  1. Rodrigo, Thanks a lot for your help. You are the BEST!!!
  2. I am experimenting with these title animations https://github.com/bigfanjs/react-titles and I want to sequence some titles. The questions that I have are: How can I pause or play the original animations? How can I sequence the animations (for each title)? - For example, play the first one, wait for .7 seconds and play the second one, etc. How can I set the initial position of each title? My code is: Here is the code I have: import React, { Component, Fragment } from "react"; import styled from "styled-components"; import * as titles from "react-titles"; import { TimelineMax, Power3 } from "gsap"; const mytitles = [ { component: "Title2", title: "This is ", subTitle: "Sweet", isOpen: false, size: 100, x: '50' }, { component: "Title6", title: "Let' see", subTitle: "if this works", isOpen: false, size: 400, x: '400' }, ] class Title extends Component { constructor(){ super(); this.renderTitle = this.renderTitle.bind(this); this.restartHandler = this.restartHandler.bind(this); this.tl = new TimelineMax({paused: true}); } state = { isOpen: false } restartHandler(){ const {tl} = this; tl.reversed( !tl.reversed() ); } componentDidMount(){ const {tl} = this; mytitles.forEach( (e,i) => { //tl.set(this.refs[e.component], {left:e.x, top:e.x}) tl.to( this.refs[e.component], 1, {x: e.size, y: e.size/3 , scale: 0.5, opacity: 0.5}, .5 * i ); }); tl.reverse(); } getComponent(e) { const ATitle = titles[e.component]; //ATitle.handleRest(); //const {t1} = this; //this.tl.set(this.refs[e.component], {left:e.x, top:e.x}) return( <div className="box" key={e.component} ref={e.component} > <ATitle size={e.size} text1={e.title} text2={e.subTitle} open="false" style={{ position: "absolute", x: " +e.x+" , y: " +e.x+", "fill": "orange" }} onComplete={this.handleComplete} /> </div> ) } renderTitle(e,i){ return( this.getComponent(e) ); } handleComplete = (status) => { /*const {selected, component} = this.state; if (!status && selected !== component) { this.setState({ component: selected, isOpen: true }); }*/ } render() { return( <div> <button onClick={this.restartHandler}>Toggle Tween</button> <div> {mytitles.map(this.renderTitle)} </div> </div> ) } } export default Title;