Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by kvncnls

  1. Thank you!! That was it! It was the flipAppend() line. It should've just been "flipAppend".
  2. 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"}); };
  3. 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.
  4. Is this still the best practice? Would you happen to have a new way of doing things or additions since this post? 🙏
  5. 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.
  6. 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?
  7. 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", } );
  8. Nevermind, I solved it. I had to add an empty array '[]' to the useEffect hook.
  9. // 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?
  10. 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?
  11. 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!
  12. 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?
  13. How is this done with the new ScrollTrigger plugin? Would you happen to have a tutorial on it?
  14. kvncnls


    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.