Reference <StaticImage> in Gatsby?

[sparker888]

I'm using GSAP to animate elements in my components using useRef from React.
Everything works fine except when trying to reference a <StaticImage>. See example ref below.
Does anyone have any experience with this that could point me to a solution?

 

<StaticImage
  src="../images/logo.png"
  width={500}
  alt="Logo"
  placeholder="tracedSVG"
  ref={logo} //does not work
/>

EDIT/SOLUTION: Maybe there's a better way, but I just wrapped StaticImage in a <div>, applied a ref, and called it a day. It works fine. If there is a better way, please let me know. Thanks!

[GreenSock]

Welcome to the forums, @sparker888! 

 

It's super difficult to troubleshoot blind - can you please provide a minimal demo so we can see the problem in context? How are you passing the target into the animation? logo.current? 

[sparker888]

Thank you, Jack. I'll need to get up to speed on how to use CodePen with React/Gatsby. For now, I've simply wrapped my <StaticImage> in another div and referenced that element like so:

 

import React, { useEffect, useRef } from "react"
import { StaticImage } from "gatsby-plugin-image"
import { gsap } from 'gsap';

export default function Hero() {

  let logo = useRef(null);

  useEffect(() => {
    let tl = gsap.timeline({ defaults: {opacity: 0, delay: 0.5} });
    tl.from(logo.current, {x:-100});  
  })

  return (
    <main>
      <div ref={logo}>
        <StaticImage
           src="../images/logo.png"
           width={500}
           alt="Hero Image"
         />
      </div>
    </main>
  )
}

I edited my original post to reflect this as it may help another. I'm new here, so if I should do something differently, please let me know. Cheers!

[GreenSock]

Glad you got it working.

 

Two quick things:

• I think you forgot to put an empty Array at the end of your useEffect(() => {...}, []); If I understand correctly, leaving that off can cause things to get re-rendered too often. 
• You could just add a ref to your <main> element and then leverage gsap.utils.selector() to just grab things based on CSS classes (or whatever). Seems much easier especially when you're dealing with with a lot of things that you'd otherwise need to create refs for. 

  export default function Hero() {
  
    let main = useRef(null);
    let q = gsap.utils.selector(main);
  
    useEffect(() => {
      let tl = gsap.timeline({ defaults: {opacity: 0, delay: 0.5} });
      tl.from(q(".logo"), {x:-100});  
    }, [])
  
    return (
      <main ref={main}>
          <StaticImage
             className="logo"
             src="../images/logo.png"
             width={500}
             alt="Hero Image"
           />
      </main>
    )
  }

  I have no idea if that'll work in your context, but I wanted to make sure you knew about the gsap.utils.selector() in case it helps clean up some of your code.

• If you're only adding one tween to the timeline, there's no need to create a timeline at all. It doesn't hurt anything, of course - I'm just saying you could use less code: 

  // LONG
  let tl = gsap.timeline({ defaults: {opacity: 0, delay: 0.5} });
  tl.from(q(".logo"), {x:-100}); 
  
  // SHORT
  gsap.from(q(".logo"), {x:-100, opacity: 0, delay: 0.5}); 

   

Happy tweening!

[OSUblake]

4 hours ago, sparker888 said:

Everything works fine except when trying to reference a <StaticImage>.

 

I don't see ref as a valid prop.

https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-image/#gatsby-image-props

 

Don't assume ref will work with code you didn't write. You need to check their documentation first. ref will only be an element for element tags and components that forward an element, like here.

 

See the Pen JjWaJNy by GreenSock (@GreenSock) on CodePen

 

[sparker888]

Yes, the example above is simplified code. I have multiple tweens on the timeline and <main> is actually multiple levels up. Thank you both for the additional info. I'm just now learning utils, so perfect timing. The forwarding refs helps as well. 😀