D1MK4

Hello, I've got a weird bug. When I've added ScrollTrigger for animating each sections I've also noticed that scrolling on mobile device by touching screen is really bugged after loading the page. ( I'm using IP11Pro, I just can't test the page on android device ). Do you have an idea why is something like that happening? This is deployed page: https://olgajedrzejewska.netlify.app/ The page is created with GatsbyJS. I've just put the code in global index.js and I'm returning each single component below the useEffect. This is a simple animation for each first div in section with class .animated: export default function Home({ data }) { useEffect(() => { const sections = document.querySelectorAll(".animated"); sections.forEach((section) => { gsap.fromTo( section.children, { y: "+=150", opacity: 0 }, { y: 0, opacity: 1, stagger: 0.2, duration: 0.8, ease: "easeInOut", scrollTrigger: { trigger: section, start: "-10% 76%", }, } ); }); }); return ( <Layout> <Hero /> <Info /> <About /> <AboutSecond /> <History /> <Family /> <Science /> <School /> <Cards /> <Helping /> <Numbers /> <Hours /> <Pricing /> <Contact /> <Footer /> </Layout> ); }

This is awesome guys, thank you very much, it is working perfectly. Helping just with JS - crazy

I've added HTML and CSS, thank you

Great, I've added HTML and CSS, thanks for the advice

Sorry, I've added a link to codepen

Hello, I've got a problem with animations. I'm trying to animate multiple sections and elements inside with the stagger. I wrote a code like this: https://codepen.io/D1MK4/pen/ZEKPMBB And animation looks very good, every item in the section is animating with a stagger, generally everything is fine until I add the same section (.products-grid) below existing section in html. Two same sections on the same site are causing a bug and the animation is not working. (It is starting but looks like it's stopping at 10% maybe). To be honest I searched a lot of topics and tried to fix this but I'm in a dead end. Can anyone look at this and maybe try to help me even a little bit? Greetings.