Framer Lottie ScrollTrigger Viewport Problem Solved

[@jacekkrugy9411]

Literally, what you did... it made my day

[@Ankur.Sangwan]

thankyou, it was very helpful

[@viralandroid205]

Thanks, Man, Its Really Helpful...

[@ShamsNahid]

import type { ComponentType } from "react"
import { createRef, useEffect, useRef } from "react"
import { useScroll, useTransform, useSpring } from "framer-motion"
// Scrub through a Lottie animation by scrolling while it is in view
export function withScrolledProgressInView(Component): ComponentType {
return (props: any) => {
const ref = useRef(null)
const { scrollYProgress } = useScroll({
target: ref,
offset: ["end", "start"],
layoutEffect: false, // fix required for sticky elements
})
const animationSpeed = useSpring(scrollYProgress, {
stiffness: 20,
damping: 20,
//mass: 3.7,
})
return (



)
}
}
// const animationProgress = useTransform(scrollYProgress, {
// easing: "easeInOut",
// outputRange: [0, 1],
// })

[@jungsunyoo7852]

so gooood~~~
I have a question.
Is it possible to control play, pause, stop (reset), gotoAndPlay (frame number), and gotoAndStop (frame number) with a specific button?

[@ShamsNahid]

yes, you have to add those functions on code override section.