Search the Community

First of all sorry, but I can't provide a codepen, I will try to describe the problem the best I can. Basically I have this type of structure: <div class='middle'> <div class='canvas-holder'> <!-- [Three.js Canvas] --> </div> </div> This is the CSS each of this element have: .middle { position: relative; margin-top: 7rem; } .canvas-holder { position: absolute; height: 100%; // [Three.js Canvas] canvas { position: sticky; top: 0; } } The Three.js canvas has a certain size (window.innerWidth, window.innerHeight), with GSAP I wanted to animate the position of a model inside the Three.js canvas. I wanted to move up the model by 5 when I scroll, so I wrote this: // peeler_model is the model I want to move gsap.to(peeler_model.position, { y: 5, scrollTrigger: { target: middle_div, // I wanted to take the div as a reference point for the markers start: "top top", end: "bottom bottom", scrub: true, markers: true } }) Now with this what I thought would've happened is that by setting the target as the middle_div the first top at the start would have went at the top of the middle_div like this: But instead what happened was that START went at the top of the body. I don't know how to really fix it, I used percentages instead of top and bottom to fix it a bit, but it would be really helpful if top would go at the top of the target like it always did for me. The only thing I can think of of why this is happening is because the canvas has a parent with absolute positioning, but that's really strange. Anyways thanks in advance for the help.

Hello Everyone, iam new to gsap and still learning day by day.. but in this i got stuck and not able to find any answers. what im trying to do is that i have crated a pinned Panels where panels of same class will overlap one by one, im trying to animate the full animation first rquired of that pinned element and after all the animation of that pinned element get completed then only it should start overlapping Please watch this youtube video To know what i want ; its only 10sec long video

My Problem: I can't make the transition between the two animations in my CodePen so that they are combined into a single smooth animation. What I'm Looking for in the Animation: Global Animation: The two animations below should be combined into a single smooth animation. Resize on Scroll: During scrolling, a div should resize until it reaches a certain size on the left side. Text Appearance: Once the size is reached, text should appear on the right side. Image Change: For each section of text, a new image should appear. Technical Details: Div Resizing: The div should gradually change size based on scrolling until it reaches a predefined width on the left side of the screen. Text Appearance: The text should appear smoothly after the div has reached its final size. Each section of text corresponds to a different scroll step. Image Change: Each new section of text should trigger the appearance of a new image. What I've Tried So Far: GSAP ScrollTrigger: I've used GSAP ScrollTrigger to try and trigger the animations on scroll. I managed to resize the div, but then I can't get the text to scroll alongside it. GSAP Timeline: I tried creating a timeline with GSAP to sequence the animations, but I'm having trouble synchronizing the text appearance and image change with the div resizing. CSS Transitions: I also tried using CSS transitions for resizing, with a fixed position. Additional Information: Sketch: I have attached a sketch to help illustrate what I'm aiming for. YouTube Link: Here is a YouTube link showing the expected result in two parts after resizing: Youtube Link :

I have a layout that includes a full-width image and below 2 columns with text. 1. In the beginning I would like to hide text columns, so it is something like an image covering the whole text in the viewport. https://prnt.sc/qMmbPSGgazwy 2. When you start scrolling the image moves up (like a normal scroll) and then uncovers the "fixed" lext column. https://prnt.sc/DsNgwu3TfMla https://prnt.sc/ITl-ejbnOFfR 3. When I scroll enough, I have a gap between the image and the left column. I would like to lock the position of the image (so it is a little) visible above the left column. https://prnt.sc/BhYYBCI0WsHM When I scroll more, then it will appear scrolling the right column up. The right column will be moved up as long as reaches the left column top. https://prnt.sc/PUsj_YQneNCV 4. After reaching the position, then it will start in the normal scroll. I tried a few methods with sticky, fixed positions, but I stuck with that. Any help here?

Hello, I will be much appreciate if someone can help me with this! Since I am not a programmer I have used some help and basic knowledge to achieve the following scrolling effect. https://codepen.io/M-Milde-the-scripter/pen/pomNZeV Basically it start with a image sequence animation, followed by second animation presenting a text with half opacity words, which becomes visible while the user scroll down, and once all the words becomes visible the entire text continue to scroll to reveal the next content. As you can see I am adding some classes on the html element while the user scroll down: - on the header I add .header-active and on the body I add .bg-1 when the first animation ends - and again on the body I add .bg-2 when the second animation ends What I want to achieve is simply to remove those classes in the same order, once the user start to scroll up: - remove the class .bg-2 from the body once the second animation reveals from the t and start to play backwards - remove the class .header-active from the header and .bg-1 from the body, once the firs animation is showing from the top and star to go backwards while the user scrolling up. So the final effect will be when the user scroll back to top the background is again white and the navigation is not visible. on the top example I try with "onReverseComplete", but no success Thank you in advance!

Hi, I would like to get help to fix an issue I'm encountering with the DrawSVG plugin and GSAP. I would like to animate my SVG element on hover and when I mouse leave it should revert. Currently, It's working fine except- If there are are multiple buttons all animation are executing at the same time when I hove any of the element, which I don't want. I want to execute the animation individually for each button. How can I achieve this effect? Many Thanks, Sajidul

Hi, I'm currently making a personal website, and I was thinking I could implement a small animation to add to the details. The intended animation that I was trying to create was one that when the viewer of my website hovers overs certain <span> elements, those <span> elements would animate, without animating the other <span> elements. However, when I wrote my code, it didn't create the intended animation. Instead, it only animated the first <span> element regardless of whichever <span> elements that I hovered over. I have attached my CodePen demo URL as per the community guidelines, so if you want to take a look at my current code, it is readily available there. I would appreciate any inputs that I could get. Thank you!

Hi everyone! I'm working on a landing page and I need to create a pre-loader that uses my handwritten logo as an SVG. Desired effect: The desired effect is a Stroke Reveal, implemented with GSAP3. How can I achieve this effect? Logo positioning: After loading, the logo/preloader should be positioned centrally on the navbar. Request for help: To achieve this project, I would need your help. What should I study? Best practices? What resources and tutorials do you recommend to learn more about?: Creating pre-loaders Stroke Reveal effect with GSAP3 Dynamic positioning of SVG elements What can I get inspiration from? Do you have any examples of websites or projects that use similar effects? Conclusion: Thank you in advance for your support! Additional information: I'm using GSAP3 My logo is a handwritten SVG The landing page is developed in HTML, CSS and JavaScript Thank you very much for your help!

Location Remote (Global team, company based in Europe) Type Freelance, full-time engagement, with potential for long-term partnership About ThemePunch ThemePunch, a renowned name in the WordPress plugin space, has been a market leader for over a decade. Our flagship product, Slider Revolution, is at the forefront of creating fully animated, responsive websites. As we embark on the exciting journey of developing a new major update of Slider Revolution, we are seeking a talented and experienced JavaScript Developer to join our diverse, global team. Key Responsibilities - Develop and enhance the Slider Revolution project, focusing on creating a seamless and innovative website builder tool. - Implement advanced features using JavaScript, Three.js, and GSAP. - Work closely with the team to create animations, timelines, and manage layers within the product. - Ensure compatibility and optimal performance in the WordPress environment. - Utilize HTML5 and CSS to enhance visual and functional aspects of web designs. Qualifications - Profound expertise in JavaScript, along with frameworks/libraries such as Three.js and GSAP. - Strong background in web animation and a deep understanding of the principles of animation. - Extensive experience with WordPress, particularly in developing plugins or addons. - Proficiency in HTML5 and CSS, with an eye for design and layout. - Familiarity with website builder tools and a strong grasp of WYSIWYG editors. - A portfolio showcasing previous work and accomplishments in similar projects. What We Offer - The opportunity to work on a leading product in the WordPress plugin space. - A remote work setting that allows flexibility and comfort. - Collaboration with a dynamic and skilled team spread across various continents. - A long-term partnership with potential for full-time engagement. - A chance to influence the future of website building and slider technology. How to Apply Please submit your resume along with a portfolio of your work. Highlight your experience with JavaScript, Three.js, GSAP, and any relevant WordPress projects here and/or to [email protected]. We look forward to discovering how your skills and experiences align with our vision for Slider Revolution. Join us at ThemePunch and be part of shaping the future of web design and animation!

Hello, I'm new to GSAP and JS in general, but I wanted to add animation to my burger menu on click. let typeSplit = new SplitType(".mobile-menu-page-container", { types: "lines, words, chars", tagName: "span", }); // plain JavaScript version document.querySelector(".burger-wrap").addEventListener("click", function () { setTimeout(function() { gsap.from(".mobile-menu-page-txt .char", { y: "110%", opacity: 1, rotationZ: "10", duration: 0.2, ease: "power1.out", stagger: 0.05, }); }, 200); }); Everything works on the first click, but if I open and close the menu, it looks strange. What can I do? Thanks RPReplay_Final1706268273.mp4

The direction of Marquee changes on hovering when scrolling upwards but it works fine when scrolling downwards. Somebody pls help me with this. ? CodePen File attached! HTML: <div class="marquee"> <div class="marquee-inner"> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> </div> </div> JS let currentScroll = 0; let isScrollingDown = true; const marquee = document.querySelector('.marquee'); const marq = document.querySelector('.marquee-part'); const mrq = document.querySelector('.marquee-inner'); const loop = horizontalLoop(mrq, { paused: false, repeat: -1, }); marquee.addEventListener("mouseenter", () => { gsap.to(loop, { timeScale: 3, ease: "power1.in" }); }); marquee.addEventListener("mouseleave", () => { gsap.to(loop, { timeScale: 1 }); }); window.addEventListener("scroll", function() { if(window.pageYOffset > currentScroll){ isScrollingDown = true; }else{ isScrollingDown = false; } gsap.to(loop, { timeScale: isScrollingDown ? 1 : -1, }).totalProgress(1); currentScroll = window.pageYOffset; }); /*---------------HORIZONTAL LOOP FN-------------------*/ function horizontalLoop(items, config) { items = gsap.utils.toArray(items); config = config || {}; let tl = gsap.timeline({repeat: config.repeat, paused: config.paused, defaults: {ease: "none"}, onReverseComplete: () => tl.totalTime(tl.rawTime() + tl.duration() * 100)}), length = items.length, startX = items[0].offsetLeft, times = [], widths = [], xPercents = [], curIndex = 0, pixelsPerSecond = (config.speed || 1) * 100, snap = config.snap === false ? v => v : gsap.utils.snap(config.snap || 1), // some browsers shift by a pixel to accommodate flex layouts, so for example if width is 20% the first element's width might be 242px, and the next 243px, alternating back and forth. So we snap to 5 percentage points to make things look more natural totalWidth, curX, distanceToStart, distanceToLoop, item, i; gsap.set(items, { // convert "x" to "xPercent" to make things responsive, and populate the widths/xPercents Arrays to make lookups faster. xPercent: (i, el) => { let w = widths[i] = parseFloat(gsap.getProperty(el, "width", "px")); xPercents[i] = snap(parseFloat(gsap.getProperty(el, "x", "px")) / w * 100 + gsap.getProperty(el, "xPercent")); return xPercents[i]; } }); gsap.set(items, {x: 0}); totalWidth = items[length-1].offsetLeft + xPercents[length-1] / 100 * widths[length-1] - startX + items[length-1].offsetWidth * gsap.getProperty(items[length-1], "scaleX") + (parseFloat(config.paddingRight) || 0); for (i = 0; i < length; i++) { item = items[i]; curX = xPercents[i] / 100 * widths[i]; distanceToStart = item.offsetLeft + curX - startX; distanceToLoop = distanceToStart + widths[i] * gsap.getProperty(item, "scaleX"); tl.to(item, {xPercent: snap((curX - distanceToLoop) / widths[i] * 100), duration: distanceToLoop / pixelsPerSecond}, 0) .fromTo(item, {xPercent: snap((curX - distanceToLoop + totalWidth) / widths[i] * 100)}, {xPercent: xPercents[i], duration: (curX - distanceToLoop + totalWidth - curX) / pixelsPerSecond, immediateRender: false}, distanceToLoop / pixelsPerSecond) .add("label" + i, distanceToStart / pixelsPerSecond); times[i] = distanceToStart / pixelsPerSecond; } function toIndex(index, vars) { vars = vars || {}; (Math.abs(index - curIndex) > length / 2) && (index += index > curIndex ? -length : length); // always go in the shortest direction let newIndex = gsap.utils.wrap(0, length, index), time = times[newIndex]; if (time > tl.time() !== index > curIndex) { // if we're wrapping the timeline's playhead, make the proper adjustments vars.modifiers = {time: gsap.utils.wrap(0, tl.duration())}; time += tl.duration() * (index > curIndex ? 1 : -1); } curIndex = newIndex; vars.overwrite = true; return tl.tweenTo(time, vars); } tl.next = vars => toIndex(curIndex+1, vars); tl.previous = vars => toIndex(curIndex-1, vars); tl.current = () => curIndex; tl.toIndex = (index, vars) => toIndex(index, vars); tl.times = times; tl.progress(1, true).progress(0, true); // pre-render for performance if (config.reversed) { tl.vars.onReverseComplete(); tl.reverse(); } return tl; }

I'm trying to call a function inside GSAP - I'm using React, but I'm getting error in my console: App.jsx:59 Uncaught TypeError: Cannot read properties of undefined (reading 'scrollTo') This is the code: import gsap from "gsap"; import ScrollTrigger from "gsap/dist/ScrollTrigger"; import { ReactLenis, useLenis } from "@studio-freight/react-lenis"; gsap.registerPlugin(ScrollTrigger); const App = () => { const lenis = useLenis(({ scroll }) => { // called every scroll }); const [showSpan, setShowSpan] = useState(true); const mainTitleRef = useRef(null); const secondaryTitleRef = useRef(null); const wavingHandRef = useRef(null); const section1Ref = useRef(null); const section2Ref = useRef(null); useLayoutEffect(() => { pinSection(); animateTitles(); return () => { // Cleanup code when the component unmounts ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); }; }, []); // Empty dependency array to run once after the initial render const pinSection = () => { // Pin the section when it enters the viewport ScrollTrigger.create({ trigger: section1Ref.current, start: "top top", end: "1200 top", pin: true, markers: true, onLeave: () => { gsap.to(section1Ref.current, { opacity: 0, duration: 1, onComplete: scrollToSection2, }); // Set opacity to 1 when entering the trigger // scrollToSection2(); // gsap.add( function(){ scrollToSection2(); } ) }, onEnterBack: () => { gsap.to(section1Ref.current, { opacity: 1, duration: 1 }); }, }); }; const scrollToSection2 = () => { lenis.scrollTo(section2Ref.current, { duration: 5 }); }; As you can see scollToSection2 is a React function. Thank you for your help upfront!

Hi Everyone, I recently recieved a project for a tour and travels website. I was scrolling through many design and thought of creating a parallax website with 3D models, but I haven't created any up until now. So I needed some suggestions on how to start and where to get the resources. Also, will there be any performance issues when hosting the website. (Website is not Dynamic, More like a Gallery type for an agency). How do I optimize the performance of the website while building it? What thinks should I be aware of? Any suggestions will be helpful. Thank You.

Hi there, I'm a newbie to GSAP, and while I was working on a tutorial related demo-project, I experienced a problem related to scrollTrigger animations. Though the content is displayed, the animations aren't working at all or are getting struck in midway. Sometimes no content is getting displayed. Please help me with this. I've put my demo code in the codepen.io url : https://codepen.io/Star-Bot/pen/VwgMgwN .

Hi guys! animation does not work on IOS, although it works on a computer and in adaptive mode, everything is correct, tell me what is the reason? https://gsap-doesnt-work.netlify.app/

i'm very new to the overall web development. https://makepill.com/en how can achieve the dot which follows the cursor. Although I've made it but in the above site it looks the cursor pulls the dot which skews a little. Also check this effect in their nav. I'll be grateful if someone could help out. Thanks in advance

In the given code, I'm attempting to create two synchronized animations using ScrollMagic. The first animation involves a video whose playback is controlled by scrolling, while the second animation is a text that flies in at a specific point in the video. To achieve this, I've used TweenMax and ScrollMagic, setting an offset value for the text animation to ensure it starts at the right moment. The issue I'm encountering is that on larger screens, the text animation comes in later than expected. I initially considered using the `triggerHook` value between 0 and 1 to address this problem, but it didn't provide the desired results. How can I make the offset value for the text animation dynamic, so that it starts at the right time, especially on larger screens? let scene = new ScrollMagic.Scene({ duration: 19000, triggerElement: intro, //video triggerHook: 0, }) .addIndicators() .setPin(intro) .addTo(controller); const height = window.innerHeight; const textAnim = TweenMax.fromTo(text1, 3, { y: 0 }, { y: -1.5 * height }); let scene2 = new ScrollMagic.Scene({ duration: 3000, triggerElement: intro, triggerHook: 0, }) .setTween(textAnim) .addTo(controller); // Calculate the offset based on scene's duration let scene3Offset = scene.duration() * 0.315 - 1000; // 31.57% of scene's duration const textAnim2 = TweenMax.fromTo( text2, 4, { y: height }, { y: -1.5 * height } ); let scene3 = new ScrollMagic.Scene({ duration: 3000, triggerElement: intro, triggerHook: 0, offset: scene3Offset, }) .setTween(textAnim2) .addTo(controller);

is it possible to control SmoothScroller request animation frame (updates) externally ? I have react app and i need to sychnronyze better SmoothScroller with other animations i have going, and i would like to do smoothscroller animation/position calculation togetehr with my other animation.

Hi community, https://htxrgj.csb.app/ I want to animate my animation using scroll within 1/4 or circle, or in arc shape, please checkout for code given on codesandbox. The main issue is that everything working fine but, while from each last element is move to one step up, then a translateX is not working smooth. and I want it smooth. I hope you got my point..! Thanks in advance..!

Hello! I just register to ask a question my programmer friend has. We want to create a website of our own, but he is puzzled as to how he can make images fade in and out when you reach a certain point in the text on the other side. We want the images to fade in or out and freeze to the specific image if text scrolling stops. I've searched the web for answers but with very limited luck i found answers... could you assist me and my friend? this is a very draft video editing i did but its kinda what we want the result to be. It will have multiple images that will changed every now and then according to how far you scroll down. test drive1.mp4

Hello, I am new to the GSAP community, I want to implement the GSAP horizontal Scroll. I have a screen of full view width and height section. I want to pause the horizontal scroll animation for 100% of the screen. In the meantime, I want to add the scroll animation to that page. For example: We are scrolling through our section and at one section our section is pinned, and then another animation starts. A new section on the right coming over the section before. Below is my implementation in the Next Js. "use client"; import React, { useEffect, useState } from "react"; import { useRouter } from "next/navigation"; import gsap from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import Login from "./login/page"; import Register from "./register/page"; import LandingPage from "./landingPage/page"; import LandingTransition from "./landingPageTransition/page"; import Category from "./categories/page"; import CategoriesList from "./categoriesList/page"; import PhilosophyPage from "./philosophy/page"; import Header from "./__components/header/Header"; import ArchetypePage from "./archetype/page"; import { escape } from "querystring"; import Accordion from "./__components/accordians/Accordians"; import Profile from "./profile/page"; import {useIsomorphicLayoutEffect} from '../helpers/isomorphicEffect' gsap.registerPlugin(ScrollTrigger); export default function Home() { const router = useRouter(); const [activeNav, setActiveNav] = useState(null); const [toggleNav, setToggleNav] = useState(1); useIsomorphicLayoutEffect(() => { gsap.registerPlugin(ScrollTrigger); let sections = gsap.utils.toArray(".panel"); let scrollTween = gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { trigger: "#container1", pin: true, scrub: 1, end: "+=14000", }, }); gsap.to("#textCatogries", { y: -120, backgroundColor: "#1e90ff", ease: "none", scrollTrigger: { trigger: "#textCatogries", containerAnimation: scrollTween, start: "center 80%", end: "center 20%", scrub: true, id: "2", }, }); gsap.set( ".gsap-marker-start, .gsap-marker-end, .gsap-marker-scroller-start, .gsap-marker-scroller-end", { autoAlpha: 0 } ); ["landing", "archtype", "category", "cetogiresList","philosophy"].forEach((triggerClass, i) => { ScrollTrigger.create({ trigger: "." + triggerClass, containerAnimation: scrollTween, start: "left 30%", end: i === 3 ? "right right" : "right 30%", markers: false, onToggle: (self) => gsap.to(".marker-" + (i + 1), { duration: 0.25, autoAlpha: self.isActive ? 1 : 0, }), }); }); }, []); const handleNav = (navNumber: any) => { if (navNumber === activeNav) { setActiveNav(null); } else { setActiveNav(navNumber); } }; return ( <div className=""> <Header navTheme={ toggleNav == 2 ? "bg-primary text-white" : toggleNav == 3 ? "" : "bg-[#E3FF00]" } toggleNav={activeNav === 2} handleNav={() => handleNav(2)} navCol={toggleNav} /> <div className="mainans "> <div className="containerMain" id="container1"> <section className={`panel landing`}> <LandingTransition /> </section> <section className={`panel archtype`} data-pin="true"> <ArchetypePage /> </section> <section className={`panel category`} data-pin="true"> <Category /> </section> <section className={`panel cetogiresList`} data-pin="true"> <CategoriesList /> </section> <section className={`panel philosophy`} data-pin="true"> <div className="Philosophy"> <PhilosophyPage scrollCheck={true} /> </div> </section> </div> </div> </div> ); }

I want to trigger an animation from a scrolltrigger in both directions, i.e it starts growing when the .intro class comes up into the viewport and then reverses when it scrolls back down again. I am hence looking to use Toggle Actions. I want the animation to continue unless the the class moves away. I can get it to work where its fully controlled by the scroll i.e. if the user stops scrolling, the animation stops, but I want the animation to complete or complete reverse once it has been triggered. In the code below, I've set it up with a separate scrolltrigger and tween, but you'll see commented out code where I tried to do it all in one. In the current version, it says "Cannot read properties of undefined (reading 'progress')" within drawStopSign, presumably because self.progress isn't defined. self.progress does work in the commented out consolidated version of scrolltrigger/ tween. Here is my code https://svelte.dev/repl/d09e192bca00453cae102eb91b4625c3?version=3.32.3

I'm sorry for the lengthy file to begin, this is the whole project which I thought may help anyone who could answer my plea. I have a problem trying to find out how to animate the Thwomp, and keeping it as part of the game as an enemy that makes the player start from the beginning again using the collision code from utils.js and importing the image from images.js. I have a short code, which I believe to be effective, but I'm not sure where to put it. const tl = new gsap.timeline({repeat:-1}) tl.to('#thwomp', { y: 300, ease: 'expo.in' }) tl.to('#thwomp', { delay: 2, y: 0, ease: 'expo', duration: 4 }) Any help will be greatly appreciated, thank you. canvas.js utils.js audio.js images.js

I have a problem with three js and gsap animation, its logic is that as I scroll, the faces of the cube are attached to the cube itself. when you attach a face to the cube, the face becomes for a while with 100% transparency. The problem is that let's say in production when I update the page in the section below the section with the animation I described above, all of the faces of my cube become opaque as if they are simultaneously joined to the cube, what can this be about and how can it be fixed? now will send my code in the next message animation: useIsomorphicLayoutEffect(() => { if (!width) return; if (width >= 1200) { const changeOpacity = (props: ChangeOpacity) => { const { variant = "increase", selector, start = "+=75", end = `+=${window.innerHeight}`, } = props; if (variant === "increase") { return gsap.to( {}, { scrollTrigger: { trigger: contextRef.current, scrub: 0.1, start, end, onUpdate: (self) => { const progress = self.progress; gsap.to(selector, { opacity: progress * 2, duration: 0, }); }, }, } ); } return gsap.to( {}, { scrollTrigger: { trigger: contextRef.current, scrub: 0.1, start, end, onUpdate: () => { gsap.to(selector, { opacity: 0, duration: 0, }); }, }, } ); }; const ctx = gsap.context(() => { changeOpacity({ selector: ".first-panel", start: `+=75`, }); changeOpacity({ variant: "decrease", selector: ".first-panel", start: `+=${75 + window.innerHeight + 75}`, }); changeOpacity({ selector: ".second-panel", start: `+=${window.innerHeight}`, }); changeOpacity({ variant: "decrease", selector: ".second-panel", start: `+=${window.innerHeight * 2}`, }); changeOpacity({ selector: ".third-panel", start: `+=${window.innerHeight * 2 + 75}`, }); changeOpacity({ variant: "decrease", selector: ".third-panel", start: `+=${window.innerHeight * 3}`, }); changeOpacity({ selector: ".fourth-panel", start: `+=${window.innerHeight * 3 + 75}`, }); changeOpacity({ variant: "decrease", selector: ".fourth-panel", start: `+=${window.innerHeight * 4}`, }); changeOpacity({ selector: ".fifth-panel", start: `+=${window.innerHeight * 4 + 75}`, }); changeOpacity({ variant: "decrease", selector: ".fifth-panel", start: `+=${window.innerHeight * 5}`, }); changeOpacity({ selector: ".sixth-panel", start: `+=${window.innerHeight * 5 + 75}`, }); }, contextRef); return () => ctx.revert(); } }, [width, contextRef]); codesandbox: https://codesandbox.io/p/sandbox/sharp-fast-j625lw problem: must be like this :

Hey, I'm New here! my question can bother you. I'm looking for a suggestion basically for my project. I'm developing a website landing section where I want to place a video on Scroll video should be play (I'm Just using a word video it can be any other bes approach) On the whole, as I study myself there are different techniques to do so. 1) video play/off on scroll like this { } 2) Image sequence { } 3) Sprite images https://webdesign.tutsplus.com/tutorials/how-to-animate-a-coffee-drinking-sprite-with-scrollmagic--cms-24795 a. which technique should I follow? b. Should I work on Canvas or just HTML divs'? speed of the loading the first time is my priority as the Apple website has quick response I just want your suggestion in this way.