venizia03

Indeed It's working now. Thx!

Hello @ZachSaucier, Thx for your answer. I tried to apply your advice (not sure to understand the first one, sorry) but the result is not so good. When clicking on a menu link, the menu close but at the end, it does not execute the callback. But if I re-open the menu, that time it will execute the callback I tried to reproduce the issue in a codepen. Here it is: https://codepen.io/venizia03/pen/poyyYvM The only difference with my local dev environment, is the error when it tries to do the scroll. I do not have that one on my dev environment. Thx in advance!

Hello! To open a menu, I use a timeline like below: menuTl .set($mainMenu, { opacity: 1, pointerEvents: "auto" }) .to($mainMenu, 0.5, { width: '100%', opacity: 1, ease: "power1.easeOut" }) .staggerFromTo($mainMenuItems, .3, { x: -50, opacity: 0, ease: "back.out(1)" }, { x: 0, opacity: 1 }, .2) .fromTo($btnCloseMenu, 0.8,{ translateX: 200, }, { opacity: 1, pointerEvents: "auto", translateX: 0, }); If you click on the menu close button, I reverse the timeline as follows: $btnCloseMenu.on('click', (evt) => { evt.preventDefault(); document.body.classList.remove('menu-open'); if(!menuTl.isActive()) { menuTl.timeScale(2).reverse(); } }); Now when you click on a menu item (all sections are on the homepage), I would like to reverse the timeline and then when completed, execute a scrollTo the specified anchor. This is what I have done but it's not working: document.querySelectorAll('.menu-link').forEach((link, index) => { link.addEventListener('click', (evt) => { evt.preventDefault(); const target = link.dataset.target; document.body.classList.remove('menu-open'); if(!menuTl.isActive()) { menuTl.timeScale(2).reverse(); gsap.to(window, {duration: 1, scrollTo:"#" + target}); } }); }); The scrollTo is executed in parallel with the reverse. Thx for your help!

Thx! I will change my code right away! ??

Hello! When one of my animation runs (the sidebar menu is opening), I want to add a class name to the body tag. I use: menuTl = gsap.timeline({paused: true}); menuTl.set('body', { className: '+=menu-open' }); But this does remove any existing classes. Is there something I miss? Thx!

Hello! I am trying to animate a puzzle. I would like to make each piece appearing from the top-left of the svg puzzle without success. For the moment, as shown in the codepen, it's completely random. Any suggestion?

Hi All and thx for your help I have updated my code pen with the old fashion solution provided by @OSUblake and this is doing exactly what I wanted.

Hi, I am trying to reproduce a kind of bubble effect (like on this site: https://rand-d.com/). Is it possible to do it with gsap? Right now, I have my 2 circles in svg and I applied a rotation effect on it. Not really the same result as on the example website lol Thx!

Thx Zach for your help. I have updated the code pen with the solution I found thx to you. What about performance impact? Should I worry about it?

Thx for your quick reply. Glad to be a club greensock member Below a codepen (really a start point from the moment): https://codepen.io/venizia03/pen/dyoPYmb i will check the different post you gave me but honestly, I would appreciate some guidelines for this effect. thx!

Hello! I am starting to use gsap to add animations on website. I am trying to find if this is possible to animate a cube (3D rotation) based on the cursor position. Any idea? Thx!