hexciaLondon

Hi guys, I'm slowly getting to grips with GSAP and the million ways it can be useful. I'm about 3% of the way there haha. I'm playing around using it on a potential new landing page, and I had the idea that I wanted to fade in SVG animations as I scroll down (or up) a page. SVGs as background images won't work as once you display them by fading in a DIV you can't restart the animation as you hide the DIV then re-display it. To get around this I've used inline SVGs. Hiding then showing these as you scroll around allow the SVGS to revert to the initial animation state. So far, hiding and showing the DIVs using scrollTrigger seemed to work well. I thought I'd nailed it, was working fine on Chrome and Safari on my laptop. https://www.justot.co.uk/gsap-stutter.php However, when I started testing it on my phone (Safari iPhone 15 Pro) the animations would flicker in and out. Fiddling with it, it seems it's usually as the scrolling speed slows and I interact with the screen, aka start to scroll again. I'm wondering if this is something do do with the touchscreen, and maybe it's calling scrollTrigger too often as it has a little freak out? I've recorded it happening on my phone: https://www.justot.co.uk/src/Stutter.mp4 Could it be because I'm looping through an array of Divs and adding the scrollTrigger to each div with the same class name, it's getting confused? Or if this is a touchscreen scrolling issue, do I need to add some kind of microsecond delay to firing the scrollTrigger so it stops it from happening unless there's a significant scroll to fire it? Sorry, I think I'm describing that badly, but some kind of buffer so if scrollTrigger activates it can't be unactivated for a short time period to stop the flickering? Or, have I done something really basic and stupid in calling the scrollTrigger with the start and ends which is making scrollTrigger freak out?! Any help would be greatly appreciated. Really keep to understand more about how GSAP works. Thanks for any advice.

Amazing, genius! Much appreciated.

Hi crew. I'm trying to get my head around the way GSAP works, so playing with a few CodePens to understand it all. I've been playing with this CodePen: https://codepen.io/supah/pen/BamxgBb As you can see it's a linear downwads scrolling site, then it switches to a left to right gallery section, then back to down the page. Currently while you scroll across on the photos, the last photo goes past and then you have to scroll until they all completely disappear from view before it then starts scrolling down again. I was trying to work out if it's possible to return to the downward scroll at a time when the final photo is completely into view, so as not to have the long section of blank white scrolling? I assumed it'd be something along the lines of changing the scrollTrigger 'end:' to maybe the variable of the width of the gallery? Or do I need to chain a separate listener to see when that final image is fully onto the viewport? Any help or gentle nudges, or a flat 'that's not possible' would be really helpful. Thanks!