veed.io/ferramentas/comprimir-video

isotropic.co/tool/video-to-lottie

Código Completo

				
					<style>
 .travarlottie {
 height: 100vh;
 display: flex;
 position: relative;
 }
 .lottie-container {
 width: 100vw;
 height: 100vh;
 filter: drop-shadow(0px 0px 40px #0B661F);
 }
 .videox {
 transform: scale(0.9);
 border-radius: 60px;
 overflow: hidden;
 }
</style>

<body>

 <div class="travarlottie" id="anim1">
 <div class="lottie-container videox"></div>
 </div>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>

 <script>
 gsap.registerPlugin(ScrollTrigger);

 document.querySelectorAll('.travarlottie').forEach(container => {
 const lottieContainer = container.querySelector('.lottie-container');
 if (!lottieContainer) return;

 const isMobile = window.innerWidth <= 1024;

 let pathMobile, pathDesktop;
 switch (container.id) {
 case 'anim1':
 pathMobile = 'A URL DO LOTTIE MOBILE AQUI';
 pathDesktop = 'A URL DO LOTTIE DESKTOP AQUI';
 break;
 default:
 return;
 }

 const animationPath = isMobile ? pathMobile : pathDesktop;

 const animation = lottie.loadAnimation({
 container: lottieContainer,
 renderer: 'canvas',
 loop: false,
 autoplay: false,
 path: animationPath,
 rendererSettings: {
 preserveAspectRatio: 'xMidYMid slice'
 }
 });

animation.addEventListener('DOMLoaded', () => {
  const totalFrames = animation.totalFrames;
  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: container,
      start: 'top top',
      end: '+=' + 3 * window.innerHeight + 'px',
      scrub: true,
      pin: true,
      invalidateOnRefresh: true
    }
  });

  tl.to(lottieContainer, {
    scale: 1,
    borderRadius: "0px",
    filter: "drop-shadow(0px 0px 0px transparent)",
    duration: 0.3,
    ease: "power1.out"
  }, 0); 

  tl.to({ frame: 0 }, {
    frame: totalFrames - 1,
    duration: 1,
    ease: "none",
    onUpdate: function () {
      animation.goToAndStop(Math.round(this.targets()[0].frame), true);
    }
  }, 0);
  
  tl.to(lottieContainer, {
    opacity: 0,
    filter: "blur(30px)",
    pointerEvents: "none", 
    duration: 0.3,
    ease: "power1.out"
  }, 0.8);
  
});});

 window.addEventListener('resize', () => {
 ScrollTrigger.refresh();
 });
 </script>
</body>