Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

kvncnls

Members
  • Posts

    7
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Nevermind, I solved it. I had to add an empty array '[]' to the useEffect hook.
  2. // 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?
  3. 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?
  4. 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!
  5. 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?
  6. How is this done with the new ScrollTrigger plugin? Would you happen to have a tutorial on it?
  7. kvncnls

    ScrollTrigger

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