Fadanabela

Hi... Yes, the animation will only run once, but I want to change the code to what is recommended, so I am right now reading React docs to see what I could do. For now, I am happy that it is working! ? Thank you very much!!

Done. Thank you! ?? import React, { Component } from "react"; import { TweenMax } from "gsap"; import { Link, graphql, StaticQuery } from 'gatsby' import styled from 'styled-components' import Img from 'gatsby-image' const Wrapper = styled.div` margin: auto; ` const Title = styled.h3` display: inline-block; margin-bottom: 1rem; ` const Inner = styled.div` display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 40px; @media (max-width: 1024px) { grid-template-columns: 1fr; grid-column-gap: 40px; } ` const StyledLink = styled(Link)` font-family: brandon-grotesque, serif; font-weight: 700; text-decoration: none; color: inherit; ` const StyledImg = styled(Img)` border-radius: 7px; margin-bottom: 1rem; opacity: 1; -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; :hover { opacity: .7; } ` const PostTitle = styled.h6` margin-bottom: 0.5rem; ` const Date = styled.p` font-size: 0.8rem; display: block; color: #777; ` export class Gallery extends Component { componentDidMount(){ TweenMax.staggerFrom('.box', 1.5, {y: 120, autoAlpha: 1}, 0.3); } render(){ return ( <Wrapper> <Title> Works </Title> <Inner> {this.props.data.allMarkdownRemark.edges.map(({ node }) => ( <div key={node.id} ref={div => this.myElement = div} className='box'> <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} />} /> )

Hi... I had tried using 'this' and 'this.props', but I got the same error. Unfortunately, the conditional rendering didn't work either. I still think it is a problem with the way 'data' is passed from GraphQL. I will keep trying because I really want this to work! If I find a solution, I will post here. Thank you!!

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} />} /> )

Hi!! I am building my new website with Gatsby and I really wanted to make some animations with Gsap. I have been trying for days to make this work and retrieve the data from GraphQL. I searched everywhere, but I couldn't find a similar case. I am new to React and Gsap, so I am totally stuck. This is a gallery component and I am trying to make the .staggerTo() transition on load. I didn't make a pen because of GraphQL things. I hope it is not asking too much, but any help would be really appreciated! Thanks and best wishes!! import React from 'react' import { Link, graphql, StaticQuery } from 'gatsby' import Img from 'gatsby-image' export const Gallery = ({ data }) => ( <Wrapper> <Title> Works </Title> <Inner> {data.allMarkdownRemark.edges.map(({ node }) => ( <div key={node.id}> <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} />} /> )