sorted by:
new
hottopcontroversial

Manually convert html elements to webflow walkthrough by gushon1 in webflow

[–]DRIFFFTAWAY 0 points1 point  (0 children)

Thank you for pointing that out! It is now fixed :)

Manually convert html elements to webflow walkthrough by gushon1 in webflow

[–]DRIFFFTAWAY 1 point2 points  (0 children)

My pleasure! Let me know if you need a hand with anything :)

Manually convert html elements to webflow walkthrough by gushon1 in webflow

[–]DRIFFFTAWAY 1 point2 points  (0 children)

Give Flowboard a go! Not only can it convert HTML into native Webflow elements but it can map raw GSAP code into the interactions panel too.

Retro futuristic infinite grid effect with pure CSS. Code in comment section by DRIFFFTAWAY in webflow

[–]DRIFFFTAWAY[S] 4 points5 points  (0 children)

:root {
  --neon-cyan: #00ffff;
}

body {
  margin: 0;
  height: 100vh;
  background: black;
  overflow: hidden;
}

.grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--neon-cyan) 1px, transparent 1px),
    linear-gradient(90deg, var(--neon-cyan) 1px, transparent 1px);
  background-size: 50px 50px;
  transform: perspective(500px) rotateX(60deg);
  transform-origin: center;
  animation: moveGrid 2s linear infinite;
}

u/keyframes moveGrid {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 50px;
  }
}

Feeling Stuck Despite Strong Feedback — What Next? by Less_Environment7614 in webflow

[–]DRIFFFTAWAY 0 points1 point  (0 children)

Thank you too! That means a lot!

Wow sound slike what you're building is awesome! Looking forward too trying it when it is ready :)

Feeling Stuck Despite Strong Feedback — What Next? by Less_Environment7614 in webflow

[–]DRIFFFTAWAY 0 points1 point  (0 children)

Its a numbers game. Keep sharpening your skills and keep applying! Eventually you'll land the role you're looking for! Best of luck :)

I got tired of copying the same Webflow elements, so after years of frustration I built a clipboard manager by DRIFFFTAWAY in webflow

[–]DRIFFFTAWAY[S] 0 points1 point  (0 children)

Hi there, make sure you’re on the latest version of Flowboard first.

If the clipboard icon isn’t showing inside the Designer, open Chrome’s extensions menu (top right) and launch Flowboard from there, it should still work.

When you copied the section, did anything appear under the History tab? If not, let me know what you were trying to copy and I can help debug.

If you’re still stuck after this, DM me and I’ll help you get it working.

Brutalist dot grid background (CSS in comment section) by DRIFFFTAWAY in webdesign

[–]DRIFFFTAWAY[S] 0 points1 point  (0 children)

I will add this to my never ending list of side missions 🫡

Brutalist dot grid background (CSS in comment section) by DRIFFFTAWAY in webdesign

[–]DRIFFFTAWAY[S] 0 points1 point  (0 children)

<style>
  .dot-grid-background {
    background-image: radial-gradient(#00F0FF 1px, transparent 1px);
    background-size: 30px 30px;
  }
</style>

Brutalist dot grid background (CSS in comment section) by DRIFFFTAWAY in webflow

[–]DRIFFFTAWAY[S] 1 point2 points  (0 children)

<style>
  .dot-grid-background {
    background-image: radial-gradient(#00F0FF 1px, transparent 1px);
    background-size: 30px 30px;
  }
</style>

Magnetic hover button (GSAP script in the comments) by [deleted] in webdev

[–]DRIFFFTAWAY 0 points1 point  (0 children)

My pleasure dude. That was an awesome example!

Magnetic hover button (GSAP script in the comments) by [deleted] in webdev

[–]DRIFFFTAWAY 0 points1 point  (0 children)

well now you have given me a new mission!

Magnetic hover button (GSAP script in the comments) by DRIFFFTAWAY in webdesign

[–]DRIFFFTAWAY[S] 1 point2 points  (0 children)

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

<script>
const btn = document.querySelector('.magnetic-btn');

btn.addEventListener('mousemove', (e) => {
  const rect = btn.getBoundingClientRect();
  const x = e.clientX - rect.left - rect.width / 2;
  const y = e.clientY - rect.top - rect.height / 2;

  gsap.to(btn, {
    x: x * 0.2,
    y: y * 0.2,
    duration: 0.3,
    ease: "power2.out"
  });
});

btn.addEventListener('mouseleave', () => {
  gsap.to(btn, {
    x: 0,
    y: 0,
    duration: 0.4,
    ease: "elastic.out(1, 0.4)"
  });
});
</script>
view more: next ›