Meetallo

Hi @GreenSock, the demo is working for me, but it's like flickering a lot on mobile (on the site linked in the first post, wordpress). i forget to mention that there's two gsap animation on the same page, different sections, could be the reason why it flickers a bit on mobile? Thank you @OSUblake, I'll give it a try for sure.

Here is the pen Pen But it seems more fluid on mobile. You can see differences from the first link I sent (wordpress).

Hi, Made a five elements timeline animation, they all start together, and I notice that it's like flickering a bit on mobile (safari/chrome). Is that a browser issue like computing power capacity too low? Or maybe because they all start together? Can't reproduce on codepen easily. I leave here the page link and the piece of code. Link (the toggle animation, see the snapshot) That's the whole animation code const toggleTl = gsap.timeline({ scrollTrigger: { trigger: '.toggle-section', pin: true, toggleActions: 'restart play reverse reverse', startTrigger: '.toggle-button', start: 'center center', endTrigger: '.toggle-button', end: () => '+=' + (document.querySelector('.toggle-button').clientWidth * 2), }, }); ScrollTrigger.clearScrollMemory(); toggleTl .to(".toggle-section", { background: 'white', duration: 0.5, ease: 'ease' }, 'start') .to(".toggle-section-text-1", { color: '#1a1a1d', duration: 0.5, ease: 'ease' }, 'start') .to(".toggle", { background: '#1a1a1d', duration: 0.5, ease: 'ease' }, 'start') .to(".toggle-button", { background: 'white', duration: 0.5, ease: 'ease' }, 'start') .to(".toggle-button", { right: 5, transformOrigin: "left center", duration: 0.5, ease: 'ease' }, 'start'); Thank you for your support

@OSUblake that's perfect!!! Thank you!!!

Hi @PointC, The animations don't have to be automatic one after the other. It's more like based on the scrolling but when I reach the first trigger the first animation starts and finish, then after another scrolling and reaching the second trigger the second animation starts and so on.

Hi @Cassie, I can arrive here, don't know ho to achieve this animation without scrub enabled (and if you see the first fade it's not right). pen

Hi @OSUblake, Thank you, I tried to adapt your example to my needs but it's a little bit complex. Could you please show me your solution on the example of Cassie? Thank you

Hi @Cassie, Thank you that's pretty close to what I wanted to achieve. Is it possible to add fade in and out to every image? Without using the scrub parameter in the scrolltrigger. Like you scroll and the first animation (first image fading out and second fading in) starts and stop, until you scroll again and the second animation (second image fading out and third fading in) starts and stop without seeking the scroll. Hope I was clear enough. Thank you

Hi @OSUblake, I'm sorry here it is, codepen. This example looks different from my first test. However, when I scroll to the middle section (that should be pinned) and reach the center of the section I need to change the source of the image four times (4 images in total with the first one already visible). So from the center of the section to the bottom it has to change from the first to the last and back if scrolling backwards. Please tell me if that's not clear enough. Thank you so much.

Hi, I have a 100vh section with an image inside and I need to change the source of that image based on scroll four times (4 different images in total with the first one). The animation has to start at the center of the section and end at the bottom with no scrub, one animation after the other. I have issues calculating the start and the end of the triggers, they have to be in the second half of the section and that half section must be divided in 4. That was my solution. But it does not work. Any advice? Thank you