kvncnlsMembers
Posts7
Joined
Last visited
Recent Profile Visitors
The recent visitors block is disabled and is not being shown to other users.
kvncnls's Achievements
- Rare
- Rare
- Rare
- Rare
-
Recent Badges
2
Reputation
1
Community Answers
Animations restart when an unrelated component button is clicked in Nextjs
kvncnls replied to kvncnls's topic in GSAPNevermind, 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?
ScrollTrigger animations trigger when I switch pages. — NextJS
kvncnls posted a topic in GSAPSo 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?
How To Use ScrollTrigger's .scrollerProxy() In Svelte?
kvncnls replied to ApplePieGiraffe's topic in GSAPWow, 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!
How To Use ScrollTrigger's .scrollerProxy() In Svelte?
kvncnls replied to ApplePieGiraffe's topic in GSAPHey 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?
Tween with momentum effect
kvncnls replied to zhurgan's topic in GSAPHow is this done with the new ScrollTrigger plugin? Would you happen to have a tutorial on it?
-
ScrollTrigger
kvncnls commented on GreenSock's product in PluginsSo 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.