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

[Blizzart 0 Likes (Newbie)]

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

[OSUblake 18,533 Likes (Superhero)]

Welcome to the forums @Blizzart

 

8 hours ago, Blizzart said:

If so, how can I animate the div "pin-spacer"?

 

You don't. That element is not for you to touch. 

 

If you want different animations for mobile and desktop, please check out the matchMedia and saveStyles methods.

 

8 hours ago, Blizzart said:

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!

 

kill() does not remove the inline styles. If you use matchMedia and saveStyles, you should be good. 😉

 

[Blizzart 0 Likes (Newbie)]

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
 

[OSUblake 18,533 Likes (Superhero)]

2 hours ago, Blizzart said:

"GSAP target .jsScn4 not found. https://greensock.com"

 

There is not class with that name. You do have an id, perhaps you meant #jsScn4.

 

For the rest of your questions, can you please make a simple, minimal demo? We don't have to the resources to go through hundreds of lines of CSS and HTML to find issues. Just a simple demo that just shows your issue and nothing else. Thanks!

 

 

[Blizzart 0 Likes (Newbie)]

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

 

 

[OSUblake 18,533 Likes (Superhero)]

Sorry, but I'm still struggling to understand what you're having problems with. 🤷‍♂️

 

I'm sure it's obvious to you, but I don't see anything wrong with your demo. I really need a demo that is so obvious that a 5 year old could instantly point out the problem. Just a couple basic elements and colors.

[Blizzart 0 Likes (Newbie)]

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

[Blizzart 0 Likes (Newbie)]

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"

 

[Blizzart 0 Likes (Newbie)]

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

[OSUblake 18,533 Likes (Superhero)]

Sorry, but I still have no idea what you're having an issue with 🤷‍♂️

[Blizzart 0 Likes (Newbie)]

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