Control nested timelines

[jeremybarbet]

A TimelineLite contains 5 TimelineLite.

The first time you can control the main one and all the childs, and you can do whatever you want. As soon as you play one of the child, it gets removes from the main one.

We need to find a way around this.

[GilbertMizrahi]

I don't know whether or not is related to the issue Jeremy mentioned, but if I add a second instance of a component that has a timeline, as soon it plays a part of the first instance, both instances disappear.

import React, { Component } from 'react';
import './App.css';
import { TimelineMax, Bounce} from 'gsap';
import GsapTools from 'gsap-tools';
import { add } from 'gsap-tools';

import MyText from './MyText.js';
import Cards from './cards.js';
import Circles from './Circles.js';
import Title from './Title.js';

const subtitle = "More efficient process";
const copy = ["Less prone to errors" ,"Less expensive", "Faster time to deliver goods"];

class App extends Component {
  componentDidMount() {
    setTimeout(this.animate, 1000);
  }

  componentWillUnmount() {
    this.disposer1();
  }

  animate = () => {
    const mainTimeline = new TimelineMax({ id: 'Everything' });
    const circlesTimeline = new TimelineMax({ id: 'Circles' });
    const myTextTimeline = new TimelineMax({ id: 'Text' });
    const myTextTimeline2 = new TimelineMax({ id: 'Text2' });
    const cardsTimeline = new TimelineMax({ id: 'Cards' });
    const titleTimeLine = new TimelineMax({ id: 'Title' });

    mainTimeline.addLabel('start');

    // get external timelines
    circlesTimeline.add(this.circles.timelineEnter).add(this.circles.timelineLeave);
    myTextTimeline.add(this.myText.timelineEnter);
    myTextTimeline2.add(this.myText2.timelineEnter);
    titleTimeLine.add(this.title.timelineEnter)

    mainTimeline
      .add(circlesTimeline, 'start')
      .add(titleTimeLine, 2)
      .add(myTextTimeline, titleTimeLine.duration()+3)
      .add(myTextTimeline2, myTextTimeline.duration()+5);

    this.disposer1 = add(mainTimeline);

  }

  render() {
    return (
      <div className="App">
        <Circles ref={(el) => { this.circles = el; }} style={{ top: `0px` }}/>
        <MyText ref={(el) => { this.myText = el; }}
          subtitle={subtitle} text={copy} xPercent="-35" yPercent="-22"/>
        <MyText ref={(el) => { this.myText2 = el; }}
          subtitle="More traceability" text="Every communication is safely stored"
          xPercent="-35" yPercent="0"/>
        <Title text="The benefits are:" ref={(el) => { this.title = el; }}/>
        <GsapTools  />
      </div>
    );
  }
}

export default App;

Witout the second instance of it works fine.

[jeremybarbet]

Are you also using the GsapTools inside each timeline on the others files?

Do you have a working example on codepen, for exemple, to be able to track down the issue?

[GilbertMizrahi]

I am using GsapTools only in this file. How I load the GsapTools library on codepen to create an example there?

What I have seen is that if a create a component say "mytext", and I call more than one instance of it in the component where I add the timelines, the instead of "mytext" get strange behaviors.