CoreMarketing

Hello @Rodrigo That's great thank you very much for your help. Really appreciated!

Hello @Rodrigo Thank you very much for your answer but there are two problems: 1. Since you re using scale: true, images are distorted again, although it's not really visible in your pen as it's a sky image. 2. Resizing the screen works before starting the flip. When you scroll and the animation has started, any window resize breaks it again. I've updated my pen with your code and a new image that shows the distortion. https://codepen.io/Manolis-Giouvanakis/pen/jORvPEV BTW: This is my other account - sorry for any confusion

Thanks both! I swear I'd tried with opacity multiple ways and hadn't found a result that solved all problems, but of course after trying again it's working perfectly now ? Final solution below if anyones looking at this. Remove any initial CSS styling, in this case get rid of: .animated > * { visibility: hidden; } Then in the JavaScript: gsap.utils.toArray(".animated").forEach((elem, index) => { gsap.set(elem.children, { opacity: 0, }); ScrollTrigger.create({ trigger: elem, once: true, start: 'top 90%', onEnter: () => { gsap.fromTo(elem.children, { y: 75, opacity: 0 }, { y: 0, stagger: 0.15, opacity: 1, clearProps: "transform,opacity" }); }, onEnterBack: () => { gsap.to(elem.children, { duration: 0.3, opacity: 1, stagger: 0.05 }); } }); }); Note: Switching from a batch to a create seemed to help fix some of the final issues

As the title says really — when I try to use gsap.from with autoAlpha, I'm unable to tab through the links inside each panel. Try with the demo: Open in full page view and then try to tab through the links. You should be able to tab through Panel #1, Link #1 and Link #2, but Panel #2 is not accessible by keyboard. If you first scroll down so that the animation plays, you can then tab through all links as normal. For this demo I've added: .animated > * { visibility: hidden; } to prevent the animation from 'flickering' (the animated element was visible in its base state for a split second before the animation moved it to the from state). If you remove this, a different, but similar, issue presents itself. Now you can tab from panel to panel, but as soon as Link #1 is focused, the animation plays and resets the focus back to the body. Pressing tab again focuses Link #2. This seems to be because visibility: hidden removes any interactivity from the element and autoAlpha sets this behind the scenes. Once the element has animated, that CSS is no longer set so the links can be navigated normally. Is there a way to achieve this effect while keeping full keyboard navigation?