Multiple scroll triggers -- is *this* how you do it?

[papajuan]

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.

See the Pen qBYywJR by papa-juan (@papa-juan) on CodePen

[Rodrigo]

Hi @papajuan and welcome to the GreenSock forums!

 

I assume that the biggest issue comes from the salmon colored panel moving in from the left, right?

 

If that's the case this seems to work pretty well in Firefox on Ubuntu 20 and 22:

gsap
  .timeline({
    scrollTrigger: {
      trigger: "#all-panels",
      start: "top top",
      end: "bottom bottom",
      scrub: 1,
      toggleActions: "restart none none reverse"
    }
  })
  .from(document.getElementById("bg"), { xPercent: -100 });

It's always a good idea to animate transforms instead of width, height, top, left, margins properties. Also the scrub: 1 config gives you a smoother transition in the background element.

 

If this is not the part that is giving you problems, please be more specific about it.

 

Finally about the approach, it has to do mostly with the idea you have in mind, code update and maintenance, etc. If it's easier to debug and update smaller chunks of code by creating a ScrollTrigger instance for section, then that should be your approach and the way you work with ScrollTrigger. Based on your setup, creating a single timeline and a single ScrollTrigger instance could also work, but that would imply a longer amount of code in a single timeline and for some users that is harder to debug and maintain. If the animation works the way you want and using that code it's easier and simpler for you, then just use that approach. At the end we're talking about developer experience and that is quite personal. Your codepen code wasn't hard to follow and understand, so that, in my book at least, is a good solid approach.

 

Happy Tweening!

[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?

[Rodrigo]

Hi,

 

As far as architectural approach goes, that varies from site to site. We're not holders of the highest truths around here and we believe that the best path is test, test and test. If the structure you have now is the simplest possible you can have, doesn't create bugs or issues, works the way you expect and makes maintenance as easy as possible, then is the right one for your project. Since we're not aware of all the ins and outs of your project, we can't tell you about that.

 

Adding that extra space the way you're doing it, can be replaced with margin or padding, but again, if it makes sense for you, doesn't create a long term issue and other developers understand what's going on, then keep it. You'd be incredibly surprised to see how many not-so-elegant solutions some really nice sites and apps out there have in place. Sometimes you don't need a greek column made with the finest marble to hold something, sometimes a brick is just as good as the column, it's cheaper, easy to replace and no one will have a heart attack if it breaks 

 

Happy Tweening!