Patrick Artof

Yeah actually it was not the smartest question ever, i figured it out! I've just set a fixed height to the menu of 70vh and animated it's height when the menu opens in the same time my app container is moving down. It does the trick of the illusion i was looking for!

Hi, my question might sound weird but here we go. I was trying to re-create the menu seen on Melriver (I'm using React by the way). So i've created my menu, put it in place (fixed position, put it behind my container so it's hidden), i've created a state ("isOpened or not") and when i click on my burger icon this state changes, triggering my animation (openMenu() or closeMenu() depending on the state) . When i click on the button to open my menu, i go from display: none to display: block and move my entire app component down like this . tl .to("nav", 0, { css: { display: "block" } }) .to("body", 0, { css: { overflow: "hidden" } }) .to(".App", 1, { y: width <= 654 ? "70vh" : window.innerHeight / 2, ease: "expo.inOut" }) // Then other animations It works wonderfully. But here goes the problem : if my page is more than 100VH, then the animation work but i can't see the menu, since the body is pushed only 70VH. I was wondering if there is a workaround for moving the visible part of the website like seen on Melriver? Or a clue on how they achieved this?

So i've found this thread on stackoverflow : https://stackoverflow.com/questions/59449554/correct-way-to-pass-useref-hook-to-ref-property The answer worked for me. I've refactored my links like this <Link ref={line1} to="/" Then i've used `.current` on my variables when calling them in my staggerText function like so : staggerText(line1.current, line2.current, line3.current); I'm not sure to understand how this works, but it fixed my error!

I'm having some trouble moving into React (i'm actually building on my website to Gatsby). I have a menu animation that's pretty much working fine, except for one part. I'm animating the menu on open and close. I've moved the animations into dedicated functions so it's clearer (and reusable) for me. I've got 3 functions right now. The first two (`staggerReveal()` and `fadeInUp()`) works great. But the third one (staggerText) makes it crash and throw the following error : "TypeError: Cannot add property __gsap, object is not extensible". I've built this `staggerText()` function the same way i did for the other 2 functions, and they work fine. I can't find what i'm doing wrong with this function right here.. I'm assuming the error doesn't come from gsap but from the `<Link>` ? Maybe it doesn't work like this when you want to animate <Links> in React? Here is my component code : import React, { useEffect, useRef } from 'react'; import { Link } from 'gatsby'; import gsap from 'gsap'; const MainMenu = ({ state }) => { let menu = useRef(null); let revealMenuBackground = useRef(null); let revealMenu = useRef(null); let line1 = useRef(null); let line2 = useRef(null); let line3 = useRef(null); let info = useRef(null); useEffect(() => { if (state.clicked === false) { // close menu gsap.to([revealMenu, revealMenuBackground], { duration: 0.8, height: 0, ease: 'power3.inOut', stagger: 0.07, }); gsap.to(menu, { duration: 1, css: { display: 'none' }, }); } else if (state.clicked === true || (state.clicked === true && state.initial === null)) { // open menu gsap.to(menu, { duration: 0, css: { display: 'block' }, }); gsap.to([revealMenuBackground, revealMenu], { duration: 0, opacity: 1, height: '100vh', }); staggerReveal(revealMenuBackground, revealMenu); fadeInUp(info); staggerText(line1, line2, line3); } }, [state]); const staggerReveal = (node1, node2) => { gsap.from([node1, node2], { duration: 0.8, height: 0, ease: 'power3.inOut', stagger: 0.1, }); }; const fadeInUp = (node1) => { gsap.from(node1, { y: 60, duration: 1, delay: 0.2, opacity: 0, ease: 'power3.inOut', }); }; const staggerText = (node1, node2, node3) => { gsap.from([node1, node2, node3], { duration: 0.8, y: 100, delay: 0.1, ease: 'power3.inOut', stagger: 0.1, }); }; return ( <div ref={(el) => (menu = el)} id="main-menu"> <div ref={(el) => (revealMenuBackground = el)} className="menu-secondary-background-color" ></div> <div ref={(el) => (revealMenu = el)} className="menu-layer"> <div className="menu-projects-background"></div> <div className="container"> <div className="menu-links d-flex jc-space-between ai-start"> <nav> <ul> <li> <Link ref={(el) => (line1 = el)} to="/"> Homepage </Link> </li> <li> <Link ref={(el) => (line2 = el)} to="/about"> About </Link> </li> <li> <Link ref={(el) => (line3 = el)} to="/contact"> Contact </Link> </li> </ul> </nav> <div ref={(el) => (info = el)} className="info"> <h3>Infos Box</h3> </div> </div> </div> </div> </div> ); }; export default MainMenu;

Hi, I'm quite new to GSAP, so sorry if my question seems basic! Right now, i'm trying to understand the process of expanding an iframe on click, like on this page : https://www.explose.lu/en The "video expand" effect can also be seen on other websites like https://spatzek.studio/. They use a scale animation on click, but it's always centered and the video scales down and stops playing on scroll. Can anybody help me on understanding the process of their animation? Right now on my website i'm using the following script : https://jsfiddle.net/y1wv6dca/ But i'd like to make it smoother using gsap and expanding the video without using fullscreen, that is a little bit obstrusive for me. Thanks a lot!