papajuan

Thanks @Rodrigo for the super fast response. My actual background animation involves a star-y sky .png with transparency and a few .svg clouds all moving to create a parallax effect as you scrub. Smooth as butter in Chrome but Firefox is just choking on it. I'm pretty sure I'm only using transforms and opacity (autoAlpha) but I'll check to make sure I'm not animating anything more expensive. Before I went investigating specific things or simplifying my background, I wanted to first make sure the problem wasn't from me "doing it wrong." (Sounds like my overall architecture/approach is ok though.) One specific question: Is the empty panel at the end the best way to create space between scroll trigger content and regular content, or is there a less hacky way I could try?

Hey all, I'm new to GSAP and I've watched darn near every video possible (i.e. getting started, common mistakes, creativecodingclub.com) but I'm still running into some janky performance problems with a Scroll Trigger project, mainly with Firefox and to a lessor degree Safari. I'm looking into a few culprits but I wanted to make sure I'm not doing something fundamentally wrong. Here's the basic idea: A series of pinned panels that fade in/out as you scrub Additional custom scrub animation on select panels (in addition to the fade in/out noted above) A background animation that starts w the first panel and ends with the last one Regular ol' non-scroll-trigger content that follows afterward The attached codepen is a super simple demo of how I've approached the much larger actual project. Thanks in advance to any kind soul(s) who could check my work and provide any feedback on whether this is the right approach/structure or not.