Search the Community

I’m using the new Timeline feature in Webflow to create a GSAP animation on a specific element. The animation is set to trigger on scroll into view. This element is reused as a component inside a multi-tab WF component. When switching tabs, I’d like the animation to reset and play again once the element is visible. What’s the best way to restart or re-initialize the GSAP timeline on tab switch? The layout is something like this: WF settings as follows: Thanks in advance!

Hey guys, I finished my portfolio website, and going through it, I notice one error. As you can see, there is a strange movement on the left card. On the first visit to the website, everything is normal, but once you click the FAQ item, it moves to the left and shrinks, and if you continuously click the FAQ item, it flickers. I am 100% sure this is GSAP code. I use Smooth Scroller, and I pin the left card. When I remove the GSAP code and go with sticky on the left card, everything works normally. What could be the problem? Here is the read-only link https://preview.webflow.com/preview/veljko-portfolio-bb1f89?utm_medium=preview_link&utm_source=designer&utm_content=veljko-portfolio-bb1f89&preview=2e29e1d3721c84bd8fed760aba33f39c&workflow=preview and website https://veljkov.me/

Hello I have a fixed container in a fixed-width screen website. From this container, I want to add multiple images, each representing a project, along with text information about the project. The animation I want to achieve is that when you scroll the page, the images and the corresponding project information will be displayed one by one. The faster you scroll, the faster the images and text will change or switch. All of this animation should be in a loop, and each image and text should be connected to the CMS webflow. Some reference here: https://brunoarizio.com/ http://iamrossmason.com/ http://lagutalaguta.com/

hello thanks to webflow the gsap is now free and webflow has introduced new ui for gsap animation . but on this interaction panel i dont understand this custom event interaction . i tried searching for this but it seemed there isnt much info aout it . i also didn't under the library people kept talking to see . and i dont know coding but know webflow very well . so in this case can you- -with an example tell me how to use custom event -provide me the library people kept taking about

The thing about easings is that they are not, well, easy. ‍ Sometimes you need something with more oomph. Something that matches your project's personality perfectly. Something that doesn't feel like it was vibe coded. ‍ That's what GSAP's CustomEase is for—infinite curve possibilities. But... you can easily get lost in coordinates trying to get the animation curve feeling right. ‍ Here you'll be able to skip the coordinate chaos & browse this handpicked collection with: Descriptions that make sense – understand the feel instantly Visual previews – see before you leap Real-world use cases – know exactly when to use each one Copy-paste code – works immediately Browse. Copy. Paste. Animate. Happy easing ✌️ Oh and if you've got a CustomEase you use that think others would like, submit it to be added in. 👉 https://customeasy.dev/ customeasy.dev.mp4

Setup: Video hosted on Cloudinary FFmpeg encoded Chrome mobile = smooth, Safari = smooth, Chrome desktop = choppy What I've tried: Lower scrub values (0.05-0.1) preload="metadata" vs preload="auto Question: Is there a recommended approach for smooth video scrubbing in Chrome desktop? Any insights on why Chrome desktop handles this differently than Chrome mobile would be appreciated!

Need help from someone to build this animation in Webflow: https://www.dropbox.com/scl/fi/8eazko292jfhk8xvvnlv4/EngineVideo.mp4?rlkey=64huqf2ka05yt1g4pitujc7io&e=2&dl=0

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

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?

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!

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>

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!