sparker888

Thanks, I'll go back and fix that and check on useEffects.

Hi all, I have a page that's made up on nine components. The top two components have gsap timelines (one with ScrollTrigger) that work fine. But there are six 'skills' sections below this with animated titles and intro paragraph with ScrollTrigger that only work after a page refresh. I wish I could put into a CodePen, but it's not possible to incorporate nine react/Gatsby components into the tool. There is nothing unusual with my gsap code though. Independently, they appear to work fine. You can see the page here: https://www.sparker888.com/skills/ any suggestions or guesses are appreciated. Thanks! Edit: This is one of the skills components if you wish to see the code: https://github.com/sparker888/sparker888/blob/main/src/components/JavaScriptSkills.jsx

Haha! I've gone down so many dead-end rabbit holes in my coding career, I'm very careful about implementing outdated code and techniques. So much so, that if an article doesn't have a date on it, and it's not clearly new standards, I stop right there and then. This migration guide helps!

I looked to see if I had bookmarked anything, but I did not. I just made notes along the way. I'll keep an eye out though. It's nice to know that there's not any major break though. A lot of this is me just getting use to the syntax and design patterns. I'm getting there!

Thanks for bringing this up , Creek. I'm somewhat new to GSAP as well. I have completed several courses and just completed my first site with GSAP. It's fantastic, but I have a lot more to learn! This topic is one area I struggled with, but most of my issues were resolved with xPercent and yPercent as Jack mentioned. Another trick was to add overflow-x: hidden in CSS to prevent the horizontal scroll bars from showing up when you move elements off screen. I'm looking for more GSAP Responsive best practices. I've searched, but only found bits of info here and there, and there's a lot of outdated info related to older versions of GSAP which makes things somewhat difficult. A section on this would be nice.

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. ?

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!

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!