Search the Community

Hi GSAP Community, I found this great project by Timothy Ricks and Jesper Landberg for creating an infinite image canvas - this project currently has a collection limit of 20 items. I was wondering if it would be possible to: - Extend beyond the 20-item limit - Add lazy loading to load images dynamically Is something like this feasible insight Webflow? Here's the original project link: https://webflow.com/made-in-webflow/website/Infinite-Draggable-Scrollable-Grid Any insights or code examples would be greatly appreciated!

Hey guys, I'm trying to design this slider on Webflow: So basically, : - it's an arched slider (where the content is CMS-based) - there's a progress bar at the bottom (between the arrows) - the slider has an infinite loop. - And the user can also navigate in the slider thanks to a horizontal scroll (we could use scroll snapping for a better experience). Do you think it's possible to create that? I'm not looking for a complete solution. I just want to know if that's possible and maybe some advice on how I could create that component. Thank you in advance!

i'm webflow developer, i want to animate site using gsap, expericence person please help or suggest me how can i apply gsap in text, image, scroll animation etc

Hello! I'm having issues with GSAP's scrambleText on hover. My expectation is that, on hover on all buttons: The text scrambles to its original text The size of the button doesn't change to accommodate the scramble (not as important to me right now, but thought I'd include this since I'm here) Right now, it's doing the text scrambling, but sometimes, on some buttons, it doesn't complete the full scramble, and I'm left with what looks like a typo in the button: My question is, how do I ensure that the animation is completed? or, how do I prevent this from happening? More context, this is on Webflow though I don't think this is too relevant. My code: document.querySelectorAll(".button").forEach((element) => { let animation; element.addEventListener("mouseenter", () => { animation = gsap.to(element, { duration: 0.3, scrambleText: { text: "{original}", chars: "lowerCase", speed: 0.2, }, }); }); }); I'm not sure what a minimal demo is, but let me know how I can get that for you if you need it. I have also attached a video. It does mess up when it's a quick mouseenter/-leave but I don't know how to articulate/troubleshoot this. Screen Recording 2024-11-04 at 9.58.45 AM.mov

GSAP SplitText Not Visible After Barba.js Page Transition - Need Help Hi GSAP Community, I’m quite new to GSAP and Barba.js, and I’ve run into an issue I can’t seem to solve. Everything else works perfectly, but the GSAP SplitText animation just doesn’t become visible as expected after transitioning to the new page. Context: I’m using Barba.js for smooth page transitions and GSAP SplitText to animate text on my project pages. When transitioning from one page to another, I want to trigger a SplitText animation that animates the text character by character. The image animation works just fine, and the page transitions themselves (in and out) are smooth, but for some reason, SplitText doesn’t display the animated text even though the animation runs (I can see the logs in the console). This is my Read-Only-Link: https://preview.webflow.com/preview/portfolio-81ef14?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-81ef14&preview=747b7b5ad79fb03ec0425ecc1111ba19&workflow=preview I attached a Video that shows the Issue. Example.mov <!-- Include GSAP, ScrollTrigger, and SplitText --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script> <script src="https://cdn.prod.website-files.com/66fd5dee766f9835d57167dd/671a387c610c8e295f8bdc44_SplitText.txt"></script> <!-- Include Barba.js --> <script src="https://unpkg.com/@barba/core"></script> <script> // Function to initialize GSAP animations for the new content function initGSAP() { console.log("Initializing GSAP Animations..."); // Set initial opacity and position for text and image before the animation gsap.set("#main-text", { opacity: 0, y: 50, visibility: "visible" }); gsap.set(".portfolio-header7_image", { opacity: 0, y: 100, visibility: "visible" }); // SplitText animation: animate character by character if (document.querySelector('#main-text')) { if (typeof SplitText !== "undefined") { let splitText = new SplitText("#main-text", { type: "chars, words" }); console.log("SplitText successfully loaded and split:", splitText); // Animate the split characters gsap.to(splitText.chars, { opacity: 1, y: 0, // Text comes up from below stagger: 0.05, // Delay between characters duration: 1, ease: "power2.out" }); } else { console.error("SplitText could not be loaded."); } } // Image animation: opacity and position from below if (document.querySelector('.portfolio-header7_image')) { gsap.to(".portfolio-header7_image", { opacity: 1, y: 0, duration: 1, ease: "power2.out" }); } // Refresh ScrollTrigger to ensure new triggers are set correctly ScrollTrigger.refresh(); } // Kill all ScrollTriggers when leaving a page function killScrollTriggers() { ScrollTrigger.getAll().forEach(trigger => trigger.kill()); } // Barba.js initialization barba.init({ preventRunning: true, transitions: [ // Transition from Home to Project page { sync: true, from: { namespace: ["home-page"] }, leave(data) { return gsap.to(data.current.container, { opacity: 0, scale: 0.9, duration: 0.8, ease: "power2.inOut" }); }, enter(data) { $(data.next.container).addClass("fixed"); return gsap.fromTo( data.next.container, { opacity: 0, scale: 0.9 }, { opacity: 1, scale: 1, duration: 0.8, ease: "power2.inOut", onComplete: () => { $(window).scrollTop(0); $(data.next.container).removeClass("fixed"); resetWebflow(data); // Reset Webflow interactions after the page switch initGSAP(); // Initialize GSAP animations after the page switch } } ); } }, // Transition from Project page back to Home { sync: true, from: { namespace: ["project-page"] }, leave(data) { killScrollTriggers(); // Stop ScrollTrigger when leaving the page return gsap.to(data.current.container, { opacity: 0, scale: 0.9, duration: 0.8, ease: "power2.inOut" }); }, enter(data) { $(data.next.container).addClass("fixed"); return gsap.fromTo( data.next.container, { opacity: 0, scale: 0.9 }, { opacity: 1, scale: 1, duration: 0.8, ease: "power2.inOut", onComplete: () => { $(window).scrollTop(0); $(data.next.container).removeClass("fixed"); resetWebflow(data); // Reset Webflow interactions after the page switch initGSAP(); // Initialize GSAP animations after the page switch } } ); } } ] }); // Function to reset Webflow interactions after a page switch function resetWebflow(data) { let parser = new DOMParser(); let dom = parser.parseFromString(data.next.html, "text/html"); let webflowPageId = $(dom).find("html").attr("data-wf-page"); $("html").attr("data-wf-page", webflowPageId); window.Webflow && window.Webflow.destroy(); window.Webflow && window.Webflow.ready(); window.Webflow && window.Webflow.require("ix2").init(); } // Use Barba.js hooks to re-initialize GSAP after page transitions barba.hooks.afterEnter((data) => { initGSAP(); // Start GSAP animations after the page switch }); </script> What works: • Barba.js transitions work fine, both in and out animations are smooth. • Image animations (opacity and position changes) run as expected after the page transitions. • Webflow interactions reset correctly after the page transitions. What doesn’t work: • SplitText animations are not visible. The code runs, I can see the logs (SplitText successfully loaded and split), but the text remains hidden or not animated. I’ve tried different things, like setting the initial visibility and opacity with GSAP, but nothing seems to make the text visible. What I need help with: • I’m not sure if it’s an issue with how Barba.js handles the page transition or if I’m missing something about how SplitText should be initialized and animated. • Is there anything I should be aware of regarding timing, DOM readiness, or visibility when using SplitText with Barba.js? • Any insights from the GSAP pros on what I might be missing or doing wrong would be hugely appreciated!

Hello, I’m using these animations on a Webflow site: // ANIMATION 1 : Mots ([animate-words]) document.querySelectorAll('[animate-words]').forEach((element) => { let split = new SplitText(element, { type: 'words' }); // Sépare en mots let delay = element.getAttribute('data-delay') || 0; gsap.from(split.words, { y: '110%', opacity: 0, rotationZ: '10', duration: 0.5, ease: 'power1.out', stagger: 0.1, delay: parseFloat(delay), scrollTrigger: { trigger: element, start: 'top 90%', end: 'bottom bottom', once: true } }); }); // ANIMATION 2 : Caractères ([animate-chars]) document.querySelectorAll('[animate-chars]').forEach((element) => { let split = new SplitText(element, { type: 'chars' }); // Sépare en caractères let delay = element.getAttribute('data-delay') || 0; gsap.from(split.chars, { x: '-100%', opacity: 0, rotationZ: '-15', duration: 0.5, ease: 'power2.out', stagger: 0.05, delay: parseFloat(delay), scrollTrigger: { trigger: element, start: 'top 90%', end: 'bottom bottom', once: true } }); }); // ANIMATION 3 : Lignes ([animate-lines]) document.querySelectorAll('[animate-lines]').forEach((element) => { let split = new SplitText(element, { type: 'lines' }); // Sépare en lignes let delay = element.getAttribute('data-delay') || 0; gsap.from(split.lines, { y: '100%', opacity: 0, duration: 0.5, ease: 'power2.out', stagger: 0.2, delay: parseFloat(delay), scrollTrigger: { trigger: element, start: 'top 90%', end: 'bottom bottom', once: true } }); }); I then use the attributes on my text to animate them. On one specific page in development, I noticed that these animations sometimes fail to trigger. Here’s the page: https://agci-preprod.webflow.io/categories/branding-design Each heading has an animation. It’s not always consistent, but sometimes the text animation doesn’t start (I also noticed that when this happens, the ScrollTrigger markers are missing too). When this issue occurs, the text animation only starts once the text element reaches the top of the screen. Do you have any idea how I can fix this to ensure the text animations trigger reliably when they enter the viewport?

Hey guys, I'm relatively new to GSAP and using custom code (for Webflow). I've used GSAP core in Codesandbox pretty easily before, but I've joined club GSAP and feel like a noob 🤣 I'm studying front end dev at the moment but this is for a project that's due sooner than I can finish it so hoping the GSAP community can help! Basically I'm trying to set up the scramble text plugin. I've uploaded three files (from the "src" folder, not sure if this is correct); ScrambleTextPlugin.js, strings.js and TextPlugin.js, idk why at some point in the 800 videos and articles I read I wound up with these. In my script.js file I'm importing the plugin from the gsap folder within the project, then registering it. I'm trying to scramble text on hover, this is the current config but it's not working in Webflow (I've linked the Codesandbox script in Webflow for this script.js file only, not sure if I need to link the gsap files too?): import { gsap } from "gsap"; import { ScrambleTextPlugin } from "./gsap/ScrambleTextPlugin.js"; // Adjust the path as needed gsap.registerPlugin(ScrambleTextPlugin); const scrambler = document.querySelector(".scramble-text"); if (scrambler) { scrambler.addEventListener("mouseenter", () => { gsap.to(scrambler, { duration: 0.5, scrambleText: { text: scrambler.textContent, chars: "upperCase", }, }); }); scrambler.addEventListener("mouseleave", () => { gsap.to(scrambler, { duration: 0.5, scrambleText: { text: scrambler.textContent, }, }); }); } Any help would be greatly appreciated.

Hello, I'm encountering an issue with my GSAP/ScrollTrigger animation on Webflow. The glitch seems to be related to DOM changes, likely due to external resources loading after ScrollTrigger has already initialized. I assume ST then wrongly calculates the triggers (start and end) causing the glitch. I've tried using scrollRefresh() and wrapping the entire script in an eventListener for DOMContentLoaded, but the issue persists. 1. Video with the issue: https://youtu.be/_M-Q6dcT9S0 - Funnily the animation works correctly the first time, but on subsequent attempts, a glitch appears. 2. Triggers shift video: https://youtube.com/shorts/fCR3IKiSsQI - With markers turned on, I can see the trigger points shifting while the site is still loading probably causing the glitch 3. Temporary Workaround: As a temporary fix, I set the section meant to be animated to display: hidden until the DOM is fully loaded and then script changes it to the "block". This resolves the glitch, but I believe there should be a better solution how to handles this without a need to hide the entire section. Live URL: Link to one of the talent pages (The issue can be replicated on other talent pages as well). Current Code Snippet: <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script> <script> gsap.registerPlugin(ScrollTrigger); // Wait for the entire window, including images, to be fully loaded window.onload = function () { // Temporary workaround: Make the projectpage-image visible by setting display to block //document.querySelectorAll('.projecttalent').forEach(function(element) { //element.style.display = 'block'; //}); // Create your ScrollTriggers and animations here gsap.from(".projectpage-image", { scale: 0, duration: 3, ease: "power2", scrollTrigger: { trigger: ".talent-work", scrub: 2, start: "bottom +=400", invalidateOnRefresh: true, onEnter: () => { // Attach the scroll event listener when the ScrollTrigger enters the viewport window.addEventListener('scroll', redirectHome); }, // markers: true, }, }); // Call ScrollTrigger.refresh() at the end ScrollTrigger.refresh(); }; let redirectTimeout; const redirectHome = () => { if (window.scrollY + window.innerHeight >= document.body.offsetHeight) { clearTimeout(redirectTimeout); redirectTimeout = setTimeout(() => { window.location.href = '/'; }, 800); } } </script> Webflow Build URL (FF-TALENTs TEMPLATE within CMS collections, code shown above inserted within this page) I would greatly appreciate any advice or solutions, as this is my first experience working with GSAP. Thank you in advance!

Hey guys, I'm a Webflow designer developer who keeps running into issues implementing split type - every time I add it to my project, it ends up looking a mess for some reason. 🥲 I've attached an image (down below) of the kind of problems I have been getting. I'll also attach my code - I have tried so many variations now, honestly it's melting my brain! Here is the the timeline I want to add the text animation to - I want the text to pop up line by line when the star begins to spin (which you can see in the timeline below). It should be triggered at the same point. (pictured is #star-1) let tl3 = gsap.timeline({ scrollTrigger: { trigger: '#services', start: 'top 20%', // trigger when #about comes 30% into view end: 'bottom 85%', // set the end point to be 100% of the trigger's height scrub: true, // enable scrubbing markers: true, toggleActions: 'play none none reset', // play the animation when triggered onUpdate: (self) => { if (self.progress >= 0.12 && !self.spun) { gsap.to('#star-1', { rotation: "+=720", duration: 1, ease: 'power4.out' // OutQuart easing }); self.spun = true; } else if (self.progress < 0.12 && self.spun) { self.spun = false; // Reset the flag when progress goes below 12% } // Spin #star-2 at 50% progress if (self.progress >= 0.27 && !self.spun2) { gsap.to('#star-2', { rotation: "+=720", duration: 1, ease: 'power4.out' // OutQuart easing }); self.spun2 = true; // } else if (self.progress < 0.27 && self.spun2) { self.spun2 = false; // Reset the flag when progress goes below 50% } // Spin #star-3 at 70% progress if (self.progress >= 0.53 && !self.spun3) { gsap.to('#star-3', { rotation: "+=720", duration: 1, ease: 'power4.out' // OutQuart easing }); self.spun3 = true; // } else if (self.progress < 0.53 && self.spun3) { self.spun3 = false; // Reset the flag when progress goes below 70% } } } }); tl3.to('.animation-object3', { motionPath: { path: '#path3', align: '#path3', alignOrigin: [0.5, 0.8], autoRotate: true, ease: 'easeInCirc', delay: 0, }, }); // Add an event listener to the window resize event window.addEventListener('resize', function() { // Invalidate the motion path data for each timeline tl1.invalidate(); tl2.invalidate(); tl3.invalidate(); ScrollTrigger.refresh(); }); Here is an example of the kind of staggered text animation I want to add: let typeSplit = new SplitType('[animate]', { types: 'lines, words, chars', tagName: 'span' }) gsap.from('[animate] .line', { y: '100%', opacity: 0, duration: 0.5, ease: 'power1.out', stagger: 0.1, }) Thank you for any help or guidance! 😊

Hello! I'm working on a project on webflow, and there are projects that can be cloned, as I have 0 experience with code I decided to clone a project that contains code and I needed to make some changes. Below I leave the original lines of code and my changes. Can you tell me what's wrong? Because when I put my changes in webflow, the lines of code simply stop working. Thanks in advance!!! Original: <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script> <script> function initSimulation() { var Engine = Matter.Engine, Render = Matter.Render, Events = Matter.Events, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, World = Matter.World, Bodies = Matter.Bodies; var engine = Engine.create(), world = engine.world; var containerElement = document.querySelector(".tag-canvas"); var containerWidth = containerElement.clientWidth + 2; var containerHeight = containerElement.clientHeight + 2; var render = Render.create({ element: containerElement, engine: engine, options: { width: containerWidth, height: containerHeight, pixelRatio: 2, background: "transparent", border: "none", wireframes: false } }); var ground = Bodies.rectangle( containerWidth / 2 + 160, containerHeight + 80, containerWidth + 320, 160, { render: { fillStyle: "#000000" }, isStatic: true } ); var wallLeft = Bodies.rectangle( -80, containerHeight / 2, 160, containerHeight, { isStatic: true } ); var wallRight = Bodies.rectangle( containerWidth + 80, containerHeight / 2, 160, 1200, { isStatic: true } ); var roof = Bodies.rectangle( containerWidth / 2 + 160, -80, containerWidth + 320, 160, { isStatic: true } ); var border = 1; var radius = 20; var tagUiUx = Bodies.rectangle(containerWidth / 2 + 150, 500, 164, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f47541d38f6886e5747c1d_uiux.svg", xScale: 1, yScale: 1 } } }); var tagWordpress = Bodies.rectangle(containerWidth / 2 + 150, 460, 240, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f47540055ab00edffa0a68_wordpress.svg", xScale: 1, yScale: 1 } } }); var tagWebflow = Bodies.rectangle(containerWidth / 2 + 250, 420, 200, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f475405a7c8ff69c27ed37_webflow.svg", xScale: 1, yScale: 1 } } }); var tagWhitelevel = Bodies.rectangle(containerWidth / 2 - 75, 380, 160, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f47540c9a2047edbb293d1_whitelevel.svg", xScale: 1, yScale: 1 } } }); var tagWebflowgreen = Bodies.rectangle( containerWidth / 2 - 74, 540, 248, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f47540487abf2c397d777f_webflow-green.svg", xScale: 1, yScale: 1 } } } ); var tagSass = Bodies.rectangle(containerWidth / 2 + 174, 490, 105, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f475407ebe06e52f9283d1_sass.svg", xScale: 1, yScale: 1 } } }); var tagWeb = Bodies.rectangle(containerWidth / 2 - 142, 440, 186, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f47540f762b61424410849_web.svg", xScale: 1, yScale: 1 } } }); var tagStartup = Bodies.rectangle(containerWidth / 2 - 10, 260, 128, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f475402ae28c15adeba62f_startup.svg", xScale: 1, yScale: 1 } } }); var tagMaintence = Bodies.rectangle(containerWidth / 2 - 242, 420, 168, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f47540f86ad4f4175a1e69_maintence.svg", xScale: 1, yScale: 1 } } }); var tagIntegration = Bodies.rectangle(containerWidth / 2 + 60, 380, 155, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f47540035d9b03fc33e447_integration.svg", xScale: 1, yScale: 1 } } }); var tagMotion = Bodies.rectangle(containerWidth / 2, 360, 180, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f475405a7c8ff69c27ed00_motion.svg", xScale: 1, yScale: 1 } } }); var tagPay = Bodies.rectangle(containerWidth / 2 - 59, 260, 172, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f475406ef461a95eaa0f12_pay.svg", xScale: 1, yScale: 1 } } }); var tagGsap = Bodies.rectangle(containerWidth / 2 - 59, 260, 115, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f47540f86ad4f4175a1df1_gsap.svg", xScale: 1, yScale: 1 } } }); var tagFigma = Bodies.rectangle(containerWidth / 2 - 59, 260, 210, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f475407a05afc618131310_figma.svg", xScale: 1, yScale: 1 } } }); var tagMigration = Bodies.rectangle(containerWidth / 2 - 59, 260, 145, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f47540bfb0eee6858d556a_migration.svg", xScale: 1, yScale: 1 } } }); World.add(engine.world, [ ground, wallLeft, wallRight, roof, tagUiUx, tagWordpress, tagWebflow, tagWhitelevel, tagWebflowgreen, tagSass, tagWeb, tagStartup, tagMaintence, tagIntegration, tagMotion, tagPay, tagGsap, tagFigma, tagMigration ]); var mouse = Mouse.create(render.canvas), mouseConstraint = MouseConstraint.create(engine, { mouse: mouse, constraint: { stiffness: 0.2, render: { visible: false } } }); World.add(world, mouseConstraint); render.mouse = mouse; mouse.element.removeEventListener("mousewheel", mouse.mousewheel); mouse.element.removeEventListener("DOMMouseScroll", mouse.mousewheel); let click = false; document.addEventListener("mousedown", () => (click = true)); document.addEventListener("mousemove", () => (click = false)); document.addEventListener("mouseup", () => console.log(click ? "click" : "drag") ); Events.on(mouseConstraint, "mouseup", function (event) { var mouseConstraint = event.source; var bodies = engine.world.bodies; if (!mouseConstraint.bodyB) { for (i = 0; i < bodies.length; i++) { var body = bodies[i]; if (click === true) { if ( Matter.Bounds.contains(body.bounds, mouseConstraint.mouse.position) ) { var bodyUrl = body.url; console.log("Body.Url >> " + bodyUrl); if (bodyUrl != undefined) { window.open(bodyUrl, "_blank"); console.log("Hyperlink was opened"); } break; } } } } }); Engine.run(engine); Render.run(render); } var containerElement = document.querySelector(".tag-canvas"); var observer = new IntersectionObserver((entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting) { initSimulation(); observer.disconnect(); } }); }, {}); observer.observe(containerElement); </script> Mine: <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script> <script> function initSimulation() { var Engine = Matter.Engine, Render = Matter.Render, Events = Matter.Events, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, World = Matter.World, Bodies = Matter.Bodies; var engine = Engine.create(), world = engine.world; var containerElement = document.querySelector(".tag-canvas"); var containerWidth = containerElement.clientWidth + 2; var containerHeight = containerElement.clientHeight + 2; var render = Render.create({ element: containerElement, engine: engine, options: { width: containerWidth, height: containerHeight, pixelRatio: 2, background: "transparent", border: "none", wireframes: false } }); var ground = Bodies.rectangle( containerWidth / 2 + 160, containerHeight + 80, containerWidth + 320, 160, { render: { fillStyle: "#000000" }, isStatic: true } ); var wallLeft = Bodies.rectangle( -80, containerHeight / 2, 160, containerHeight, { isStatic: true } ); var wallRight = Bodies.rectangle( containerWidth + 80, containerHeight / 2, 160, 1200, { isStatic: true } ); var roof = Bodies.rectangle( containerWidth / 2 + 160, -80, containerWidth + 320, 160, { isStatic: true } ); var border = 1; var radius = 20; var tagUx = Bodies.rectangle(containerWidth / 2 + 150, 500, 164, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/664dc1ff59a7b58b0746c38e/668528dd8d18636a7bef9172_Ux%20Design.svg", xScale: 1, yScale: 1 } } }); var tagUi = Bodies.rectangle(containerWidth / 2 + 150, 500, 164, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/664dc1ff59a7b58b0746c38e/668528dd379b5ec25e573932_Ui%20Design.svg", xScale: 1, yScale: 1 } } }); var tagWordpress = Bodies.rectangle(containerWidth / 2 + 150, 460, 240, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/664dc1ff59a7b58b0746c38e/668528ddc490eff43ec31077_Webflow.svg", xScale: 1, yScale: 1 } } }); var tagWebflow = Bodies.rectangle(containerWidth / 2 + 250, 420, 200, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/64f41ea3b31af27272713c03/64f475405a7c8ff69c27ed37_webflow.svg", xScale: 1, yScale: 1 } } }); var tagFigma = Bodies.rectangle(containerWidth / 2 - 75, 380, 160, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/664dc1ff59a7b58b0746c38e/668528dddc4e39c5d2fd6491_Figma.svg", xScale: 1, yScale: 1 } } }); var tagIllustrator = Bodies.rectangle( containerWidth / 2 - 74, 540, 248, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/664dc1ff59a7b58b0746c38e/668528dd380663bd1c0627aa_Illustrator.svg", xScale: 1, yScale: 1 } } } ); var tagPhotoshop = Bodies.rectangle(containerWidth / 2 + 174, 490, 105, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/664dc1ff59a7b58b0746c38e/668528ddc490eff43ec310b2_Photoshop.svg", xScale: 1, yScale: 1 } } }); var tagPrototyping = Bodies.rectangle(containerWidth / 2 - 142, 440, 186, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/664dc1ff59a7b58b0746c38e/668528dddc4e39c5d2fd6476_Prototyping.svg", xScale: 1, yScale: 1 } } }); var tagWebdesign = Bodies.rectangle(containerWidth / 2 - 10, 260, 128, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/664dc1ff59a7b58b0746c38e/668528dddc4e39c5d2fd6479_Web%20Design.svg", xScale: 1, yScale: 1 } } }); var tagMaintence = Bodies.rectangle(containerWidth / 2 - 242, 420, 168, 56, { chamfer: { radius: radius }, render: { sprite: { texture: "https://uploads-ssl.webflow.com/664dc1ff59a7b58b0746c38e/668530de868bbbf25695cae8_Maintence.svg", xScale: 1, yScale: 1 } } }); World.add(engine.world, [ ground, wallLeft, wallRight, roof, tagUx, tagUi, tagWordpress, tagWebflow, tagFigma, tagIllustrator, tagPhotoshop, tagPrototyping, tagMaintence, tagWebdesign, ]); var mouse = Mouse.create(render.canvas), mouseConstraint = MouseConstraint.create(engine, { mouse: mouse, constraint: { stiffness: 0.2, render: { visible: false } } }); World.add(world, mouseConstraint); render.mouse = mouse; mouse.element.removeEventListener("mousewheel", mouse.mousewheel); mouse.element.removeEventListener("DOMMouseScroll", mouse.mousewheel); let click = false; document.addEventListener("mousedown", () => (click = true)); document.addEventListener("mousemove", () => (click = false)); document.addEventListener("mouseup", () => console.log(click ? "click" : "drag") ); Events.on(mouseConstraint, "mouseup", function (event) { var mouseConstraint = event.source; var bodies = engine.world.bodies; if (!mouseConstraint.bodyB) { for (i = 0; i < bodies.length; i++) { var body = bodies[i]; if (click === true) { if ( Matter.Bounds.contains(body.bounds, mouseConstraint.mouse.position) ) { var bodyUrl = body.url; console.log("Body.Url >> " + bodyUrl); if (bodyUrl != undefined) { window.open(bodyUrl, "_blank"); console.log("Hyperlink was opened"); } break; } } } } }); Engine.run(engine); Render.run(render); } var containerElement = document.querySelector(".tag-canvas"); var observer = new IntersectionObserver((entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting) { initSimulation(); observer.disconnect(); } }); }, {}); observer.observe(containerElement); </script>

Hi, I've been creating my portfolio on Webflow. On my "About me" page I want to have a "tool stack" and "expertises" section where I put related words, but I would like all these words to be draggable but to have limits (so they can't be dragged across the entire page), like In the image below I already have visually defined limits, but as I'm new to the code I don't know how to create these limits. Below is also the code I used to drag the "tags". Thanks already! <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script> $(function() { $(".tool_stack_items").draggable({ }); }); </script>

Hi GSAP Community, I am working on an animation where an element (targetEl) moves between different zones (zoneEl) as the user scrolls. However, I'm facing an issue with tracking the initial position of targetEl correctly. The targetEl is inside zoneEl.first(), which is in another div with a height of 1500dvh and is animated to move from right to left by -100dvh. This movement is causing the targetEl to start in the wrong position, and the animation does not play correctly. Here is the code I am using (fille in attaches): window.addEventListener("DOMContentLoaded", (event) => { // SETUP PLUGINS gsap.registerPlugin(ScrollTrigger, Flip); ScrollTrigger.normalizeScroll(true); // SETUP ELEMENTS let zoneEl = $("[js-scrollflip-element='zone']"), targetEl = $("[js-scrollflip-element='target']").first(); // SETUP TIMELINE let tl; function createTimeline() { if (tl) { tl.kill(); gsap.set(targetEl, { clearProps: "all" }); } tl = gsap.timeline({ scrollTrigger: { trigger: zoneEl.first(), start: "center center", endTrigger: zoneEl.last(), end: "center center", scrub: true } }); zoneEl.each(function (index) { let nextZoneEl = zoneEl.eq(index + 1); if (nextZoneEl.length) { let nextZoneDistance = nextZoneEl.offset().top + nextZoneEl.innerHeight() / 2; let thisZoneDistance = $(this).offset().top + $(this).innerHeight() / 2; let zoneDifference = nextZoneDistance - thisZoneDistance; tl.add( Flip.fit(targetEl[0], nextZoneEl[0], { duration: zoneDifference, ease: "power2.inOut" }) ); } }); } createTimeline(); // SETUP RESIZE let resizeTimer; window.addEventListener("resize", function () { clearTimeout(resizeTimer); resizeTimer = setTimeout(function () { createTimeline(); }, 250); }); }); The problem is that targetEl is positioned incorrectly because zoneEl.first() is animated with a -100dvh shift from right to left. I need to track the initial position of targetEl correctly so that the animation starts at the correct position with the right coordinates and dimensions. I have included a video explanation and a link to my site for more context: Video: https://www.loom.com/share/9bfb3434afcc432b8fb6ab969bed136c?sid=188e85ea-b5a8-42f3-bd02-f52f103f7b57 Website: https://s-liudvichenko.webflow.io Any help or suggestions would be greatly appreciated! Thank you! gsap--flip-ds-layer.js

Hello lovely people on the GSAP forum! I have something that I need your help with. I'm a starting Webflow developer and I've wanted to dive into GSAP for quite some time, but never had a project that required it... Until now I have a client that really likes the https://madebyshape.co.uk/ website, especially the hover animation on the button of the hero (only visible in Chrome and Safari). I have delved into the code behind it, but can't seem to figure out how they did it. I suspect they might've done it with GSAP. My question is: is this something that would be possible with the use of GSAP in Webflow and where should I start? I would love to see your ideas on this! Wish you all a wonderful day or night

Hi guys, I'm trying to implement a horizontally scrolling gallery on my website in Webflow. I want it to be sticky until the gallery reaches the end, and then the page to resume regular scrolling. There are a number of youtube tutorials that I tried, but none worked. I have to admit, although I have a tiny little bit of experience in simple coding, I am by no means a pro. In fact, quite the opposite. After having tried to make this work for the last 5 hours, I think I can justify asking you guys Youtube-Turorial: https://www.youtube.com/watch?v=_LWinkSulwU The website I'm trying to build: https://tobias-kopp-fotografie.webflow.io/home-new-copy-scrolltrigger2 Would be so awesome if you could help. I bet it's some stupid minor detail that makes it not work at all. I tried to find that error so hard, whithout success ... Cheers, Tobi

Hello GSAP Community, as a freelance-based Webflow web designer and developer. I'm looking to enhance my Webflow projects with GSAP animations and have several queries, especially regarding the use of my GSAP Premium membership and its implementation in live projects. As I understand, GSAP Club Files are not supposed to be hosted publicly. How can I best achive hosting these files so that only accesses from my clients' domains are possible? Is there a method to limit access to the GSAP files so that only requests from specific client domains are allowed, ensuring both security and cost-efficiency? I would greatly appreciate any general recommendations and best practices for integrating GSAP into Webflow projects in a freelance setting. Any tips or shared experiences are welcome.

Happy to share this with you and hear from experts and fellow enthusiasts in the field. Visit Website

For some reason whenever I try to use GSAP animations on my site it does not work. I felt like I checked everything. I double checked it on a new fresh Webflow site too. I am following the steps provided in the youtube link below. I have deleted and rechecked multiple times. I've tried putting the code in the project setting tab where you can insert code and also the embed feature that Webflow has. I made sure to put code in the "before</body> tag". Code I used is below. Any help is supppppper appreciated thank you so much! Code used: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script> <script> gsap.registerPlugin(ScrollTrigger); ScrollTrigger.defaults({ markers: false }); // Animate From $(".section_home_intro").each(function (index) { let triggerElement = $(this); let targetElement = $(".nav_logo"); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, // trigger element - viewport start: "top top", end: "bottom top", scrub: 1 } }); tl.from(targetElement, { width: "100%", y: "90%" duration: 1 }); }); </script> Webflow site-link: https://ratunuman-com.webflow.io Youtube Tutorial I'm following: https://youtu.be/x-BVEhyYW50 Please let me know if there is any other details I could provide. Thank you again!

Hello! I'm very new to GSAP and Scrollmagic, but I'm wondering about how to do something specific. I will provide a link below, but basically what I'm wanting to know how to do is have an element tween to a specific point on scroll, then pause, then complete, the tween. Here is the code I'm using currently to make this happen: // Hockey Player Slide var tween = TweenMax.staggerFromTo(".hockey-boy", 1, {left: -600, opacity: 0}, {left: 800, opacity: 1, ease: Linear.ease}, .15); // build scene var scene = new ScrollMagic.Scene({ triggerElement: "#hockey-player", triggerHook: 0, duration: 2000, }) .setTween(tween) .setPin("#hockey-player") .addIndicators({ name: "Hockey Player", }) .addTo(controller); http://empowerplay.webflow.io/ I greatly appreciate anyone shedding some light on this for me! Take care!