Leaderboard

Hi, Right now everything is handled by a single Tween instance: tl.current = gsap .timeline({ defaults: { duration: 2.5, ease: 'elastic.out(1,0.7)', }, }) .to('.box', { y: (i) => 80 + i * 40, opacity: 1, stagger: 0.4, }) .reverse(); For that you'd have to create a different tween and use the position parameter to sync both of them: tl.current = gsap .timeline({ defaults: { duration: 2.5, ease: 'elastic.out(1,0.7)', }, }) .to('.box', { y: (i) => 80 + i * 40, stagger: 0.4, }) .to('.box', { opacity: 1, duration: 10, stagger: 0.4, }, "<") .reverse(); Hopefully this helps. Happy Tweening!

Hi all. Just wanted to share "final" version https://codepen.io/nmoreira/pen/ExMgLmE Thank you all

Hi, This is no case a GSAP related problem. The issues you have start with the fact that you are using regular <a> tags with an href in them, as you can see as soon as you click on one of those the navbar is no longer there. Also I have no idea what are you doing here TBH: const handleNavLinkClick = ( event: React.MouseEvent<HTMLAnchorElement>, targetId: string ) => { event.preventDefault(); window.dispatchEvent( new CustomEvent('navigateToSection', { detail: { targetId } }) ); }; Also that click handler is not added to your <a> tags so nothing really happens. The approach of preventing the default behaviour is the correct though so you should keep that. This is about moving the scroll position to a specific point so it lands at the start of a specific section, like in this demo: https://codepen.io/GreenSock/pen/RwvNamq Then you have the problem about communicating between components, that is not always a simple thing in React and in some cases in most of this type of frameworks, so this becomes mostly a state management problem, where the target link is updated and depending on that, some code runs and your code can use that in order to automatically scroll to a specific point. Unfortunately, as I mentioned before, this is a state management and react-specific problem that is beyond the scope of what we do in these free forums. We don't have the time resources to create a solution for a react-specific problem for you, we need to keep our focus on GSAP related issues. If I was you I'd look into react context for this, since is the simplest state management solution out there to make this work: https://react.dev/learn/passing-data-deeply-with-context Another option could be a custom hook, but that definitely is a more complex setup: https://react.dev/learn/reusing-logic-with-custom-hooks Hopefully this helps. Happy Tweening!

Hi there! Our React docs are a good place to start. There's everything you need to know there in order to port the animation over to react https://gsap.com/resources/React/ If you need specific help, pop back with a demo showing what you've tried.