[The blocks are located one after another, and the animation climbs onto the previous and next blocks. Also bug with "fromTo"]

Because impossible to create the move of elements from the next slide(.panel) to the previous slide, looks like this. I see only two ways to do it:
1. Overlay ".panel" (Demo and message above i edited for better understanding), but in this case i can't use "pinspacing: true" for the longs animations in slides.
2. Negative start for the next slide, for exampe "-=200%". But in this case the same trouble with ".pin-spacer", I've been talking about since the beginningI'll try to create "crutch" next week, if nobody don't know the way with scrolltriger

[The blocks are located one after another, and the animation climbs onto the previous and next blocks. Also bug with "fromTo"]

I'll try to create "crutch" next week, if nobody don't know the way with scrolltriger

[The blocks are located one after another, and the animation climbs onto the previous and next blocks. Also bug with "fromTo"]

OK. Most simple but similar example

See the Pen yLpXgeb by eugengedroyc (@eugengedroyc) on CodePen

 

end: "+=500%" - not working!

Behavior(overlay) of ".panel" must look like with "pinSpacing: false"

 

[The blocks are located one after another, and the animation climbs onto the previous and next blocks. Also bug with "fromTo"]

I removed more extra code 

See the Pen BaJWOMb by eugengedroyc (@eugengedroyc) on CodePen

 and left only one lottie animation, since the problem with the first one is not visible in the codepen, because the scroll always returns to the beginning after reloading the page

There will be several similar scenes with long animation.
In this scene "pin-spacer" should be with yellow background.
By page logic, TITLE CUBE and Cube(lottie) should animate on the yellow container at the very bottom.

I'm sorry for my struggling questions. I tried to understand myself, but I'm not sure if I'm on the right track. For example, lottie-animation difficult to control, but maybe my mistake

[The blocks are located one after another, and the animation climbs onto the previous and next blocks. Also bug with "fromTo"]

Wow! everything turned out to be simple. I've been writing CSS for over 10 years and didn't notice different. 😮
OK. I thought it would be clearer with full demo, but, indeed, there was a lot of unnecessary code.

See the Pen abEpxmm by eugengedroyc (@eugengedroyc) on CodePen

 

 

[The blocks are located one after another, and the animation climbs onto the previous and next blocks. Also bug with "fromTo"]

Hello, @OSUblake Thank you! I figured out about the pin-spacer blocks and the mobile version and already fixed demo on the codepen.
It's still not entirely clear:
First I am forced to block-pin, than the scene begins (start: "-=200%"), a transparent pin-spacer appears between the two yellow blocks,
which I needed with a yellow background. Can i set "background-color: yellow" with function onEnter() or do I have the wrong approach?
I tried to do the locomotive(demo in my post), but it's not clear how to combine animation. And I don't know how to do "lottie-animation" with it.
"containerAnimation" I also think is not suitable for this.

 

I also found strange bugs:
If you reload the page on a purple background (where "trigger: '#jsScene1'"), then the lightning - "ScrollLottie({target: '#jsScn5'" is not fixed in the center of the screen.
Maybe something like "refresh()" is needed, but don't know how to do it...

"GSAP target .jsScn4 not found. https://greensock.com"
Warning in console even though element is in DOM
 

[The blocks are located one after another, and the animation climbs onto the previous and next blocks. Also bug with "fromTo"]

According to the Video-scenario, I am forced to make an animation trigger outside the block with these elements( start: '-=100%' ) and the animation falls into the block: div class=”pin-spacer”

This is necessary in order to do scrolls.kill() in mobile adaptation and
get a landing page with separate blocks. Now this is how it works, you can check it on a screen width less than 1200px.

I did not want to make separate pages for the mobile version, since I will have separate pages for different languages, as a result, I will end up with 2 times more pages.
This is my first experience with GSAP. Am I using the right way for animation?
If so, how can I animate the div "pin-spacer"? How can I add it to the timeline, and change the background-color from transparent to yellow in the last timeline?

There are examples of just where

See the Pen popymWG by eugengedroyc (@eugengedroyc) on CodePen

It would be possible to add my script to the alternative examples of ScrollTrigger.

 

And I also found a bug in ScrollTrigger.
I read the article  “Most Common ScrollTrigger Mistakes” and fixed the animation continuation bug.

.fromTo('#jsScn11', 1, {top:'-100vh'}, {top:'-200vh', ease:Power1.easeInOut}, '-=0.85')
.fromTo('#jsScn12', 1, {top:'-100vh'}, {top:'-200vh', ease:Power1.easeInOut}, '-=0.85')

But appeared another bug. ScrollTrigger after load page, create inline-style "top: -100vh" on blocks with text and these blocks are superimposed on other text.
But "fromTo" should fire later, in the scene #jsScene2 in this timeline: "const tl2 = gsap.timeline({})"
Moreover, even if you look with a screen width of less than 1200px (or do a "kill()" on all ScrollTriggers), then "top: -100vh" remains on these text elements anyway!

Please, open my example in new tab. This is only mobile version(without adaptive):

See the Pen PoEGPJy by eugengedroyc (@eugengedroyc) on CodePen