targeting elements of a child component

[codytooker]

Is it possible to target elements of a child component. or possibly add a child components timeline to the main components timeline and run it in the correct space.

I have a title with a border around it that I want to draw in the bordered lines. This "border" is actually absolute posiitoned spans so I can animate the length and get a drawing border effect. This component will be used in multiple places so I was trying to break it out into its own element for easy reuse.

Example I have is the following

import React from 'react';

class BorderedTitle extends React.Component {

  render() {
    return (
      <div className="bordered-title" style={this.props.style} ref={el => this.wrapper = el}>
        <h1 className="bordered-title__text" name="text">{this.props.children}</h1>
        <span className="bordered-title__bar bordered-title__bar--t" name="bar-t"/>
        <span className="bordered-title__bar bordered-title__bar--r" name="bar-r"/>
        <span className="bordered-title__bar bordered-title__bar--b" name="bar-b"/>
        <span className="bordered-title__bar bordered-title__bar--l" name="bar-l"/>
      </div>
    );
  }
}

export default BorderedTitle;

Now in my main component I would like to access the h1 and all of the spans and animate them. but it doesn't seem to work.

import React, { Component } from 'react';
import GSAP from 'react-gsap-enhancer';
import { TimelineMax, Power2 } from 'gsap';

import FullSection from '../../containers/full-section';
import BorderedTitle from '../../titles/bordered-title';
import SubTitle from '../../titles/sub-title';
import ScrollDown from '../../labels/scroll-down';

class SlideOne extends Component {

  componentWillEnter(callback) {
    this.addAnimation(this.enterAnimation, {callback: () => this.allowScroll(callback)});
  }

  enterAnimation({target, options}) {
    console.log('transform one will enter');
    const title = target.find({name: 'title'});
    const titleText = target.findInChildren({name: 'text'});
    const subTitle = target.find({name: 'subtitle'});
    const tl = new TimelineMax({onComplete: options.callback});

    console.log(title);
    console.log(titleText);

    return tl.to(title, 1, {
      autoAlpha: 1,
      ease: Power2.easeIn
    })
    .to(subTitle, 1, {
      autoAlpha: 1,
      ease: Power2.easeIn
    })
    .to(titleText, 1, {
      color: "red",
      ease: Power2.easeIn
    });
  }

  render() {
    return (
      <FullSection>
        <BorderedTitle name="title">transform</BorderedTitle>
      </FullSection>
    );
  }
}

export default GSAP()(SlideOne);

Basically the console log for title shows that it has 5 children but I cannot use title.find({name: "text"}); in order to see animate it.

If this isn't possible my other idea is to setup the animations in the child component and use timeline.add() in order to add those animations but I am really at a loss on how to do that also.