Jump to content
Search Community

Search the Community

Showing results for tags 'webflow'.

  • 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...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 9 results

  1. 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>
  2. 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>
  3. 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
  4. 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
  5. 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
  6. 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.
  7. Happy to share this with you and hear from experts and fellow enthusiasts in the field. Visit Website
  8. 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!
  9. 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!
×
×
  • Create New...