jnemec

I've done another project using GSAP in Next.js, but I had zero issues with importing. I started a new project and now I'm getting "SyntaxError: Cannot use import statement outside a module". I've tried importing using gsap/dist/ScrollTrigger and it removes the error but then ScrollTrigger doesn't work at all. I'm certain I set up my other project the same way, so I'm really confused. My content is in the "components" folder. https://codesandbox.io/p/sandbox/staging-resonance-szbojy?file=%2Fcomponents%2FBody.tsx&selection=[{"endColumn"%3A23%2C"endLineNumber"%3A18%2C"startColumn"%3A23%2C"startLineNumber"%3A18}]

In my original copy, I had the timeline as a ref. Is there any benefit of making it a ref? I've just seen some people doing that

That makes sense! Yes, that is exactly what I was wanting. THANK YOU!

I have three boxes with text in them and I want the animation to be played on the box I click on. I have it almost how I want it except after I select a box and then click it again to reverse it; the next time I click on another box, the first box I clicked on animates and then the other box animates after. Anyone have any idea what is causing this? (Select the "components" folder, then click on the "Hero.tsx" file to see the code) https://codesandbox.io/p/sandbox/gsap-columns-rgi7s2?file=%2Fcomponents%2FHero.tsx&selection=[{"endColumn"%3A17%2C"endLineNumber"%3A52%2C"startColumn"%3A17%2C"startLineNumber"%3A52}]

I'm still working on this, but you have been a lot of help.I was wondering why you created a ctx ref? I haven't seen that done before and just want to be able to understand what's going on. Thanks!

I've been getting the hang of using GSAP with Next.js, but I had a question about getting a class name by scoping. Is there a way I can select the "styles.content" class without having to add in a regular css class ("content") to be able to select it? import React, { useRef, useLayoutEffect } from 'react' import { SanityImageDiv } from '../../../../layout/shared' import { heroAnimate } from '../animate/animate' import { gsap } from 'gsap' import styles from './hero.module.scss' const Hero = ({ body, buttons, heading, media = [], sectionID = { current: '' }, }) => { const sectionRef = useRef(null) // GSAP useLayoutEffect(() => { const ctx = gsap.context(() => { const sectionContent = document.querySelector('.content') heroAnimate(sectionContent.children) }) return () => ctx.revert() }, []) return ( <section id={sectionID.current} className={styles.section} ref={sectionRef}> {media.map((item) => item?._type === 'image' ? ( <SanityImageDiv key={item._key} className={styles.image} image={item.asset} alt={item.alt} > <div className={`content ${styles.content}`}> <h2 className={styles.heading}>{heading}</h2> <p className={styles.body}>{body}</p> <div className={styles.buttons}> {buttons?.map((button) => ( <a key={button._key} href={`#${button?.sectionID}`} className={styles.button} > {button?.label} </a> ))} </div> </div> </SanityImageDiv> ) : ( <div key={item._key}>Unsupported file type</div> ) )} </section> ) } export default Hero

That is my fault for not being clearer. I have added a media query to my sandbox. At <768px the columns will stack on top of each other to create three rows. I'm wanting the parent elements to expand with the text that slides up. In my current sandbox, the third row overflows and covers the other two rows. How can I make it so that the rows parent expands to match the amount of text? https://codesandbox.io/p/sandbox/gsap-columns-forked-c87wb4?file=%2Fcomponents%2FHero.module.scss&selection=[{"endColumn"%3A19%2C"endLineNumber"%3A40%2C"startColumn"%3A19%2C"startLineNumber"%3A40}]

I appreciate the help, but it's still overflowing for me. https://codesandbox.io/p/sandbox/gsap-columns-forked-c87wb4?file=%2Fcomponents%2FHero.module.scss&selection=[{"endColumn"%3A19%2C"endLineNumber"%3A40%2C"startColumn"%3A19%2C"startLineNumber"%3A40}]

Yes, that works great! Thank you! One more questions. Would I need to add an animation to the entire column so that it grows to fit the text? I added more text to the last column and it is overflowing into the second column instead of growing to fit. Any ideas? https://codesandbox.io/p/sandbox/gsap-columns-forked-c87wb4?file=%2Fcomponents%2FHero.tsx&selection=[{"endColumn"%3A7%2C"endLineNumber"%3A16%2C"startColumn"%3A7%2C"startLineNumber"%3A16}]

I was helped the other day, but I have run into another problem. In my link below, when you hover over a column, I have the p tag text sliding up, but if the text is too long, then it gets cut off. How would I make it so that I can use the height of the each columns text as the distance to slide up, so that it all fits in the column? Click in the "components" folder and select the "Hero.tsx" file to view what I have done so far. https://codesandbox.io/p/sandbox/gsap-columns-rgi7s2?file=%2Fcomponents%2FHero.tsx

This worked great! Thank you so much. Personally they only thing I struggled with was trying to implement GSAP while mapping over an array of objects. I couldn't really find much information about that. I also think it would be awesome if there were more videos of using GSAP with React etc.

THANK YOU! So the file is in the "components" folder and then the "Hero.tsx" file. What you sent is exactly what I am wanting. I'll take a look at it and hopefully I can get it working. Struggling a little with integrating GSAP in next.js a little bit

So I'm trying to be able to hover over a column and have its "body" text slide upward. I have it set up how I want it except the body text only slides up on the last column regardless of where I place my cursor. I've been working at this all day and can't seem to get it working. Any help would be appreciated https://codesandbox.io/p/sandbox/gsap-columns-rgi7s2

Hello, I'm trying to place an animation (slide from right) on each column in a component (3 columns that animate individually) using Next.js. I'm mapping over dynamic data from a CMS, and I have gotten it to where it works how I would like using gsap.timeline(), except this component is more towards the middle of my site, so it's running when the page first loads. I can't get ScrollTrigger to work with my array of refs. Once I add scrolltrigger, it makes the animation happen on the columns at the same time. How can I make it so that these animations won't happen until scrolled to? I apologize for the limited amount of code. This is for a site at my job and I have been tasked with learning GSAP. const tl = gsap.timeline() const columnRefs = useRef([]) columnRefs.current = [] useLayoutEffect(() => { const ctx = gsap.context(() => { columnRefs.current.forEach((e) => { tl.fromTo( e, { opacity: 0, x: 200 }, { duration: 2, opacity: 1, x: 0, ease: 'none', stagger: 0.2, } ) }) }) return () => ctx.revert() }, []) const addToRefs = (e) => { if (e && !columnRefs.current.includes(e)) { columnRefs.current.push(e) } } return ( <section id={sectionID.current} className={styles.section}> <div className={styles.columns}> {columns?.map((column) => ( <div key={column._key} className={styles.center} onMouseOver={() => handleHover(column._key)} onFocus={() => handleHover(column._key)} onMouseOut={() => handleHover([])} onBlur={() => handleHover([])} ref={addToRefs} > <SanityImageDiv className={styles.column} image={column?.image?.asset} > <div className={styles.content}> <h2 className={styles.label}>{column?.label}</h2> <p className={ styles.body + `${current === column._key ? ` ${styles.show}` : ''}` } > {column?.body} </p> </div> </SanityImageDiv> <div className={ styles.gradient + `${current === column._key ? ` ${styles.show}` : ''}` } ></div> </div> ))} </div> </section>