azazdeaz / azazdeaz/react-gsap-enhancer

targeting elements of a child component

Open
#39 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
730
Forks
37
PR merge metrics
No merged PRs in 30d

Description

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 (

this.wrapper = el}>

{this.props.children}







);
}
}

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 (

transform

);
}
}

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.

Contributor guide

Open the contributing guide

Research direction

Start by reading the react-gsap-enhancer target.find and target.findInChildren entry points, then trace how the BorderedTitle child component is represented in the target's five children. Confirm whether nested elements can be resolved and animated from SlideOne; done means the title text and border spans can be selected from the parent timeline, with behavior covered by the project's existing tests if available.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.