Jump to content
Search Community

Search the Community

Showing results for tags 'urgent'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Found 6 results

  1. vamsi12

    on scroll image sequence is colliding

    https://codepen.io/Hima-Vamsi-Kummari/pen/dPbPeqz when i am increasing the screen size i am getting some extra space once you increase the code pen screen you will understand clearly
  2. vamsi12

    Heading is Jumping on intial sroll

    <html> <head> <link rel="stylesheet" href="./index.css"/> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet"> <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script> <style> *{ scroll-behavior:auto !important; } #text-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #000000; font-size: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .container11 { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, 0%); text-align: center; color: #000000; font-size: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; } canvas { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; } .dunbox{ width: 84px !important; } .text-data{ font-family: "Plus Jakarta Sans", sans-serif; } .badge11 { display: inline-flex; align-items: center; background-color: #F1EDFF; border-radius: 8px; padding: 5px 15px; font-size: 14px; color: #431DC2; font-weight: bold; } #scroll-text{ font-size: 64px; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; margin-top: 20px; transform: translate(0%, -180%); } #scroll-text11{ transform: translate(0%, -180%); } .heading-unboxed{ font-size: 40px; font-weight: bold; color: #000; margin-top: 20px; margin-bottom: 20px; font-family: "Plus Jakarta Sans", sans-serif; } #page2{ display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 90px; } .badge11 .icon { margin-right: 5px; font-size: 16px; color: #431DC2; } .data-heading{ color: #805AFF; } .cta-button { background-color: #000; color: #fff; padding: 3px; border-radius: 58px; width: 197px; height: 48px; font-size: 16px; display: flex; justify-content: space-between; align-items: center; text-decoration: none; font-weight: bold; transition: background-color 0.3s ease; } #scroll-text11{ margin-bottom: 30px; outline: none; border-width: 0; } .arrow11{ background-color: #F8F75E; width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; border-radius: 46px; } .text-11{ text-decoration: none; color: #FFFFFF; margin-left: 20px; font-size: 13px; display: flex; justify-content: center; font-family: "Plus Jakarta Sans", sans-serif; } @media (min-width:320px) and (max-width:480px){ #image-1{ aspect-ratio: 1000/1000 !important; } } </style> </head> <body> <div id="main"> <div id="main2"> <div id="page2"> <canvas id="image-1" ></canvas> <div id="text-container"> <video width="64" height="64" autoplay muted loop id="scroll-text11" style="opacity: 1;"> <source src="https://dunboxed.com/wp-content/uploads/2024/10/Comp-2.mp4" type="video/mp4"> </video> <p id="scroll-text" style="opacity: 1;">Data Is Powerful</p> </div> <div class="container11" id="container11" style="opacity: 0;"> <div class="badge11"> <span class="icon"><img src="https://dunboxed.com/wp-content/uploads/2024/10/dunboxed-logo.svg" class="img11"/></span> <span class="text-data">Data Is Powerful</span> </div> <h1 class="heading-unboxed">Unbox Your <span class="data-heading">Data Potential</span><br/> with Dunboxed</h1> <div class="cta-button"> <a href="https://dunboxed.com/contact-us/" class="text-11">Get Started Today</a> <div class="arrow11"> <img src="https://dunboxed.com/wp-content/uploads/2024/10/arrow-dunboxed.svg"/> </div> </div> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/Timeline.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@studio-freight/lenis@latest/bundled/lenis.min.js"></script> <script> const lenis = new Lenis({ duration: 0.8, // Adjust the smoothness of the scroll easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // Custom easing function smooth: true, }); function raf(time) { lenis.raf(time); requestAnimationFrame(raf); } requestAnimationFrame(raf); ScrollTrigger.scrollerProxy(document.body, { scrollTop(value) { return arguments.length ? lenis.scrollTo(value) : lenis.animatedScroll; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }; }, pinType: document.body.style.transform ? "transform" : "fixed", }); // Update on animation frame lenis.on("scroll", ScrollTrigger.update); const preloadLottie = () => { const lottiePlayer = document.querySelector("dotlottie-player"); return new Promise((resolve, reject) => { lottiePlayer.addEventListener('load', resolve, { once: true }); lottiePlayer.load(); }); }; gsap.registerPlugin(ScrollTrigger); ScrollTrigger.defaults({ }); const canvas = document.querySelector("#page2>canvas"); const context = canvas.getContext("2d"); const canvasWidth = window.innerWidth ; const canvasHeight = window.innerHeight * 0.9; canvas.width = canvasWidth; canvas.height = canvasHeight; window.addEventListener("resize", function () { const canvasWidth = window.innerWidth; const canvasHeight = window.innerHeight * 0.9; canvas.width = canvasWidth; canvas.height = canvasHeight; render(); }); const frameCount = 155; const baseUrl = "https://dunboxed.com/wp-content/uploads/2024/11/final_animation2_"; const images = []; const sequence = { frame: 2 }; for (let i = 0; i < frameCount; i++) { const img = new Image(); img.src = `${baseUrl}${(i + 1).toString().padStart(5, "0")}.jpg`; images.push(img); } gsap.to(sequence, { frame: frameCount - 1, snap: "frame", ease: "none", scrollTrigger: { scrub: 0.4, start: `10% top`, end: `+=5000`, trigger: "#page2", onUpdate: function() { render(); const text = document.getElementById("scroll-text"); const text11 = document.getElementById("scroll-text11"); // Text Opacity and Positioning Logic if (sequence.frame <= 80) { text.style.opacity = 1; text11.style.opacity = 1; } else if (sequence.frame > 80 && sequence.frame <= 90) { const fadeOutProgress = (sequence.frame - 80) / 10; // Calculate fade out progress text.style.opacity = 1 - fadeOutProgress; text.style.transform = `translate(0%, ${-180 - fadeOutProgress * 40}%)`; // Smooth transition upwards text11.style.opacity = 1 - fadeOutProgress; text11.style.transform = `translate(0%, ${-180 - fadeOutProgress * 40}%)`; // Smooth transition upwards } else { text.style.opacity = 0; // Fully faded out after frame 90 text.style.transform = `translate(0%, -220%)`; text11.style.opacity = 0; // Fully faded out after frame 90 text11.style.transform = `translate(0%, -220%)`; } const container1 = document.getElementById("container11"); let textOpacity1 = 0; let textY = 0; if (sequence.frame >= 108 && sequence.frame < 130) { textOpacity1 = (sequence.frame - 108) / 8; textY = -120 + (sequence.frame - 108); } else if (sequence.frame >= 130 && sequence.frame <= 155) { textOpacity1 = 1; textY = -120 + (130 - 108); } else if (sequence.frame < 108) { textOpacity1 = 0; } container1.style.opacity = textOpacity1; container1.style.transform = `translate(-50%, ${textY}%)`; } } }); images[2].onload = render; function render() { scaleImage(images[sequence.frame], context); } function scaleImage(img, ctx) { var canvas = ctx.canvas; var hRatio = canvas.width / img.width; var vRatio = canvas.height / img.height; var ratio = Math.min(hRatio, vRatio); var centerShift_x = (canvas.width - img.width * ratio) / 2; var centerShift_y = (canvas.height - img.height * ratio) / 2; context.clearRect(0, 0, canvas.width, canvas.height); context.drawImage( img, 0, 0, img.width, img.height, centerShift_x, centerShift_y, img.width * ratio, img.height * ratio ); } ScrollTrigger.create({ trigger: "#main", pin: true, start: `top top`, end: `+=5000` }); </script> </body> </html> I am working in wordpress elementor one section i used custom code in that i written a custom code as mention above i am working on image sequence in wordpress can you fix the "data is powerfull" is jumping on intiall scroll and please check the video it should fixed without any jumping and scroll smoothly https://www.loom.com/share/dcffc00fba024515b096428522120775?sid=a54fb642-d31f-4138-9b4e-a95cfbc0722e
  3. Hi , I hope this message finds you well. I'm currently working on a project that involves a horizontal scroll effect using GSAP (GreenSock Animation Platform). The animation looks visually appealing, but I've encountered a peculiar issue that I'm seeking advice on. The Problem: Towards the end of the animation, I've noticed that the section containing the horizontal scroll jumps or moves unexpectedly. I've carefully set up the trigger and pin elements, and the animation seems to work well until this point. However, the final moments of the animation are not as smooth as I'd like them to be. Have a look : https://streamable.com/5qptc3 Code Overview: I'm using the following code structure for the animation: // Reusable function for GSAP Animation function setupHorizontalScrollAnimation(containerId, sectionId, imageListId) { const container = document.getElementById(containerId); const section = document.getElementById(sectionId); const imageList = document.getElementById(imageListId); const images = imageList.querySelectorAll('img'); // Calculate the total width of all images const timeline = gsap.timeline({ scrollTrigger: { trigger: container, start: 'center center', end: () => `+=${images.length * 100}%`, // Adjust the end value based on the number of images pin: section, scrub: 0.2, markers: true, pinspacing: false }, }); timeline.to(images, { xPercent: -100 * (images.length - 1), ease: 'none', }); } // Apply the animation to each section setupHorizontalScrollAnimation('containerAround1', 'parcours-therap', 'imageList1'); setupHorizontalScrollAnimation('containerAround2', 'plan-traitement', 'imageList2');
  4. jaswanth

    Container animation in react

    I was trying to replace this into a react component with tailwind css styling and I couldn't succeed since the scroll trigger is not working well. Can anyone please help me replicate this. Please take a look into this code const ProductsSection = () => { const containerRef = useRef<HTMLDivElement>(null); useLayoutEffect(() => { const context = gsap.context(() => { gsap.to(containerRef.current, { //xPercent: -100 * (sections.length - 1), x: -(containerRef.current!.scrollWidth - containerRef.current!.clientWidth), ease: "none", // <-- IMPORTANT! scrollTrigger: { trigger: containerRef.current, start: "top top", end: `+=${containerRef.current!.scrollWidth}`, pin: true, scrub: 0.5, } }); }) return () => context.revert(); }, []) return ( <div id="container" className={"flex overflow-hidden"} ref={containerRef}> <div className="module dark bg-gray-400 flex-2 h-screen flex place-items-center"> <h1>Module dark</h1> </div> <div className="module white bg-white flex-2 h-screen flex place-items-center"> <h1>Module White</h1> </div> <div className="module blue bg-blue-400 flex-1 h-screen flex place-items-center"> <h1>Module blue</h1> </div> <div className="module orange bg-orange-400 flex-3 h-screen flex place-items-center"> <h1>Module Orange</h1> </div> </div> ) };
  5. Afaq Rashid

    How can I achieve this attached animations.

    Hi guys, this is my first experience with GSAP. I found this library extremely easy to use. As I am a beginner to the world of animations, I don't understand how can I achieve a certain animation in the files attached. ubuntu screen recodere - Google Search.mp4 I have implemented the icon circles moving down or appearing above, but the main issue is how do they blend into white color? I can't think of anything to achieve this. Thanks in advance.
  6. I don't know why this is happening. I have tried a lot. But whenever I comes few minutes later to the slider tab it collapse all sliders numbers and images in one place. Check the attached image. Why is this happening. And would you please tell me how can I make this slider exactly like this video: https://drive.google.com/file/d/1_yB3fLq4PiINnd-Te4SJHRDBrQBII-U0/view?usp=sharing
×
×
  • Create New...