[Organzing my gsap code]

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())
	    });
	});

 

[Smooth Scrolling (Not Anchor-Jumping!)]

On 6/8/2020 at 11:51 PM, TrulyNewbie said:

Hi, I've applied this smooth scroll to my site, but it cuts the footer off. Why might this be?

 

Thank you

 

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

 

See the Pen VwaeZvp by dovisally (@dovisally) on CodePen

[Lazy load images with multiple sources]

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

[Lazy load images with multiple sources]

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

[Animating same class on scroll with stagger]

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 ?

See the Pen RwrXLLr by dovisally (@dovisally) on CodePen

[Animating width]

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);

 

[Animating width]

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 ?

See the Pen LYpmKJb by dovisally (@dovisally) on CodePen

[Smooth Page Scrolling]

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

[Smooth Page Scrolling]

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