Dovisally

Hello there, i do apologize for such a basic simple question i want to know how to organize my gsap code i have 1 example and i want to see how you guy organize that so i will follow the same approach with rest of my code, i do not have any issue with the code i just want to see how do you professionally organize it on for production const tl = gsap.timeline({paused: true}); tl.to('#overlay', { opacity: 1 }) tl.to('#menu', { x: 0, y: 0, z: 0, ease: 'Expo.easeInOut', delay: -1.2, duration: 2 }) tl.to('.menu__line', { x: 0, y: 0, z: 0, delay: -1, duration: 1.5, stagger: 0.1, }) tl.to('.menu__item__content', { x: 0, y: 0, z: 0, stagger: 0.1, delay: -1.5, }) tl.to('.menu__footer__item', { opacity: 1, stagger: 0.1, delay: -1 }) tl.reverse() document.querySelectorAll('.nav__burger').forEach(btn => { btn.addEventListener('click', e => { btn.classList.toggle('active'); tl.reversed(!tl.reversed()) }); });

I have also noticed the same problem if content is long enough there is a cut at the end, I've been trying to fix it for couple of hours but not enough experience would be nice if someone can help https://codepen.io/dovisally/pen/VwaeZvp

I tested on firefox, chrome, edge same thing for me, i'm only able to see the first image, i noticed that when i resize the browser I'm able to see everything fine

Yes on my browser (firefox) it does, i will clear my cache and history and try different browser and check again

Hello there, i made a quick demo on code pen, what i want to do is i have blocks over almost the majority of the text on my website these blocks has the same class so i want to animate this class on scroll with a stagger, stagger should work only for the visible elements and so on.. i hope you get the idea is it possible ? also i notice the animation is happening for all blocks not on scroll how to fix that ?

Thank you so much Mikel ❤️ one more question if you don't mind, i can't get it to work with intersection observer just wanted to know what i'm doing wrong ? i'm not getting any errors in the console so i assume it's not a typo const targets = document.querySelectorAll('.block'); const blockReveal = target => { const io = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if(entry.isIntersecting) { const block = entry.target; gsap.to(block, { scaleX: 0, ease: Power4.easeIn, stagger: 0.1,}, 0.1); observer.disconnect(); } }); }); io.observe(target); }; targets.forEach(blockReveal);

Hello, I have a block over a text and i want to reveal the text and make the width of the block zero as far as i know it is bad for performance to animate width, and since i'm gonna use this animation quite a lot i'm worried to animate width so is there is any better solution for my little problem ? also can i change the animation direction from right > left to left > right ?

Thank you so much for your answer, i think i will play with your code if i can't achieve anything i might just disable js for mobile and change the css

Hello there, almost 2 years now have not find an answer for this question so frustrated already, i'm trying to achieve smooth page scrolling like this website for example http://www.thibaudallie.com/ after a long search i found this but as far as i see that the author closed it and does not recommend to use it my question is, it is any how reasonable and stable to use the code from the page above ? since i don't really have any other options, i do not want to use a jQuery plugin i'm tired of searching and not finding anything related to that scrolling smooth experience