kvncnls

Ok I found a work-around. I tried using another dependency that fulfills the same role as GSAP's SplitText and that seemed to work. Now all GSAP animations on my texts work locally and on the preview links on Vercel. Something must be going on with SplitText. While it DOES split the text, it doesn't allow animations to occur on the Vercel preview links. I have no idea why.

The only console logs being thrown are 'GSAP Target not found' or 'GSAP Target null not found'. I'm using Nextjs if that helps. SplitText and ScrollTrigger are both registered, yes. All animations work locally even with these console logs. But when I push them to Vercel, the animations associated with SplitText don't work. It's odd because the text is actually being split by SplitText. It's just scrolltriggers no longer work with it... But scrolltrigger works fine for everything else.

This is a really odd situation and I can't seem to figure out why— nor do I know how to even ask it properly, but here goes: I'm a Club Greensock Member (yay!) and am using SplitText in this Nextjs project. I use SplitText to animate the text into view via scrolltrigger. Works PERFECTLY on localhost. But when I push this into github and get the preview link on Vercel (so my client can review it), the text animations don't work. But here's the kicker: SplitText is doing its job. I inspected the DOM on the preview link, and the text IS being split properly. It's just that they're not animating. ALL other GSAP animations are working though! The only animations that aren't working are on the elements using SplitText on the Vercel preview link. Looking at all of the animations as a whole, the SplitText animations are being initiated using gsap effects. That's the only difference I can see— but that doesn't explain why it works locally but not on my Vercel preview link. I have other animations being used via gsap effects and they're working fine. I have no idea why this one doesn't. Any ideas? Here's my 'revealText' gsap effect. Again, it works locally, but not on the Vercel preview link. gsap.registerEffect({ name: "revealText", effect: (targets, config) => { return gsap.from(targets, { yPercent: 150, skewY: config.skewY, duration: config.duration, ease: config.ease, scrollTrigger: { trigger: targets, start: "top 80%", }, }); }, defaults: { duration: 1.2, ease: "Sine.easeOut", skewY: 0}, extendTimeline: true, });

Thank you!! That was it! It was the flipAppend() line. It should've just been "flipAppend".

Hi Cassie, thanks for the reply! Here's what I've currently got in Nextjs but I'm getting the error below. I don't believe I'm calling the elements incorrectly here. // Markup in my hero section component <section className="section hero"> <h1 id="logo-title" data-flip-id="flipTitle"> Title Example </h1> </section> // Markup in my header component <header className="header"> <a data-flip-id="flipTitle"></a> <button>Menu Btn</button> </header> let tl = gsap.timeline({ scrollTrigger: { trigger: ".section.hero", start: "10% 75%", end: "center center", scrub: 1, onScrubComplete: flipAppend(), once: true, markers: true, }, }); let flipAppend = () => { let state = Flip.getState(title); headerTag.appendChild(title); Flip.from(state, {duration: 3, ease: "power4.inOut"}); };

Let's say I have a hero section on a website. I have the h1 title of the website right in the middle of the hero section. On scroll using ScrollTrigger, the title gets appended to the top left of the header using GSAP's FLIP. This would be on Nextjs where the header is a separate component from the hero section component.

Is this still the best practice? Would you happen to have a new way of doing things or additions since this post? ?

Could someone help me install my Club GreenSock membership into a Nextjs project? I've already watched the YT video about the private registry installation but now I'm wondering if it's outdated since it's from 2020. I'm using yarn. I have 0 experience with vim.

Hey @GSAP Helper! Thanks for the quick reply! I can't set up the codepen right now, so I'll try it out tomorrow. Question though: Could it be the scale? I'm doing a fromTo() of scale: 3 to scale:1. I have a feeling that this could be it... If so, how can I make it responsive?

Hi! So I have a simple pin animation, but it's not responsive. Codebase is in Nextjs, so you'll see an `itemRef.current` here to target a UI element. let imageTL = gsap.timeline({ scrollTrigger: { trigger: itemRef.current.querySelector( ".col.image-container" ), start: "center center", end: "85% 25%", id: "imageTL", scrub: 1, pin: true, pinSpacing: false, onLeave: (self) => self.kill(false, true), }, }); imageTL.fromTo( itemRef.current.querySelector( ".col.image-container .image" ), { opacity: 0, scale: 3 }, { opacity: 1, scale: 1, duration: 5, ease: "power4.inOut", } );

Nevermind, I solved it. I had to add an empty array '[]' to the useEffect hook.

// Parent Component export default function ParentComponent() { const [title, setTitle] = useState('values'); const changeContent = (title) => { setTitle(title); } const bgRef = useRef(null); const mainRef = useRef(null); const bgTransitionRef = useRef(null); useEffect(()=>{ const tl = gsap.timeline(); tl.fromTo(bgTransitionRef.current, {y: 0, skewY: 0}, {y: "-120vh", skewY: 4, duration: 1.2, ease: "power4.inOut"}) .fromTo(bgRef.current, {filter: "brightness(3) grayscale(150%)"}, {filter: "brightness(1) grayscale(0%)", duration: 1.2}) .fromTo(mainRef.current, {y: 150, autoAlpha: 0}, {y: 0, autoAlpha: 1, duration: 1.2, ease: "power3.inOut"}, "<0.5") }) return ( <div className="parent-component"> <img className='bg-background' src="/assets/clouds.png" ref={bgRef} /> <div className="bg-transition" ref={bgTransitionRef} ></div> <ChildComponent changeContent={() => changeContent('values')} /> <div/> ) } // Child Component export default function ChildComponent(props) { return ( <div className="child-component" onClick={props.changeContent}> <h4>{props.title}</h4> </div> ) } Alrighty, so what's happening is that whenever I click the ChildComponent, it should run a function called 'changeContent'. It does change the content when I click it. But what it also does is that it restarts all of the GSAP animations. Why is it doing this? And how can I prevent it from happening?

So I have the home page set up with a fixed position navbar at the top. You land on the site and an intro animation occurs just fine. You scroll down and the animations occur just fine. But once you're at the bottom of the home page and decide to navigate to another page via the navbar links from the fixed navbar, (I'm using the Nextjs <Link> component here), it switches to the new page but starts at the BOTTOM of the new page then SCROLLS up to the top of the new page, triggering all of the animations for the new page. It's as if switching pages brings you to the same y-position as the previous page, but then it autoscrolls really quickly to the top as if it's an anchor tag with an #id being clicked. Is this a Nextjs issue? Or a GSAP issue?

Wow, thanks so much for this!! I honestly don't know much about best practices for Svelte or GSAP, let alone combining them, so this was really great to see what clean code looks like. Thanks again!

Hey APG! I think I've seen you on Frontend Mentor! Awesome to see you working with Svelte AND GSAP (since I use the same haha). I'm curious how you're using GSAP with Svelte. Are you putting ALL of your ScrollTrigger animations in the App.svelte file?

How is this done with the new ScrollTrigger plugin? Would you happen to have a tutorial on it?

So from my understanding, it's free to use for (as an example) a personal portfolio. But if you're using it on an e-commerce website where you're directly making money from multiple customers, you'd need the special license.