Yannick_SG

Hi Rodrigo, thanks for the input! I shortened the "onUpdate" part and am using "isInViewport" now. I tried the "once" part and it indeed wouldn't jump anymore, but resetting the animation, so all layers are visible is important, and also on mobile you have a lot of empty space to scroll up. It seems to me, the issue is, that after I kill the animation, the page height changes again too (which is obvious to me now), visible when you open the page with phone dimensions: loom recording. But on Android it still keeps the same position, iOS seems to save the distance scrolled and want's to correct it, when the page height changes. I have really no clue, on how to solve that, so I will deactivate the animation for iOS for now. If someone else a tip for me, I would really appreciate it!

Hey guys, tomorrow my client is releasing a new product, where I used GSAP to create an animation for the layer of their product. After the animation is done, I kill the animation for 2 reasons: 1. If the user wants more information from the top of the page, they dont have to go trough the whole animation again. 2. (The bigger reason) AFTER I went trough the animation on mobile (iOS and Android) the site jumps up and down a little bit. I don't know why, that 's also why it was easier for me to just deactivate the animation. But just realised, that on iOS, after the animation is killed, it jumps to the bottom of the page and I just can't figure out why. I tried: - To delay the killing with 500ms - To use onLeave and onLeaveBack instead of the scroll - EventListener - Use .disable() instead of .kill() I also have an recording of the issue from the client: https://drive.google.com/file/d/13_HD1wEbrJFS4YrrE-yAbguQ-j-9IevF/view?usp=drive_link I personally don't have an iPhone, so I have to use an Simulator Demo (appetize.io) At first, I thought its an WordPress/Elementor issue (To the page), but I also have the issue on CodePen. It seems to me, .kill() is not the reason of the problem, but the whole "jumping around" after the animation is finished. I hope I was able to give you all enough information, I didn't expect to find this issue at the end of my day.

Thanks for the quick replies! I was able to solve part 1, as indeed it was an issue with Elementor (it seems so to set a standard Animation Duration). To get to part 2, I'll try around with CodePen.

Hello community, I'm a complete beginner, but have implemented a vertical scroll on my Website (Scroll down to the end of the page). Currently, there are still placeholder images, but soon there will be 8 images, each representing one layer of a mat, we are selling soon. That's why I want to scroll through the images. I would be thankful, if someone could help me with 2 things: 1. Probably simple to solve, but I can't: Scrolling down through the images works fine. But when I reverse my animation by scrolling back up, there is a short "entry/exit" animation. I use Elementor, I couldn't really copy it in CodePen, but I made a short video here: Loom Video I just want to neatly switch between the normal website scrolling and image scrolling in the section. 2. On the right side, there are 8 textboxes, each with the class "description-1", "description-2", etc. My goal is to highlight one text at the time, which is linked to the image. So if Image 3 is visible, text 3 should be highlighted. I tried a lot to solve it, but I just can't get the hang of it. This is my current code: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script> <script> document.addEventListener('DOMContentLoaded', (event) => { gsap.registerPlugin(ScrollTrigger); gsap.set(".panel", { zIndex: (i, target, targets) => targets.length - i }); var images = gsap.utils.toArray(".panel:not(:last-of-type)"); console.log(images); const tl = gsap.timeline({ scrollTrigger: { trigger: "#animation-section", markers: true, pin: true, start: () => "top top", end: () => "+=" + (images.length + 1) * window.innerHeight, invalidateOnRefresh: true, scrub: true } }); var _images = gsap.utils.toArray(".panel"); _images.forEach(function (section, index) { console.log(section); ScrollTrigger.create({ trigger: section, start: () => "+=" + index * window.innerHeight, end: () => "+=" + (index + 1) * window.innerHeight, markers: true, animation: gsap.timeline({ scrollTrigger: { trigger: section, start: () => "top top", end: () => "+=" + (index + 1) * window.innerHeight, scrub: true, immediateRender: false } })/* .to(`.description-${index + 1}`, { className: "+=highlighted-text" }) .to(`.description-${index + 2}`, { className: "-=highlighted-text" })*/ }); }); images.forEach((image, i) => { tl.fromTo( image, { yPercent: 0, opacity: 1 }, { xPercent: 0, yPercent: -100, rotateZ: 0, opacity: 0, duration: 0.5 }, "+=0.1" ); }); tl.set({}, {}, "+=0.1"); }); </script> Solving Number 1 would be very important for me, Number 2 would be awesome to include, but hasn't (yet) been asked from my contractor.