Search the Community
Showing results for tags 'dotlottie-web'.
Found 1 result
-
I'm working on an assignment for school. When the page loads in, it'll reveal the "hero image" (main screen) bit by bit automatically without requiring user assistance. Now I'm trying to integrate my dotLottie animation into the timeline but I'm having a really hard time doing so. I've scanned this forum for any possible answer, asked generative AI bots as well as classmates but nobody's solution seems to work. Here's my current "animations.js" file. I'm building a Vite site and have GSAP & dotLottie-web imported through NPM. import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { DotLottie } from '@lottiefiles/dotlottie-web'; gsap.registerPlugin(ScrollTrigger); const heroImgLottie = new DotLottie({ autoplay: false, loop: false, canvas: document.querySelector('#heroIMG'), src: "src/assets/lottie/heroimg.lottie" }); let hero_tl = gsap.timeline({ onComplete: heroImgLottie.play(), }); // Loader hero_tl.to('.loader_content', { duration: 0.25, delay: 3.5, opacity: 0, }) hero_tl.to('.loader_bar', { duration: 1.5, height: 0, stagger: { amount: 0.5, }, ease: "power4.inOut", }) hero_tl.to('.loader', { duration: 0, display:"none"}) hero_tl.from('.hero_title', { duration: .5, y: 100, opacity: 0, ease: "power4.out", }) hero_tl.to('.nav_options', { duration: .5, opacity: 1, ease: "power4.inOut", })
