Devotee007

@mvaneijgen, thank you! That helped me a lot.

I'm trying to reverse a stagger, it works as it is now, but I want it to start from the "top" on the reverse. Not it's just reversing the animation. If that make sense? //Devotee007

Ah, ok, thanks for the info, I didn't know that about the helper function. The solution you did is what I'm looking for, thank you for the help! //Devotee007

Thanks for the reply! I tried it, but I get the same result after changing it to overflow:hidden. The scroll keeps on going but it doesn't repeat directly from the top, there's a long gap before the text starts over from the top. It should be on going without the gap.

Hi, I don't know what's wrong. No matter how many words I put in the scroll comes to an end. What have I missed? //Devotee007

I don't get why this text gets blurry and jmupy on scale. I have done this before without this problem. It seems I can't use willChange anymore. The animation won't work at all then. The font is thin I know, but I have tried with different fonts, same result. What am I missing?

I would really appreciate if you could show me an example of this.

Can I have more than one timline inside the same context?

Thank you!

Is it possible to animate to a value like the one below, I have searched but can't find any info about it. border-radius: 0 0 70% 70%/0 0 35% 35%;

I got it to work now! Thanks @Cassie and @Rodrigo for the input and help! Working code: const mobileMenu = useRef<HTMLDivElement>(null); const menuTl = useRef<GSAPTimeline>(gsap.timeline()); const toggleMobileMenu = () => { if (menuTl.current !== null) { menuTl.current.reversed(!menuTl.current.reversed()); setTopMenuVisible(!activeMobileTopMenu); setActiveSubLevel(-1); setActiveSubSubLevel(-1); } }; useLayoutEffect(() => { const ctx = gsap.context(self => { menuTl.current = gsap.timeline({ paused: true }); menuTl.current.to( ".js-mobile-overlay", { // yPercent: 170, y: "85vh", ease: "expo.inOut", duration: 1.1 }, 0 ); menuTl.current.to( ".js-mobile-menu", { y: 0, ease: "expo.inOut", duration: 0.9 }, 0.1 ); menuTl.current.to( ".js-pie-top", { strokeDasharray: "0,100", autoRound: false, ease: "expo.in", duration: 0.5 }, 0.1 ); menuTl.current.to( ".js-pie-bottom", { strokeDasharray: "0,100", strokeDashoffset: "-25", autoRound: false, ease: "expo.in", duration: 0.5 }, 0.1 ); menuTl.current.to( ".menu-toggle-titles", { y: -14, ease: "power4.inOut", duration: 0.4 }, 0.5 ); menuTl.current .to( ".js-pie-middle", { rotation: 90, y: 8, x: -4, transformOrigin: "center", ease: "back.out(1.4)", duration: 0.5 }, 0.6 ) .reverse(); }, mobileMenu); return () => ctx.revert(); }, []);

Inside toggleMobileMenu I get error that menuTl.current' is possibly 'undefined' const toggleMobileMenu = () => { menuTl.current.reversed(!menuTl.current.reversed()); }; But inside the useLayOutEffect I don't get any warnings. I tried to add this to the const for menuTl const menuTl = useRef<GSAPAnimation>(); But it didn't do any difference. EDIT: I managed to remove the errors with this code: const btn = useRef<HTMLButtonElement>(null); const menuTl = useRef<GSAPTimeline>(gsap.timeline()); const toggleMobileMenu = () => { console.log("test"); if (menuTl.current !== null) { console.log("test2"); // menuTl.current.reversed(!menuTl.current.reversed()); menuTl.current.reversed(!menuTl.current.reversed()); } }; useLayoutEffect(() => { const ctx = gsap.context(self => { menuTl.current = gsap.timeline({ paused: true }); menuTl.current.to( ".js-mobile-overlay", { // yPercent: 170, y: "85vh", ease: "expo.inOut", duration: 1.1 }, 0 ); menuTl.current .to( ".js-pie-top", { strokeDasharray: "0,100", autoRound: false, ease: "expo.in", duration: 0.5 }, 0.1 ) .reverse(); }, btn); return () => ctx.revert(); }, []); But nothing happen when I click the button. I get this error below in the console. But I got the class mentioned in the code. react_devtools_backend.js:2655 GSAP target .js-mobile-overlay not found. https://greensock.com at TopMenu (http://localhost:6006/components-stories-TopMenu-stories.iframe.bundle.js:370:30) at unboundStoryFn (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-node_modules_storybook_addon-backgrou-313dcc.iframe.bundle.js:16918:12) at ErrorBoundary (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-node_modules_storybook_addon-backgrou-313dcc.iframe.bundle.js:14550:5) at WithCallback (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-node_modules_storybook_addon-backgrou-313dcc.iframe.bundle.js:14430:23)

Thanks for the heads up! Will see if I get it to work with the code example below.

Thanks will try this. But I had problems with current and useRef and to have it in it's own function App(){}. before I got it to work. I have the timeline directly inside of the code below, is that why it doesn't work with a function, does it have to be it's own component? export const TopMenu: React.FC<TopMenuProps> = ({ primaryNavLinks, secondaryNavLinks, languages }) => { export const TopMenu: React.FC<TopMenuProps> = ({ primaryNavLinks, secondaryNavLinks, languages }) => { ... };

I solved it with this code, taken from: https://codesandbox.io/s/gsap-hamburger-toggle-menu-u07i6?file=/src/App.js:1045-1073, const [tlMenu] = useState(gsap.timeline({ paused: true })); useEffect(() => { tlMenu.to( ".js-mobile-overlay", { // yPercent: 170, y: "85vh", ease: "expo.inOut", duration: 1.1 }, 0 ); tlMenu.to( ".js-mobile-menu", { y: 0, ease: "expo.inOut", duration: 0.9 }, 0.1 ); tlMenu.to( ".js-pie-top", { strokeDasharray: "0,100", autoRound: false, ease: "expo.in", duration: 0.5 }, 0.1 ); tlMenu.to( ".js-pie-bottom", { strokeDasharray: "0,100", strokeDashoffset: "-25", autoRound: false, ease: "expo.in", duration: 0.5 }, 0.1 ); tlMenu.to( ".menu-toggle-titles", { y: -14, ease: "power4.inOut", duration: 0.4 }, 0.5 ); tlMenu .to( ".js-pie-middle", { rotation: 90, y: 8, x: -4, transformOrigin: "center", ease: "back.out(1.4)", duration: 0.5 }, 0.6 ) .reverse(); }, []); const toggleMobileMenu = () => { tlMenu.reversed(!tlMenu.reversed()); setTopMenuVisible(!activeMobileTopMenu); setActiveSubLevel(-1); setActiveSubSubLevel(-1); }; Still don't know why it works though. Shouldn't I need context to be able to use different classes and so on?