Flipping word animation effect

Question

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.

Answer 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:

• StackExchange q/a about replacing text without any big effects
• Code example for a kind of typing-new-words-effect - by the way, typewriter effect css might be what you want
• Guide for different way to swapping out text, not necessarily a looping animation tho
• Code example for replacing words in a loop with a kind of 'swoosh' effect
• StackExchange q/a about rotating words with fancy layout and blur effect
• StackExchange about literally flipping/rotating objects

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 :)