azazdeaz / azazdeaz/react-gsap-enhancer
targeting elements of a child component
- 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.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
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