[Most Common ScrollTrigger Mistakes]

@Cassie Thank you, for a good example. Now it is clear. I wouldn't do that ?
But I think this mistake similar this is a function for lotti, which already has its own trigger.

ScrollLottie({
    target: '#jsScn22',
    duration: 1, 
    start: '-=200%', 
    end: "+=500%",
    speed: 'fast'
    ...
And if it's to do another different animations "#jsScn22", 
after each such animation, the previously configured "start" and "end" triggers in ScrollLottie break. 

const tl1 = gsap.timeline({})

.to('#jsScn22', 1, {top:'-200vh', ease:Power1.easeInOut}, '-=1.85')

...
 const tl2 = gsap.timeline()
.fromTo('#jsScn22', 1, {top:'-200vh'}, {top:'-300vh', ease:Power1.easeInOut}, '-=.85')
...
If so, then it is worth mentioning in this paragraph.

 

Here you can clearly see this:
if uncommented animation in "const tl2 = gsap.timeline({})"
triggers "start" and "end" are shift

[Most Common ScrollTrigger Mistakes]

it is the accidental post ?

[Most Common ScrollTrigger Mistakes]

Nesting ScrollTriggers inside multiple timeline tweens

Better to see once example

"applying ScrollTrigger to multiple tweens that are nested inside a timeline"

Is it not these, for example?

 

const tl1 = gsap.timeline({})
  .to('#jsScn21', 1, {top:'-200vh', ease:Power1.easeInOut}, '-=2.85')
  .to('#jsScn22', 1, {top:'-200vh', ease:Power1.easeInOut}, '-=1.85')
  .to('#jsScn23', 1, {top:'-200vh', ease:Power1.easeInOut}, '-=1.85')

  const scroll1 = ScrollTrigger.create({  
      trigger: "#jsScene1",
      start: "top top",
      end: "+=500%",
      animation: tl1
 });
 
const tl2 = gsap.timeline()
  .fromTo('#jsScn21', 1, {top:'-200vh'}, {top:'-300vh', ease:Power1.easeInOut})
  .fromTo('#jsScn22', 1, {top:'-200vh'}, {top:'-300vh', ease:Power1.easeInOut}, '-=.85')
  .fromTo('#jsScn23', 1, {top:'-200vh'}, {top:'-300vh', ease:Power1.easeInOut}, '-=.85')

const scroll2 = ScrollTrigger.create({
  trigger: "#jsScene2",
  start: "-=200%",
  end: "+=500%",
  animation: tl2
});