coduce101 Posted December 24, 2024 Posted December 24, 2024 Hello, I hope you all are good. I've been working on implementing these Framer sliders, and I'm encountering jitter issue attached (all links down below). The problem is in the logic itself: Caused by the continuous tracking of scroll movements, which triggers frequent calls to the updateVisibleImage() function. The constant position tracking leads to the blocks changing their appearance direction erratically, even due to slight progress changes, is causing the imageSelector blocks to jitter (when they fade and move y position). The aim is to implement a more stable system that reacts smoothly to scroll direction changes. Can you please help me with this? I'm considering two approaches: 1. Ways to minimize the jitter during continuous scrolling. 2. Detecting the scroll direction and triggering the function accordingly (to call the updateVisibleImage()), and switching to the next icon on upward scroll and to the previous icon on downward scroll. For your reference, here are some relevant links: My Code: https://codesandbox.io/p/sandbox/slider-2-q77w54 (as there are assets in it, I'll attach the code below as well) Video of reproducing jitter and Inspiration Video Link: https://imgur.com/a/zSjMTIe Inspiration Demo (the second slider): https://vmarr.framer.website/ I will gladly acknowledge your contributions in this repository. In return, I'm happy to assist you with your projects at my best. Thank you for your time and consideration. 🙌 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.tailwindcss.com"></script> <title>Slider Image Reveal</title> <!-- /* 🔴 DO NOT import these fonts SEGMENT*/ --> <style> @import url(https://fonts.googleapis.com/css?family=Plus+Jakarta+Sans:200,300,regular,500,600,700,800,200italic,300italic,italic,500italic,600italic,700italic,800italic); @import url(https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic); /* 🔴 DO NOT USE THIS STYLE SEGMENT*/ * { font-family: 'Plus Jakarta Sans'; font-optical-sizing: auto; } h1, h2, h3, h4, h5, h6 { font-family: 'Plus Jakarta Sans'; /* font-weight: 800; */ } .font-mono { font-family: 'Roboto Mono' !important; font-optical-sizing: auto; font-weight: 400; } p, span { font-family: 'Inter' !important; font-optical-sizing: auto; font-weight: 400; } </style> </head> <body> <div class="w-full"> <section id="animation-section" class=" min-h-[300vh] w-full"> <div class="sticky top-0 h-screen w-full flex flex-col items-center justify-center overflow-hidden"> <h1 class="text-5xl font-extrabold text-orange-500 relative bottom-12">How we Match?</h1> <div class="flex flex-col items-center "> <div class="image-container relative bottom-6 bg-[url('./assets/hourglass.jpeg')] -z-20 bg-contain w-[400px] h-[400px] bg-no-repeat flex justify-center items-center"> <section class="section-reveal flex justify-center top-28 absolute w-full opacity-0 transition-opacity duration-400 ease-[ease] rounded-xl"> <div class="changeBlockGradient w-36 h-96 opacity-50 -top-8 blur-[6rem] bg-amber-500 absolute"> </div> <section class=" flex items-center justify-center"> <svg class="absolute w-28 left-8 z-40" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 116 102"> <path d="M 14.303 97 C 14.303 97 2.25 85.894 2.25 58.098 C 2.25 30.302 37.572 4 116.25 4" fill="#00000000" stroke-width="1.5" stroke="#000000" stroke-dasharray="5" /> </svg> <div class="relative w-[300px] bg-white rounded-3xl shadow-lg "> <div class="relative overflow-hidden bg-slate-100"> <img style="box-shadow: 5px 10px inset !important;" class="shadow-inner-md w-full h-40 object-cover rounded-t-xl" src="https://framerusercontent.com/images/Y5TNKeX69ttaAK2d6xJmQ5JvOE.png?scale-down-to=512" alt=""> <!-- <iframe class="w-full h-full object-cover rounded-t-xl " frameborder="0" src="https://maps.google.com/maps?q=1%20Grafton%20Street,%20Dublin,%20Ireland+(My%20Business%20Name)&t=&z=14&ie=UTF8&iwloc=B&output=embed"></iframe> </iframe> --> </div> <div class="absolute -right-4 top-4 w-36"> <div class=" bg-white rounded-2xl shadow-lg p-2"> <div class="absolute -top-2 -right-4 bg-yellow-200 px-3 py-2 rounded-full font-bold transform rotate-12 text-xs"> Arrives today</div> <div class="mt-4 py-6"> <img src="https://framerusercontent.com/images/v05QFgyMGqCxfGTuKic22RoxiPk.png" alt="Nike Shoes" class="w-full h-auto" /> </div> </div> </div> <div class="flex flex-col px-2 pt-2 pb-4 space-x-3 px-2 mt-4"> <div class="h-2 bg-slate-200 rounded w-1/2 ml-4"></div> <div class="flex items-center justify-start "> <div class="w-8 h-8 text-slate-400 rounded-full flex items-center justify-center"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="none" stroke-width="2" stroke="currentColor"> <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" /> </svg> </div> <div class="flex flex-col"> <div class="h-[6px] bg-slate-200 rounded w-20 mb-1"></div> <div class="h-[6px] bg-slate-200 rounded w-12"></div> </div> </div> </div> <div class="absolute bottom-4 right-4 w-8 h-8 bg-black rounded-full flex items-center justify-center"> <svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="currentColor"> <path d="M21 8.719L7.836 14.303C6.74 14.768 5.818 15 5.075 15c-.836 0-1.445-.295-1.819-.884-.485-.76-.273-1.982.559-3.272.494-.754 1.122-1.446 1.734-2.108-.144.234-1.415 2.349-.025 3.345.275.2.666.298 1.147.298.386 0 .829-.063 1.316-.19L21 8.719z" /> </svg> </div> </div> </section> </section> <!-- block 2 leaf --> <section class="section-reveal sectionSpringGrow sectionSpringGrow flex justify-center top-24 absolute w-full opacity-0 transition-opacity duration-400 ease-[ease] rounded-2xl"> <div class="changeBlockGradient w-36 h-96 opacity-50 -top-8 blur-[6rem] bg-orange-400/40 absolute -z-10"> </div> <section class=" "> <div class="bg-white rounded-3xl p-6 shadow-md"> <div class=" "> <div class="absolute bottom-1/3 flex container gap-1 w-full "> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> </div> <div class="h-2 bg-gray-300 rounded w-1/4"></div> <h2 class="mt-1 mb-4 text-3xl font-bold">CO<sub>2</sub>e</h2> <div class="flex space-x-2 "> <div class="w-2 h-2 bg-gray-300 rounded-full size-4"></div> <div class="h-2 bg-gray-300 rounded w-24"></div> </div> </div> <div class="flex items-end justify-between h-32 gap-4"> <div class="flex flex-col items-center gap-2 w-full"> <div class="h-2 addAnmFade bg-gray-200 rounded w-8"></div> <div class="w-full addAnmSpringGrow bg-gradient-to-b from-green-400/60 to-emerald-500 rounded-lg h-[72px]"> </div> </div> <div class="flex flex-col items-center gap-2 w-full"> <div class="h-2 addAnmFade bg-gray-200 rounded w-8"></div> <div class="w-full addAnmSpringGrow bg-gradient-to-b from-green-400/60 to-emerald-500 rounded-lg h-[80px]"> </div> </div> <div class="flex flex-col items-center gap-2 w-full"> <div class="h-2 addAnmFade bg-gray-200 rounded w-8"></div> <div class="w-full addAnmSpringGrow bg-gradient-to-b from-green-400/60 to-emerald-500 rounded-lg h-[100px]"> </div> </div> <div class="flex flex-col items-center gap-2 w-full"> <div class="h-2 addAnmFade bg-gray-200 rounded w-8"></div> <div class="w-full addAnmSpringGrow bg-gradient-to-b from-green-400/60 to-emerald-500 rounded-lg h-[64px]"> </div> </div> <div class="flex flex-col items-center gap-2 w-full"> <div class="h-2 addAnmFade bg-gray-200 rounded w-8"></div> <div class="w-full addAnmSpringGrow bg-gradient-to-b from-green-400/60 to-emerald-500 rounded-lg h-[72px]"> </div> </div> <div class="flex flex-col items-center gap-2 w-full"> <div class="h-2 addAnmFade bg-gray-200 rounded w-8"></div> <div class="w-full addAnmSpringGrow bg-gradient-to-b from-green-400/60 to-emerald-500 rounded-lg h-[120px]"> </div> </div> </div> </div> </section> </section> <!-- block 3 --> <section class="section-reveal sectionSpringGrow flex justify-center top-32 absolute w-full opacity-0 transition-opacity duration-400 ease-[ease] rounded-2xl"> <div class="changeBlockGradient w-36 h-96 opacity-50 -top-8 blur-[6rem] bg-orange-400/40 absolute -z-10"> </div> <section class=" "> <div class="bg-white rounded-3xl p-6 shadow-md"> <div class=" "> <div class="absolute bottom-1/2 flex container gap-1 w-full "> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> <div class="h-0.5 w-1 rounded-full bg-gray-600/30"></div> </div> <div class="h-2 bg-gray-300 rounded w-1/4 mb-2 "></div> <div class="flex space-x-2 "> <div class="w-2 h-2 bg-gray-300 rounded-full size-4"></div> <div class="h-2 bg-gray-400/60 rounded w-24"></div> </div> </div> <div class="flex items-end justify-between h-40 gap-4"> <div class="flex flex-col items-center gap-2 w-full"> <div class="h-2 addAnmFade bg-gray-200 rounded w-8"></div> <div class="w-full addAnmSpringGrow bg-gradient-to-b from-amber-400/60 to-lime-500 rounded-lg h-24"> </div> </div> <div class="flex flex-col items-center gap-2 w-full"> <div class="h-2 addAnmFade bg-gray-200 rounded w-8"></div> <div class="w-full addAnmSpringGrow bg-gradient-to-b from-purple-500/60 via-purple-500 to-pink-300 rounded-lg h-24"> </div> </div> <div class="flex flex-col items-center gap-2 w-full"> <div class="h-2 addAnmFade bg-gray-200 rounded w-8"></div> <div class="w-full addAnmSpringGrow bg-gradient-to-b from-amber-400/60 to-pink-500 rounded-lg h-32"> </div> </div> <div class="flex flex-col items-center gap-2 w-full"> <div class="h-2 addAnmFade bg-gray-200 rounded w-8"></div> <div class="w-full addAnmSpringGrow bg-gradient-to-b from-amber-400/60 to-lime-500 rounded-lg h-24"> </div> </div> <div class="flex flex-col items-center gap-2 w-full"> <div class="h-2 addAnmFade bg-gray-200 rounded w-8"></div> <div class="w-full addAnmSpringGrow bg-gradient-to-b from-amber-500/60 via-red-400 to-pink-300 rounded-lg h-28"> </div> </div> <div class="flex flex-col items-center gap-2 w-full"> <div class="h-2 addAnmFade bg-gray-200 rounded w-8"></div> <div class="w-full addAnmSpringGrow bg-gradient-to-b from-purple-500/60 via-purple-500 to-pink-300 rounded-lg h-36"> </div> </div> </div> </div> </section> </section> <!-- block 4 --> <section class="section-reveal flex justify-center absolute top-24 w-full opacity-0 transition-opacity duration-400 ease-[ease] rounded-2xl"> <div class="changeBlockGradient w-36 h-96 opacity-50 -top-8 blur-[6rem] bg-orange-400/40 absolute -z-10"> </div> <section class="flex -space-x-8"> <div class="flex flex-col"> <div class="w-40 h-24 flex justify-center items-center z-[4] transform -rotate-[10deg] bg-[#fffc8d] rounded-2xl uppercase font-bold"> sneakhub</div> <div class="relative bottom-14 w-40 h-24 flex justify-center items-center z-[3] transform -rotate-[20deg] bg-[#e8e6d4] rounded-2xl uppercase text-xs font-medium text-xs"> <div class="size-16 border border-2 border-gray-900 rounded-full"></div> </div> <div class="relative bottom-[100px] w-40 h-24 flex justify-center items-center z-[2] transform -rotate-[30deg] bg-[#a9cf78] text-white text-xl rounded-2xl capitalize font-serif"> logical</div> <div class="relative bottom-[140px] w-40 h-24 flex justify-center items-center z-[1] transform -rotate-[40deg] bg-[#e12321] rounded-2xl uppercase text-[4rem] text-white font-bold"> rb</div> </div> <div class="flex flex-col"> <div class="w-40 h-24 flex justify-center items-center z-[4] transform -rotate-[10deg] bg-[#615151] text-gray-100 rounded-2xl uppercase text-xs font-mono"> gemini <br /> appliances </div> <div class="relative bottom-14 w-40 h-24 flex justify-center items-center z-[3] transform -rotate-[20deg] bg-emerald-700 text-yellow-400 rounded-2xl uppercase text-xl font-medium"> sample</div> <div class="relative bottom-[100px] w-40 h-24 flex justify-center items-center z-[2] transform -rotate-[30deg] bg-lime-800 text-white rounded-2xl uppercase text-xs font-bold"> logo</div> <div class="relative bottom-[140px] w-40 h-24 flex justify-center items-center z-[1] transform -rotate-[40deg] bg-white text-gray-900 rounded-2xl uppercase text-xl font-medium"> made in india</div> </div> </section> </section> <!-- block 5 --> <section class="section-reveal flex justify-center top-24 absolute w-full opacity-0 transition-opacity duration-400 ease-[ease] rounded-2xl"> <div class="changeBlockGradient w-36 h-96 opacity-50 -top-8 blur-[6rem] bg-orange-400/40 absolute -z-10"> </div> <section class="flex items-start space-x-4 rounded-xl"> <div class="flex flex-col gap-4 "> <div class="flex items-start gap-2 bg-white p-4 rounded-xl shadow-lg"> <img class="w-12 p-2 border rounded-full object-contain " src="https://static.vecteezy.com/system/resources/previews/019/766/223/original/amazon-logo-amazon-icon-transparent-free-png.png" alt="" /> <div class="flex flex-col "> <div class="flex"> <fu1l class="flex flex-col "> <h1 class="font-medium">Amazon</h1> <p class="leading-tight text-sm"> Payment due in 11 days <br /> On its way </p> <!-- <div class="bg-gray-300 w-12 h-3 rounded-full"></div> --> </div> <div class="flex my-2 relative right-4"> <img src="https://th.bing.com/th/id/OIP.qDBvlp9cQgCVR-pjYJ7yZgHaJ4?rs=1&pid=ImgDetMain" alt="Product 3" class="p-1 bg-white w-10 h-10 object-contain mr-1" /> <img src="https://th.bing.com/th/id/OIP.9Sxb3w5iK6Sl72cqWAEWLQHaHa?w=179&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="Product 2" class="p-1 bg-white w-10 h-10 object-contain mr-1" /> <img src="data:image/jpeg;base64,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" alt="Product 4" class="p-1 bg-white w-10 h-10 object-contain mr-1" /> <img src="https://www.bhphotovideo.com/images/images1000x1000/beats_by_dr_dre_900_00097_01_mixr_on_ear_headphone_971557.jpg" alt="Product 1" class="p-1 bg-white w-10 h-10 object-contain mr-1" /> <div class="size-12 flex justify-center items-center"> <img class="bg-white w-10 h-10 object-contain absolute brightness-50" src="https://th.bing.com/th/id/OIP.cYg1vbmxnraKdPe529sYXgHaIR?w=175&h=196&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="Product 1" /> <span class="relative text-white font-medium">+1</span> </div> </div> <div class="flex gap-2 relative right-4"> <div class="w-24 h-6 bg-black rounded-full"></div> <div class="w-36 h-6 bg-gray-200 rounded-full"></div> </div> </div> </div> <!-- mirror --> <div class="w-full h-32 bg-gradient-to-b from-gray-400 to-gray-100 opacity-20 rounded-t-xl"> </div> </div> </section> </section> <!-- <section class="section-reveal flex justify-center top-24 absolute w-full opacity-0 transition-opacity duration-400 ease-[ease] rounded-2xl"> <div class="changeBlockGradient w-36 h-96 opacity-50 -top-8 blur-[6rem] bg-orange-400/40 absolute -z-10"></div> <div class="relative h-[600px] w-full flex items-center justify-center"> <div class=" flex items-center gap-4 relative w-full"> <div class=""><img src="https://placehold.co/200x300/black/white" alt=""></div> <div class="absolute z-10 left-[23%] "><div> <video src="./assets/shoppable-video-1.mp4"></video> </div></div> <div class=""><img src="https://placehold.co/200x300/black/white" alt=""></div> </div> </div> </section> </div> --> <!-- block 6 --> <section class="section-reveal flex justify-center absolute w-full opacity-0 transition-opacity duration-400 ease-[ease] rounded-2xl"> <div class="changeBlockGradient w-48 h-72 opacity-50 top-48 blur-[6rem] bg-orange-400/40 absolute -z-10"> </div> <div class="relative h-[600px] w-full flex items-center justify-center"> <div class=" flex items-center gap-4 relative left-12 w-full"> <div class="w-96"><img src="/assets/last-slider.svg" alt=""></div> <div class=" flex items-center justify-center absolute z-10 left-[18%] w-40 "> <video autoplay loop muted class=" rounded-xl" src="./assets/shoppable-video-1.mp4"></video> </div> </div> </div> </section> </div> <div class="iconContainer relative top-[350px] "> <div class="icon-wrapper cursor-pointer absolute w-16 h-16"> <div class="icon absolute w-full h-full flex items-center justify-center shadow-md border-orange-600/30 shadow-orange-600/10 rounded-2xl bg-white" data-index="1"> <img src="./assets/svg/truck.svg" alt="" /> </div> </div> <div class="icon-wrapper cursor-pointer absolute w-16 h-16"> <div class="icon absolute w-full h-full flex items-center justify-center shadow-md border-green-600/30 shadow-green-600/10 rounded-2xl bg-white" data-index="2"> <img src="./assets/svg/leaves.svg" alt="" /> </div> </div> <div class="icon-wrapper cursor-pointer absolute w-16 h-16"> <div class="icon absolute w-full h-full flex items-center justify-center shadow-md border-fuchsia-600/30 shadow-fuchsia-600/10 rounded-2xl bg-white" data-index="3"> <img src="./assets/svg/graph.svg" alt="" /> </div> </div> <div class="icon-wrapper cursor-pointer absolute w-16 h-16"> <div class="icon absolute w-full h-full flex items-center justify-center shadow-md border-emerald-600/30 shadow-emerald-600/10 rounded-2xl bg-white" data-index="4"> <img src="./assets/svg/gift.svg" alt="" /> </div> </div> <div class="icon-wrapper cursor-pointer absolute w-16 h-16"> <div class="icon absolute w-full h-full flex items-center justify-center shadow-md border-amber-600/30 shadow-amber-600/10 rounded-2xl bg-white" data-index="5"> <img src="./assets/svg/time.svg" alt="" /> </div> </div> <div class="icon-wrapper cursor-pointer absolute w-16 h-16"> <div class="icon absolute w-full h-full flex items-center justify-center shadow-md border-purple-600/30 shadow-purple-600/10 rounded-2xl bg-white" data-index="6"> <img src="./assets/svg/video.svg" alt="" /> </div> </div> </div> </div> </div> </section> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollToPlugin.min.js"></script> <!-- here --> <!-- script backup --> <script> gsap.registerPlugin(ScrollTrigger, ScrollToPlugin); const iconWrappers = document.querySelectorAll('.icon-wrapper'); const iconsSelector = document.querySelectorAll('.icon'); const imagesSelector = document.querySelectorAll('.section-reveal'); const radius = 350; const totalIcons = iconsSelector.length; // Initialize images gsap.set(imagesSelector, { opacity: 0 }); gsap.set(imagesSelector[0], { opacity: 1 }); // Set initial opacity for all icons gsap.set(iconsSelector, { opacity: 0 }); gsap.set(iconsSelector[0], { opacity: 1, scale: 1.25 }); gsap.set(iconsSelector[1], { opacity: 0.35, scale: 0.9 }); gsap.set(iconsSelector[2], { opacity: 0.35, scale: 0.9 }); // Function to calculate icon positions based on progress function setIconPositions(progress) { console.log(progress); iconWrappers.forEach((wrapper, index) => { const startAngledeg = -90; const startAngle = startAngledeg * (Math.PI / 180); // const arcLength = (3.14/180)*130; const arcLength = 1.20; const angle = startAngle + (index / (totalIcons - 1)) * arcLength - progress * arcLength; const x = Math.cos(angle) * radius; const y = Math.sin(angle) * radius; gsap.set(wrapper, { x: x, y: y, rotation: 0, }); }); } // Function to calculate target progress for centering an icon function getTargetProgressForIndex(index) { return index / (totalIcons - 1); } // Define background colors const bgGrads = [ '#f59e0b', // orange '#22c55e', // green '#d946ef', // fuchsia '#a3e635', // green '#fb923c', // amber '#9333ea', // violet ]; // Function to update visible image and icon opacities function updateVisibleImage(closestIndex) { if (closestIndex !== -1) { imagesSelector.forEach((section, idx) => { const elemGradientDiv = section.querySelector('.changeBlockGradient'); const addSpringGrowVar = section.querySelectorAll('.addAnmSpringGrow'); const addFadeVar = section.querySelectorAll('.addAnmFade'); // Reset non-active sections if (idx !== closestIndex) { gsap.to(section, { opacity: 0, y: 40, // Slide down blocks when becoming inactive duration: 0.1, ease: "power2.out", }); gsap.to(elemGradientDiv, { backgroundColor: 'transparent', duration: 0.3, }); } else { // Animate the active section with slide-up gsap.fromTo( section, { opacity: 0, y: 40, // Slide up from below transformOrigin: "bottom", }, { opacity: 1, y: 0, // Final position duration: 0.3, // modifies the appearing animation ease: "power2.out", } ); gsap.to(elemGradientDiv, { backgroundColor: bgGrads[closestIndex], duration: 0.3, }); // Spring-grow animation for green bars gsap.fromTo( addSpringGrowVar, { scaleY: 0, transformOrigin: "bottom" }, { scaleY: 1, duration: 1.5, stagger: 0, ease: "elastic.out(0.5, 0.3)", } ); // Fade animation for horizontal gray bars gsap.fromTo( addFadeVar, { opacity: 0 }, { opacity: 1, duration: 1, stagger: 0, ease: "power2.out", } ); } }); // Update icon opacities (updated here) iconsSelector.forEach((icon, idx) => { const distance = Math.abs(idx - closestIndex); const isInVisibilityWindow = distance <= 2; // Show only if within 2 positions gsap.to(icon, { opacity: isInVisibilityWindow ? (idx === closestIndex ? 1 : 0.35) : 0, // Hide icons outside window scale: idx === closestIndex ? 1.25 : (isInVisibilityWindow ? 0.9 : 0.5), duration: 0.3, onStart: () => { icon.style.pointerEvents = isInVisibilityWindow ? 'auto' : 'none'; } }); }); } } // Set initial positions setIconPositions(0); // Create the scroll trigger animation gsap.to({}, { scrollTrigger: { trigger: '#animation-section', start: 'top top', end: 'bottom bottom', scrub: 50, // responsiveness of block re-renders also controls the duration of snap detection snap: { // added snap here snapTo: (progress) => { // Calculate snapping points based on the number of icons const snapPoints = Array.from({ length: totalIcons }, (_, i) => i / (totalIcons - 1)); return gsap.utils.snap(snapPoints, progress); }, duration: 0.3, // Optional: Snap animation duration directional: true, // Snap in the direction of scrolling }, onUpdate: (self) => { setIconPositions(self.progress); let closestIndex = -1; let minDistance = Infinity; iconsSelector.forEach((icon, index) => { const rect = icon.getBoundingClientRect(); const centerX = rect.left + rect.width / 2; const centerY = rect.top + rect.height / 2; const distanceToCenter = Math.sqrt( (window.innerWidth / 2 - centerX) ** 2 + (window.innerHeight / 2 - centerY) ** 2 ); if (distanceToCenter < minDistance) { minDistance = distanceToCenter; closestIndex = index; } }); updateVisibleImage(closestIndex); }, }, }); // Initial animation for icons appearing gsap.from(iconsSelector, { scale: 0, opacity: 0, duration: 1, stagger: 0.1, ease: 'back.out', }); // Add click handlers to icons iconsSelector.forEach((icon, index) => { // Hover animations icon.addEventListener('mouseenter', () => { gsap.to(icon, { scale: 1.1, duration: 0.3, ease: 'back.out' }); }); icon.addEventListener('mouseleave', () => { gsap.to(icon, { scale: 1, duration: 0.3, ease: 'back.out' }); }); // Click to center animation icon.addEventListener('click', () => { const targetProgress = getTargetProgressForIndex(index); const section = document.querySelector('#animation-section'); const scrollAmount = targetProgress * (section.offsetHeight - window.innerHeight); gsap.to(window, { duration: 1, scrollTo: { y: scrollAmount, autoKill: false, }, ease: 'power2.inOut', }); }); }); </script> </body> </html> See the Pen MYgoVpm by manmeet-ms (@manmeet-ms) on CodePen.
GSAP Helper Posted December 24, 2024 Posted December 24, 2024 We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I rework my code to make it more efficient?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations. I noticed you're using tailwind - I believe that by default, it adds a CSS transition to things which is VERY bad for performance. I'd encourage you to make sure you don't have any CSS transitions applied to the things that GSAP is controlling. You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo that clearly illustrates the issue with as little code as possible and we'd be happy to take a look.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now