Help needed: Converting Figma design to HTML, CSS, and JS for morphing text effect

Other Questions Figma
1

Hey everyone! I’m a newbie coder and I’m stuck on a project. I’ve got this cool design in Figma with a morphing text effect that changes as you scroll. I’m trying to recreate it using HTML, CSS, and JS, but I’m having trouble getting it right.

Here’s what I’ve got so far:

const coverElement = document.querySelector('#cover-element');
window.addEventListener('scroll', updateCover);

function updateCover() {
  const scrollPosition = window.scrollY;
  const pageHeight = document.body.scrollHeight - window.innerHeight;
  const coverHeight = `${(scrollPosition / pageHeight) * 100}%`

  coverElement.style.height = coverHeight;
}

html, body {
  height: 200vh;
  margin: 0;
  padding: 0;
}

#cover-element {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  background-color: #000;
}

<div id="cover-element"></div>

I’ve tried tweaking the code, but I can’t get the text to morph smoothly like in my design. Any tips or suggestions on how to achieve this effect? Thanks in advance for your help!

2

I’ve encountered similar challenges when working on morphing text effects. Your current approach is a good starting point, but for a smooth transition, you’ll need to incorporate some additional techniques.

Consider using a JavaScript library like Anime.js or GSAP for more fluid animations. These libraries offer powerful tools for morphing between different text states.

Another effective method is to use clip-path in CSS. You can create multiple text elements, position them on top of each other, and use clip-path to reveal/hide portions based on scroll position.

Here’s a basic example:

.text-container {
  position: relative;
}

.text {
  position: absolute;
  top: 0;
  left: 0;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transition: clip-path 0.3s ease;
}

Then update the clip-path in your JavaScript as the user scrolls. This approach can create a smooth morphing effect without relying on complex SVG manipulations.

Remember, perfecting these effects often requires experimentation and fine-tuning. Don’t get discouraged if it takes some time to achieve the desired result.

3

yo, i’ve messed with this kinda stuff before. have u tried using CSS animations? they can be pretty slick for text morphing. maybe try something like this:

@keyframes morph {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

then apply it to ur text element. might need to tweak the values, but it could give u that smooth effect ur after. gl with ur project!

4

I’ve worked on a similar project before, and I can share some insights that might help you out. The approach you’re taking with the scroll event and cover element is a good start, but for a smooth text morphing effect, you’ll need to implement a bit more complex logic.

One technique that worked well for me was using SVG for the text and manipulating the path data based on the scroll position. This allows for smoother transitions between different text shapes. You can create separate SVG paths for each state of your text and interpolate between them as the user scrolls.

Here’s a rough outline of how you could approach this:

  1. Create SVG paths for each text state
  2. Use a library like GreenSock (GSAP) for smoother animations
  3. Calculate the progress based on scroll position
  4. Use the progress to interpolate between SVG paths

The implementation can be a bit tricky, especially if you’re new to coding. You might want to look into some SVG animation libraries or tutorials specifically focused on text morphing effects. It took me a while to get it right, but the end result was worth the effort.

If you’re still struggling, consider breaking down the effect into smaller, manageable parts and tackle them one by one. Good luck with your project!