sridharan

Here's a codesandbox for reference: https://codesandbox.io/s/wandering-dawn-bs33sn?file=/src/App.js I have a sample video in there, but for the original video I'm using, it'll be 1 minute long.

I have a video with specific sequences in it. My requirement is to autoplay the video on page load and thereon, pause at 15s. When the user scrolls with the mouse, instead of scrolling the page, the video must continue to play until the next pause at 45s. This is repeated for 10 such pauses of the video. Finally, after the 10th pause, the video plays to completion. What I have is a component that plays and pauses the video at 15s, but I'm not sure if I'm controlling the timeline correctly, or whether we should use a timeline at all. import React, { useEffect, useRef } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); const IntroVideo = () => { const introVideoRef = useRef(); const tl = useRef(); useEffect(() => { tl.current = gsap.timeline().to(introVideoRef.current, { currentTime: 15, duration: 15, }); // ScrollTrigger.create({ // trigger: introVideoRef.current, // scrub: true, // markers: true, // onUpdate: function (self) { // console.log("scroll triggered"); // }, // }); }, []); return ( <div className="introVideoContainer"> <video autoPlay controls="" ref={introVideoRef} src="output.mp4"></video> </div> ); }; export default IntroVideo; Any help is appreciated. Thank you!

@CassieThank you for trying this problem out. Let me clarify better. Let us ignore the cube for now. My problem statement: When we scroll far enough in the first canvas but have not entered the second canvas, the 3d animation is already playing in the second canvas. The second canvas contains a 3d model with a baked in animation, trying to control based on scroll position. At this scroll position, the 3d model has already started animating.

Hi everyone. I have a React + R3F + GSAP project which emulates a timeline of animations. For each 3d model on the page, there is a defined canvas of height 600 ~ 700 px. The items on the page are 3d models baked with the animation ahead of time. Here BrainStem.glb has an animation clip baked in. I need to pick up the animation and animate only on scroll. Unfortunately, the animation begins as soon as the canvas for the model loads. Any help will be greatly appreciated. Thank you!! Here's the model https://github.com/KhronosGroup/glTF-Sample-Models/blob/master/2.0/BrainStem/glTF-Binary/BrainStem.glb Here's a sandbox of the issue: https://codesandbox.io/s/intelligent-haibt-6jq3qk?file=/src/App.js:437-456 I've already seen these examples: I'm unable to understand how to tweak it for my project... App.js BrainStem.js Box.js