Blizzart

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

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

OK. Most simple but similar example it is. end: "+=500%" - not working! Behavior(overlay) of ".panel" must look like with "pinSpacing: false"

I removed more extra code removed more extra 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

@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

it is the accidental post 🙃

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 });

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. minimal demo

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

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 are located blocks one after another 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):