sarthak950

@Rodrigo

A developer refered my friend that using framework like react or next js will eleminate this issue but i dont get the point why that might do with this do u have any experience with that also have u seen the video that i have attached what my theory says is that the canvas that is rendering the images is causing the lag but i have seen apple doing it with 1000's of images with not prob can u tell me where i am loosing the performance const index = 10000; const frameCount = 240; const currentFrame = (index) => ( `/Aquatica/Renders/Char_Turn_Around${(10000 + index).toString()}.webp` ); // Example usage: const images = []; // Function to preload an image and store it in the images array const preloadImage = (index) => { const img = new Image(); img.src = currentFrame(index); img.onload = () => { console.log(`Image ${index} loaded`); // You can add additional logic here if needed }; images.push(img); }; // Preload all images for (let i = 0; i < frameCount; i++) { preloadImage(i); } // Canvas setup const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); canvas.width = 1158; canvas.height = 770; // Airpods animation setup const airpods = { frame: 0, }; // Extend the duration to add time for fade-in and fade-out const totalAnimationDuration = 10; const frameTransitionDuration = totalAnimationDuration / frameCount; let count = 0; const modelTextList = document.getElementsByClassName("modelText"); // Step 1: Add the debounce function function debounce(func, wait) { let timeout; return function () { const context = this, args = arguments; clearTimeout(timeout); timeout = setTimeout(function () { func.apply(context, args); }, wait); }; } // Step 2: Create a debounced version of your render function const debouncedRender = debounce(render, 0); // Adjust the wait time as needed for (let i = 0; i < frameCount - 1; i++) { slidetimeline.to({}, { duration: frameTransitionDuration, onUpdate: function () { console.log("Frame Count:", i); debouncedRender(); // Use the debounced render function }, }, `+=${frameTransitionDuration}`) .to(airpods, { frame: i + 1, snap: "frame", duration: frameTransitionDuration, onUpdate: function () { console.log("Frame Count:", i); debouncedRender(); // Use the debounced render function }, }); if ( i === 25 || i === 61 || i === 93 || i === 116 || i === 151 || i === 176 || i === 215 ) { slidetimeline.to(modelTextList[count], { opacity: 1, duration: 2, }, "-=1") .to(modelTextList[count], { opacity: 0, duration: 2, }, "+=0.5"); count++; } } images[0].onload = render; function render() { context.clearRect(0, 0, canvas.width, canvas.height); const img = images[airpods.frame]; // Calculate the scaling factors to fit the image within the canvas const scaleX = canvas.width / img.width; const scaleY = canvas.height / img.height; const scale = Math.min(scaleX, scaleY); // Calculate the dimensions after scaling const scaledWidth = img.width * scaleX; const scaledHeight = img.height * scaleY; // Calculate the position to center the scaled image on the canvas const offsetX = (canvas.width - scaledWidth) / 2; const offsetY = (canvas.height - scaledHeight) / 2; // center the image const offX = (canvas.width - img.width) / 2; const offY = (canvas.height - img.height) / 2; // Draw the scaled and centered image context.drawImage(img, offsetX, offsetY, scaledWidth, scaledHeight); // context.drawImage(img, offX, offY, img.width, img.height); }

@Rodrigo sir the exact description of the problem is that i have created a scroll trigger animation on the website mentioned above the website is seem less on the windows but when opened in a mac the scroll trigger seems not to register the scroll the animation dont progress forward but the scroller moves forward https://drive.google.com/file/d/1u4PCvisyKDYPyNHR1rZoGYZOufUSmVG2/view?usp=sharing i tried to replicate it on codepen but was not able to sorry for that it might be some of my mistake Just need some guidence and help

here is the animation handeler Canva.js import gsap from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); let winCount = 20; // detect if the user is on mobile if (window.innerWidth < 768) { winCount = 8; } const slidetimeline = gsap.timeline({ scrollTrigger: { trigger: "body", start: "top top", end: `+=${window.innerHeight * winCount}`, scrub: true, pin: true, anticipatePin: 1, }, }); slidetimeline .to("#slide1", { // maskPosition: "0% -4.5vh", clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", duration: 2, }) .to(".contextText1", { opacity: 1, duration: 1, }, "-=1.5") .to("#slide2", { // maskPosition: "0% -4.5vh", clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", duration: 2, }, "+=1") .to(".contextText2", { opacity: 1, duration: 1, }, "-=1.5") .to("#slide3", { // maskPosition: "0% -4.5vh", clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", duration: 2, }, "+=0") .to(".contextText3", { opacity: 1, duration: 1, }, "-=1.5") .to("#slide4", { // maskPosition: "0% -4.5vh", clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", duration: 2, }, "+=0") .to(".contextText4", { opacity: 1, duration: 1, }, "-=1.5") .to("#slide5", { // maskPosition: "0% -4.5vh", clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", duration: 3, }, "+=0"); const index = 10000; const frameCount = 240; const currentFrame = (index) => ( `/Aquatica/Renders/Char_Turn_Around${(10000 + index).toString()}.webp` ); // Example usage: const images = []; for (let i = 0; i < frameCount; i++) { const img = new Image(); img.src = currentFrame(i); images.push(img); } Promise.all(images.map((img) => { return new Promise((resolve) => { img.onload = resolve; }); })).then(() => { // Initialize scroll animations here ScrollTrigger.refresh(); }); // Canvas setup const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); canvas.width = 1158; canvas.height = 770; // Airpods animation setup const airpods = { frame: 0, }; // Extend the duration to add time for fade-in and fade-out const totalAnimationDuration = 10; const frameTransitionDuration = totalAnimationDuration / frameCount; let count = 0; const modelTextList = document.getElementsByClassName("modelText"); // Step 1: Add the debounce function function debounce(func, wait) { let timeout; return function () { const context = this, args = arguments; clearTimeout(timeout); timeout = setTimeout(function () { func.apply(context, args); }, wait); }; } // Step 2: Create a debounced version of your render function const debouncedRender = debounce(render, 0); // Adjust the wait time as needed // Step 3: Use debouncedRender in your animations // const model = gsap.timeline({ // scrollTrigger: { // trigger: "canvas", // start: "top top", // end: `+=${window.innerHeight * winCount}`, // scrub: true, // pin: true, // anticipatePin: 1, // }, // }); for (let i = 0; i < frameCount - 1; i++) { slidetimeline.to({}, { duration: frameTransitionDuration, onUpdate: function () { console.log("Frame Count:", i); debouncedRender(); // Use the debounced render function }, }, `+=${frameTransitionDuration}`) .to(airpods, { frame: i + 1, snap: "frame", duration: frameTransitionDuration, onUpdate: function () { console.log("Frame Count:", i); debouncedRender(); // Use the debounced render function }, }); if ( i === 25 || i === 61 || i === 93 || i === 116 || i === 151 || i === 176 || i === 215 ) { slidetimeline.to(modelTextList[count], { opacity: 1, duration: 2, }, "-=1") .to(modelTextList[count], { opacity: 0, duration: 2, }, "+=0.5"); count++; } } images[0].onload = render; function render() { context.clearRect(0, 0, canvas.width, canvas.height); const img = images[airpods.frame]; // Calculate the scaling factors to fit the image within the canvas const scaleX = canvas.width / img.width; const scaleY = canvas.height / img.height; const scale = Math.min(scaleX, scaleY); // Calculate the dimensions after scaling const scaledWidth = img.width * scaleX; const scaledHeight = img.height * scaleY; // Calculate the position to center the scaled image on the canvas const offsetX = (canvas.width - scaledWidth) / 2; const offsetY = (canvas.height - scaledHeight) / 2; // center the image const offX = (canvas.width - img.width) / 2; const offY = (canvas.height - img.height) / 2; // Draw the scaled and centered image context.drawImage(img, offsetX, offsetY, scaledWidth, scaledHeight); // context.drawImage(img, offX, offY, img.width, img.height); }

Hey i have done https://main--websitevorld.netlify.app/ animation of the website is gsap it works fine on the windows and linux but will not behave good on the mac ( any browser brave chrome ) here is the repository https://github.com/Sarthak950/aquatica sorry i think the nature of the issue might not appear in a simple code pen

hey i build some scroll triggered animation and it works on the firefox browser but not on the cromium based browser here is the build veresion of the website :- https://main--websitevorld.netlify.app/ const slidetimeline = gsap.timeline({ scrollTrigger: { trigger: "body", start: "top top", end: `+=${window.innerHeight * winCount}`, scrub: true, pin: true, }, }); slidetimeline .to("#slide1", { maskPosition: "0% 0vh", // clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", duration: 2, }) .to(".contextText1", { opacity: 1, duration: 2, }, "-=1.5") .to("#slide2", { maskPosition: "0% -0vh", // clipPath: "polyg5on(0% 0%, 100% 0%, 100% 100%, 0% 100%)", duration: 2, }, "+=1") .to(".contextText2", { opacity: 1, duration: 2, }, "-=1.5") .to("#slide3", { maskPosition: "0% -0vh", // clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", duration: 2, }, "+=1") .to(".contextText3", { opacity: 1, duration: 2, }, "-=1.5") .to("#slide4", { maskPosition: "0% -0vh", // clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", duration: 2, }, "+=1") .to(".contextText4", { opacity: 1, duration: 2, onComplete: () => { canSkip = true; }, }, "-=1.5") .to("#slide5", { maskPosition: "0% -0vh", // clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", duration: 2, }, "+=1"); this is the animation in consideration

@OSUblake "use client"; import styles from "./page.module.css"; import { useRef, useState, useEffect } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import ScrollToPlugin from "gsap/ScrollToPlugin"; gsap.registerPlugin(ScrollTrigger); import Character from "../components/Model/Character"; export default function aquatica() { const slide1 = useRef(null); const slide2 = useRef(null); const slide3 = useRef(null); const slide4 = useRef(null); const page = useRef(null) const [windowWidth, setWindowWidth] = useState(); useEffect(() => { // Update window width const updateWindowWidth = () => { setWindowWidth(window.innerWidth); }; window.addEventListener("resize", updateWindowWidth); updateWindowWidth(); // Initial width return () => { window.removeEventListener("resize", updateWindowWidth); }; }, []); useEffect(() => { const slideArr = [slide1, slide2, slide3, slide4]; const tl = gsap.timeline({ scrollTrigger: { trigger: "page", start: "top 0%", end: `+=${windowWidth * 10}`, scrub: 1, pin: true, anticipatePin: 1, }, }); slideArr.forEach((slide) => { tl.to(slide.current, { x: -windowWidth * 2, duration: 1, ease: "none", }); }); }, [windowWidth]); return ( <div ref={page} className={styles.page}> <div className={styles.heroSec}> <div className={styles.heroImg}></div> <div className={styles.heroContent}> <div className={styles.heroNav}> <img src="/icons/vorld.png" alt="vorld" /> </div> <div className={styles.heroTitle}> <h1>Welcome to aqutica</h1> <p> Embark on a voyage where the marvels<br />{" "} of a boundless ocean planet unfold before you </p> </div> <div className={styles.herofooter}> <div className={styles.slider}> <div className={styles.slideContent}> <h1>EARN</h1> <img src="./Aquatica/star.png" alt="star" /> <h1 className={styles.hollow}>AQUATICA</h1> <img src="./Aquatica/star.png" alt="star" /> <h1>SHOOT</h1> <img src="./Aquatica/star.png" alt="star" /> <h1 className={styles.hollow}>PIONEER</h1> <img src="./Aquatica/star.png" alt="star" /> <h1>EARN</h1> <img src="./Aquatica/star.png" alt="star" /> <h1 className={styles.hollow}>AQUATICA</h1> <img src="./Aquatica/star.png" alt="star" /> <h1>SHOOT</h1> <img src="./Aquatica/star.png" alt="star" /> <h1 className={styles.hollow}>PIONEER</h1> <img src="./Aquatica/star.png" alt="star" /> </div> <div className={styles.slideContent}> <h1>EARN</h1> <img src="./Aquatica/star.png" alt="star" /> <h1 className={styles.hollow}>AQUATICA</h1> <img src="./Aquatica/star.png" alt="star" /> <h1>SHOOT</h1> <img src="./Aquatica/star.png" alt="star" /> <h1 className={styles.hollow}>PIONEER</h1> <img src="./Aquatica/star.png" alt="star" /> <h1>EARN</h1> <img src="./Aquatica/star.png" alt="star" /> <h1 className={styles.hollow}>AQUATICA</h1> <img src="./Aquatica/star.png" alt="star" /> <h1>SHOOT</h1> <img src="./Aquatica/star.png" alt="star" /> <h1 className={styles.hollow}>PIONEER</h1> <img src="./Aquatica/star.png" alt="star" /> </div> </div> </div> </div> <div className={styles.shadeCover}></div> </div> <div id="scrollbody"> <section ref={slide1} className={`${styles.slide} ${styles.slide1}`} id="slide_1" > <h1 className={styles.centerHeading}>This is Cool</h1> </section> <section ref={slide2} className={`${styles.slide} ${styles.slide2}`} id="slide_2" > <h1 id="translate" className={styles.centerHeading}> This is Cool </h1> </section> <section slide={slide3} className={`${styles.slide} ${styles.slide3}`} id="slide_3" > <h1 className={styles.centerHeading}>This is Cool</h1> </section> <section ref={slide4} className={`${styles.slide} ${styles.slide4}`} id="slide_4" > <h1 className={styles.centerHeading}>This is Cool</h1> </section> </div> <div className={styles.temp}></div> </div> ); } this is also not working can u guide me a little

@Rodrigo I think i was not able to communicate properly https://codepen.io/Sarthak_sharma_950/pen/MWxrmyP now i make the mask to work here i have 4 sections and a container 4 section have a position of absolute and the container is positioned relative i have placed mask on all 4 of the sections named (slide) as through the property of the mask that it make some portion of the container transparent i want a curtain like effect such that the mask goes up and hide its respective container and then the other and then the other as per as the website https://www.ubisoft.com/en-gb/game/far-cry/far-cry-6 i hope this is an accurate description Thanks.

nono thats not the main problem sir @Rodrigo i can't animate it or as the clip path is going up i want this ti be animate but cant figure out a way to do so

codepen.io/Sarthak_sharma_950/pen/MWxrmyP?editors=1111 here is the minimal codepen i have created Thanks @Rodrigo@mvaneijgen

@Rodrigo Thanks for yr advice i was able to create the mask with the background but not able to animate it slide { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; mask-image: url("/img/masks/mask1.png"); mask-position: top center; display: flex; justify-content: center; align-items: center; } the main bg is given sapretly for each slide ( #slide_1 , #slide_2 ) <body id="body"> <section class="slide" id="slide_1"> <h1 class="Center_heading">This is Cool</h1> </section> <section class="slide" id="slide_2"> <h1 id="translate" class="Center_heading">This is Cool</h1> </section> <section class="slide" id="slide_3"> <h1 class="Center_heading">This is Cool</h1> </section> <section class="slide" id="slide_4"> <h1 class="Center_heading">This is Cool</h1> </section> <section class="slide" id="slide_5"> <h1 class="Center_heading">This is Cool</h1> </section> <section class="slide" id="slide_6"> <h1 class="Center_heading">This is Cool</h1> </section> <script type="module" src="./js/animation.js"></script> </body>

No prob buddy keep moving forward @rocketman97

Hey, i need help to https://www.ubisoft.com/en-gb/game/far-cry/far-cry-6 recreate the mask effect of farcry6 website i can do this with clip-path but that is not don't give complex borders or will be harder to maintain they are using a mask but i am not able to animate that Thanks

@themepunch hope this text finds u well If u still looking for a freelance developer reach me sharmasarthak05@gmail.com I would love to work with you Thanks.

@Mark Webb i would love to help u with yr home page contact me at: sharmasarthak05@gmail.com Thanks.