1

I sometimes sees some effects on websites that allows you to flip the text, for instance

We are a word company.

Where word would flip around a few adjectives like dynamics or smth like that.

Can anyone please let me know what is the name of that effect?

Thank you,

P/S: I know this may seems basic and I will close this question once I got the answer.

5
  • This doesn't need to be React or even JS, you can do it with CSS as well, so I edited your title. I have no idea how to call it other than word replacement or rotating words
    – Devin
    Oct 1, 2022 at 17:48
  • Can you show an example of what you're looking for? I'm not entirely getting it from your description. Oct 1, 2022 at 19:37
  • This reminded me of a flip clock, so if it hasn’t a name already, call it a “flip clock effect”. en.m.wikipedia.org/wiki/Flip_clock
    – jazZRo
    Oct 4, 2022 at 21:40
  • @jazZRo Not quite the perfect one, but should be applicable to me! Oct 5, 2022 at 3:08
  • @RoAchterberg I found it again, on this website, after the " WE ARE COMMUNITY ..." Jan 30, 2023 at 14:59

1 Answer 1

1

I think I know what you mean - correct me if I am wrong. It's also not so basic ;)

Intended effect

From my understanding you want an animation that goes somewhat like this:

  • 0s - 1s: We are a dynamic company
  • 1s - 2s: We are a modern company
  • 2s - 3s: We are an ethical company
  • ...

Battle plan

Funnily enough, I researched something like that a while ago and don't think it has the one name, mostly because it is composed of multiple effects:

  • You need to switch between the different words (can be done in CSS and JS)
  • You want some cool effect on transitioning - blur, spin, typing, whatever (probably going to be a CSS animation)
  • You need some fixes and advanced CSS/JS trickery for the annoying stuff: some words being way longer and thus ugly, unintended line breaks, in the example above the "a/an" stuff, ...

That said, here is...

...a collection of possible relevant resources:

How I did it

Personally, I opted for a kind of simple pure CSS animation, which works like this:

HTML:

<span id="replace-me"></span>.

CSS:

#replace-me {
  color: #4353FF;
}


#replace-me:after {
  content: "entrepreneur";
  animation: spin 12s linear;
  /* loop */
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: running;
}

@keyframes spin {
  0% {
    content: "maker";
  }
  25% {
    content: "entrepreneur";
  }
  50% {
    content: "founder";
  }
  75% {
    content: "creator";
  }
  100% {
    content: "indie hacker";
  }
}

The effect looks like this - this is a project of mine, so I may remove this reference if someone counts it as undue self promotion.

Wrapping Up

Hope this points you in an helpful direction. Since you directly asked what it's called, my best guess would be something like rotate between words switch out words replace words loop typewriter effect or cycle through words. Might have a proper name though, so happy to stand corrected - otherwise maybe you can invent a cool one :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.