Hi!
I read all the articles. Yes, I know it should work Gatsby being React, but the thing is that I need it to work with the GraphQL data (if possible) and I don't know how to do that. I am also familiar with npm.
I did not put the Gsap code in there because it didn't work, so I thought it was useless. I basically tried everything I could think of. In the code below, I changed the component to a class and put the ref in the Gsap method.
I get the following error:
TypeError: Cannot read property 'data' of undefined.
I tried to make the pen (as I mentioned previously), but the posts come from GraphQL, locally. Sorry for the trouble and thank you for trying to help me!
P.S. Please, note that I got Gsap to work in another static component. My problem is when the data is coming from GraphQL.
class Gallery extends Component {
constructor(props){
super(props);
this.myTween = new TimelineLite({paused: false});
}
componentDidMount(){
this.myTween.staggerTo(this.myElement, 1.5, {y: 0, autoAlpha: 1}, 0.1);
}
render(){
return (
<Wrapper>
<Title>
Works
</Title>
<Inner>
{this.data.allMarkdownRemark.edges.map(({ node }) => (
<div key={node.id} ref={div => this.myElement = div}>
<StyledLink to={node.fields.slug}>
<StyledImg fluid={node.frontmatter.image.childImageSharp.fluid} />
<PostTitle>
{node.frontmatter.title}{" "}
</PostTitle>
</StyledLink>
<Date>
{node.frontmatter.date}
</Date>
<p>{node.excerpt}</p>
</div>
))}
</Inner>
</Wrapper>
)
}
}
export default props => (
<StaticQuery
query={graphql`
query {
allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
totalCount
edges {
node {
id
frontmatter {
title
date(formatString: "DD MMMM, YYYY")
image {
childImageSharp {
fluid(maxWidth: 800) {
...GatsbyImageSharpFluid_noBase64
}
}
}
}
fields {
slug
}
excerpt
}
}
}
}
`}
render={data => <Gallery data={data} {...props} />}
/>
)