ScrollTrigger Long Anim

HTML

              
                <div id="jsScene" class="scene scene_0">
    <div id="jsStage" class="stage">

      <div class="bodymovin-logo">
        <i id="jsScn4" class="icon-logo__circle"></i>
        <div id="jsScn5"></div>
      </div>
      <h1 class="h1">
        <div id="jsScn1" class="h1 h1__1">TITLE </div>
        <div id="jsScn2" class="h1 h1__2">TITLE </div>
        <div id="jsScn3" class="h1 h1__3">TITLE</div> 
      </h1>

    </div>
  </div>

 
  <div id="jsScene1" class="scene scene_1">
    <div id="jsStage1" class="stage stage1">
      
       <div class="stage1__text">
        <h3 id="jsScn11" class="h2h3 h2h3_h3">
         TITLE
        </h3>
        <p id="jsScn12" class="text">
          TEXT
        </p>
      </div>
      
    </div>
  </div>


  <div id="jsScene2" class="scene scene_2">
    <div id="jsStage2" class="stage stage2">

      <div class="stage2__text">
        <h3 id="jsScn21" class="h2h3 h2h3_h2">
          TITLE
        </h3>
      </div>
      <div id="jsScn22"></div>

    </div>
  </div>


  <div id="jsScene3" class="scene scene_3">
    <div id="jsStage3" class="stage stage3">
      
      <div class="stage1__text">
        <h3 id="jsScn31" class="h2h3 h2h3_h3">
            TITLE
        </h3>
      </div>

    </div>
  </div>

CSS

              
                html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

@container: 1440px;

@c-black: #010101;
@c-grey: #F2F2F2;
@c-violet: #5E2EE6;
@c-yellow: #FFE500;
@c-red: #EF303C;


.center{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.fixed{
  position: fixed!important;
}

*{
  box-sizing: border-box;
  font-family: 'Montserrat';
  position: relative;
}
body{
  overflow-x: hidden;
  color: @c-black;
  background-color: @c-black;
}


.scene{    
  display: flex;
  width: 100%;
  height: 100vh;

  &_0{
    color: @c-grey;
  }
  &_1{
    background-color: @c-violet;
    color: @c-grey;
  }
  &_2{
    background-color: @c-yellow;
    color: @c-grey;
  }
  &_3{
    color: @c-grey;
  }
}

.stage:extend(.center) {
  width: @container;
  justify-content: space-between;
  margin: auto;
  z-index: 1;
}
.stage1{
  &__text{
    width: 682px;
    padding-left: 700px
  }
}
.stage2{
  .h2h3{
    width: 744px;
  }
  &__text{
    width: 667px;
  }
}


.h2h3{
  line-height: 130%;
  &_h2{
    font-size: 80px;
  }
  &_h3{
    font-size: 48px;
  }
}


.icon-logo:extend(.center){
  &__circle{
    width: 400px;
    height: 400px;
    // width: 0;
    // height: 0;
    border-radius: 50%;
    background: @c-violet;
    z-index: 0;
    display: block;
    position: absolute;
  }
}

// Second slide
.bodymovin-logo:extend(.center){
}

JS

              
                // init controller
if (document.body.clientWidth >= 1000) { 
  gsap.registerPlugin(ScrollTrigger);
  ScrollTrigger.defaults({
    scrub: .1,
    pin: true,
    markers: {startColor: "white", endColor: "white", fontSize: "18px", indent: 10}
  });
  
  const tl = gsap.timeline()
  .to('#jsScn1', 1, {top:'-100vh', left: '-100px', ease:Power1.easeInOut})
  .to('#jsScn2', 1, {top:'-100vh', right: '-100px', ease:Power1.easeInOut}, '-=.85')
  .to('#jsScn3', 1, {top:'-100vh', right: '-100px', ease:Power1.easeInOut}, '-=.85')
  .fromTo('#jsScn11', 1, {top:'100vh'}, {top:'0', ease: Power1.easeInOut}, '-=2')
  .fromTo('#jsScn12', 1, {top:'100vh'}, {top:'0', ease: Power1.easeInOut})
  .to('#jsScn4', 1, {width:'900vh', height:'900vh', ease:Power1.easeInOut}, '-=.85')

  const scroll = ScrollTrigger.create({
    trigger: "#jsScene",
    start: "top top",
    end: "+=100%",
    pinSpacing: false,
    animation: tl,
  });


  const tl1 = gsap.timeline({})
  .fromTo('#jsScn11', 3, {top:'0'}, {top:'-100vh', ease:Power1.easeInOut}, '+=3')
  .fromTo('#jsScn12', 3, {top:'0'}, {top:'-100vh', ease:Power1.easeInOut}, '-=2.85')
  .fromTo('#jsScene1', 3, {background:'rgba(0,0,0,0)'}, {background:'rgba(255, 229, 0, 1)', ease:Power1.easeInOut}, '-=2.85')
  .to('#jsScn5', 3, {left:'60vh', top:'0', zoom: '0.1', autoAlpha: 0, ease:Power1.easeInOut}, '-=2.85')
  .to('#jsScn21', 1, {top:'-200vh', ease:Power1.easeInOut}, '-=2.85') // <--- this for combine "animation on a yellow background" with "animation on a blue background"
    .to('#jsScn22', 1, {top:'-200vh', ease:Power1.easeInOut}, '-=1.85')


  const scroll1 = ScrollTrigger.create({  
      trigger: "#jsScene1",
      start: "top top",
      end: "+=500%",
      markers: {startColor: "red", endColor: "red", indent: 200},
      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: "top top",
      start: "-=200%", // <--- this for pin "animation on a yellow background"
      end: "+=1500%",
      markers: {startColor: "green", endColor: "green", indent: 400},
      animation: tl2
  });

  
  // cubiq
  ScrollLottie({
    target: '#jsScn22',
    duration: 1, 
    start: '-=200%', 
    end: "+=500%",
    markers: {startColor: "#ff5722", endColor: "#ff5722", indent: 200},
    speed: 'fast',
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    //END CODE
    animationData: {"v":"4.8.0","meta":{"g":"LottieFiles AE ","a":"","k":"","d":"","tc":""},"fr":29.9700012207031,"ip":0,"op":209.000008512745,"w":760,"h":799,"nm":"кубик","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[100,100,0],"ix":2},"a":{"a":0,"k":[201.906,197,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[258.5,119.75],[152.75,206.75],[197.5,206.75],[145.25,274.25],[252.75,186.5],[208.75,185.25],[258.562,119.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":179.000007290819,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[100,100,0],"ix":2},"a":{"a":0,"k":[204,195.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[115,115],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[204,195.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":179.000007290819,"st":0,"bm":0}]},{"id":"comp_1","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[100,100,0],"ix":2},"a":{"a":0,"k":[201.906,197,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[258.5,119.75],[152.75,206.75],[197.5,206.75],[145.25,274.25],[252.75,186.5],[208.75,185.25],[258.562,119.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.898039275525,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":400.000016292334,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[100,100,0],"ix":2},"a":{"a":0,"k":[204,195.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[115,115],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.36862745098,0.180392156863,0.901960844152,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[204,195.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":400.000016292334,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"logo 2","refId":"comp_0","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.826],"y":[1]},"o":{"x":[1],"y":[0]},"t":140,"s":[0]},{"i":{"x":[0.001],"y":[1]},"o":{"x":[0.159],"y":[0]},"t":150,"s":[100]},{"t":159.000006476203,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[571,597,0],"ix":2},"a":{"a":0,"k":[100,100,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":200,"h":200,"ip":140.000005702317,"op":319.000012993136,"st":140.000005702317,"bm":0},{"ddd":0,"ind":2,"ty":0,"nm":"logo 2","refId":"comp_0","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.826],"y":[1]},"o":{"x":[1],"y":[0]},"t":140,"s":[0]},{"i":{"x":[0.001],"y":[1]},"o":{"x":[0.159],"y":[0]},"t":150,"s":[100]},{"t":159.000006476203,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[381,597,0],"ix":2},"a":{"a":0,"k":[100,100,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":200,"h":200,"ip":140.000005702317,"op":319.000012993136,"st":140.000005702317,"bm":0},{"ddd":0,"ind":3,"ty":0,"nm":"logo 2","refId":"comp_0","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.826],"y":[1]},"o":{"x":[1],"y":[0]},"t":140,"s":[0]},{"i":{"x":[0.001],"y":[1]},"o":{"x":[0.159],"y":[0]},"t":150,"s":[100]},{"t":159.000006476203,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[180,597,0],"ix":2},"a":{"a":0,"k":[100,100,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":200,"h":200,"ip":140.000005702317,"op":319.000012993136,"st":140.000005702317,"bm":0},{"ddd":0,"ind":4,"ty":0,"nm":"logo","refId":"comp_1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"t":92,"s":[179,398.5,0],"to":[34.5,0,0],"ti":[-34.5,0,0]},{"i":{"x":0,"y":0},"o":{"x":0.333,"y":0.333},"t":107,"s":[386,398.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"t":122,"s":[386,398.5,0],"to":[-0.833,33.167,0],"ti":[0.833,-33.167,0]},{"i":{"x":0,"y":0},"o":{"x":0.167,"y":0.167},"t":137,"s":[381,597.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":0.167,"y":0},"t":176,"s":[381,597.5,0],"to":[0,48.333,0],"ti":[0,-48.333,0]},{"t":200.000008146167,"s":[381,887.5,0]}],"ix":2},"a":{"a":0,"k":[100,100,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":200,"h":200,"ip":-1.00000004073083,"op":218.000008879322,"st":-1.00000004073083,"bm":0},{"ddd":0,"ind":5,"ty":0,"nm":"logo","refId":"comp_1","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":167,"s":[100]},{"t":172.000007005704,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"t":63,"s":[583,596.5,0],"to":[-36.667,0,0],"ti":[36.667,0,0]},{"i":{"x":0,"y":0},"o":{"x":0.333,"y":0.333},"t":78,"s":[363,596.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"t":113,"s":[363,596.5,0],"to":[-30.5,0,0],"ti":[30.5,0,0]},{"i":{"x":0,"y":0},"o":{"x":0.167,"y":0.167},"t":128,"s":[180,596.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":0.167,"y":0},"t":159,"s":[180,596.5,0],"to":[33.667,0,0],"ti":[-33.667,0,0]},{"t":167.000006802049,"s":[382,596.5,0]}],"ix":2},"a":{"a":0,"k":[100,100,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":200,"h":200,"ip":0,"op":179.000007290819,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":0,"nm":"logo","refId":"comp_1","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":167,"s":[100]},{"t":172.000007005704,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"t":13,"s":[380,199.5,0],"to":[0,33.167,0],"ti":[0,-33.167,0]},{"i":{"x":0,"y":0},"o":{"x":0.333,"y":0.333},"t":28,"s":[380,398.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"t":43,"s":[380,398.5,0],"to":[33.333,0,0],"ti":[-33.333,0,0]},{"i":{"x":0,"y":0},"o":{"x":0.333,"y":0.333},"t":58,"s":[580,398.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"t":73,"s":[580,398.5,0],"to":[-1.333,32.833,0],"ti":[1.333,-32.833,0]},{"i":{"x":0,"y":0},"o":{"x":0.167,"y":0.167},"t":88,"s":[572,595.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":0.167,"y":0},"t":159,"s":[572,595.5,0],"to":[-31.667,0,0],"ti":[31.667,0,0]},{"t":167.000006802049,"s":[382,595.5,0]}],"ix":2},"a":{"a":0,"k":[100,100,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":200,"h":200,"ip":0,"op":179.000007290819,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Слой-фигура 5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"t":23,"s":[581,195.5,0],"to":[-33.667,0,0],"ti":[33.667,0,0]},{"t":38.0000015477717,"s":[379,195.5,0]}],"ix":2},"a":{"a":0,"k":[-200,-203,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[166,166],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":20,"ix":4},"nm":"Контур прямоугольника 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.972549079446,0.235294132607,0.278431372549,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-200,-203],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Прямоугольник 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":222.000009042245,"st":-57.0000023216576,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Слой-фигура 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"t":103,"s":[181,598.5,0],"to":[0,-33.833,0],"ti":[0,33.833,0]},{"t":118.000004806239,"s":[181,395.5,0]}],"ix":2},"a":{"a":0,"k":[-200,-203,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[166,166],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":20,"ix":4},"nm":"Контур прямоугольника 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.972549079446,0.235294132607,0.278431372549,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-200,-203],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Прямоугольник 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":222.000009042245,"st":-57.0000023216576,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"Слой-фигура 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"t":53,"s":[380,598.5,0],"to":[0,-33.333,0],"ti":[0,33.333,0]},{"i":{"x":0,"y":0},"o":{"x":0.333,"y":0.333},"t":68,"s":[380,398.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"t":83,"s":[380,398.5,0],"to":[33.667,0,0],"ti":[-33.667,0,0]},{"t":98.0000039916218,"s":[582,398.5,0]}],"ix":2},"a":{"a":0,"k":[-200,-203,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[166,166],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":20,"ix":4},"nm":"Контур прямоугольника 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-200,-203],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Прямоугольник 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":222.000009042245,"st":-57.0000023216576,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"Слой-фигура 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"t":3,"s":[380,400.5,0],"to":[33.5,0,0],"ti":[-33.5,0,0]},{"i":{"x":0,"y":0},"o":{"x":0.333,"y":0.333},"t":18,"s":[581,400.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"t":33,"s":[581,400.5,0],"to":[0,-34.5,0],"ti":[0,34.5,0]},{"t":48.0000019550801,"s":[581,193.5,0]}],"ix":2},"a":{"a":0,"k":[-200,-203,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[166,166],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":20,"ix":4},"nm":"Контур прямоугольника 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-200,-203],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Прямоугольник 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":222.000009042245,"st":-57.0000023216576,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"Слой-фигура 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[180,196.5,0],"ix":2},"a":{"a":0,"k":[-200,-203,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[166,166],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":20,"ix":4},"nm":"Контур прямоугольника 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-200,-203],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Прямоугольник 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":222.000009042245,"st":-57.0000023216576,"bm":0},{"ddd":0,"ind":18,"ty":4,"nm":"подоска вертикальн 4","sr":1,"ks":{"o":{"a":0,"k":35,"ix":11},"r":{"a":0,"k":90,"ix":10},"p":{"a":0,"k":[372,589.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-99.5,290],[-99.5,-303.5]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":6,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":222.000009042245,"st":0,"bm":0},{"ddd":0,"ind":19,"ty":4,"nm":"подоска вертикальн 3","sr":1,"ks":{"o":{"a":0,"k":35,"ix":11},"r":{"a":0,"k":90,"ix":10},"p":{"a":0,"k":[373,392.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-99.5,290],[-99.5,-303.5]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":6,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":222.000009042245,"st":0,"bm":0},{"ddd":0,"ind":20,"ty":4,"nm":"подоска вертикальн 2","sr":1,"ks":{"o":{"a":0,"k":35,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[580,399.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-99.5,290],[-99.5,-303.5]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":6,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":222.000009042245,"st":0,"bm":0},{"ddd":0,"ind":21,"ty":4,"nm":"подоска вертикальн","sr":1,"ks":{"o":{"a":0,"k":35,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[380,399.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-99.5,290],[-99.5,-303.5]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":6,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":222.000009042245,"st":0,"bm":0},{"ddd":0,"ind":22,"ty":4,"nm":"квадрат","sr":1,"ks":{"o":{"a":0,"k":35,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[380,399.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[597,597],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":20,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":6,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-0.5,-8],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":222.000009042245,"st":0,"bm":0}],"markers":[]}
   })

  function ScrollLottie(vars) {
    let playhead = {frame: 0},
      target = gsap.utils.toArray(vars.target)[0],
      speeds = {slow: "+=2000", medium: "+=1000", fast: "+=500"},
      st = {trigger: target, pin: true, start: "top top", end: speeds[vars.speed] || "+=1000", scrub: 1},
      animation = lottie.loadAnimation({
        container: target,
        renderer: vars.renderer || "svg",
        loop: false,
        autoplay: false,
        path: vars.path,
        animationData: vars.animationData
      });
    for (let p in vars) {
      st[p] = vars[p];
    }
    animation.addEventListener("DOMLoaded", function() {
      gsap.to(playhead, {
        frame: animation.totalFrames - 1,
        ease: "none",
        onUpdate: () => animation.goToAndStop(playhead.frame, true),
        scrollTrigger: st
      });
      ScrollTrigger.sort();
      ScrollTrigger.refresh(); 
    });
    return animation;
  }
  
  
}

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions