How to make every single word of the headline animate

Design help Animations & Interactions
1

Can someone show me step by step on how to achieve fade text flow animation with blur

I just want my my headline on the section to look like this: https://codepen.io/alvarotrigo/details/ExvqdNa

2

Hey @Jeet_Shah! You’ll need to wrap each word you want to animate with a span. Then animate each span.

Best of luck!

3

Yes I wrapped every word in the span but then I unable to produce the blur effect. When I set blur to the span, it shows blurred instead of blurring transitioning into full visibility upon fade animation

4

I would just embed the HTML and CSS from that codepen in a div block and then manually change it to your text.

<Html>
<h1 class="h1">
  <span>There</span>
  <span>are</span>
  <span>no</span>
  <span>limits</span>
  <span>to</span>
  <span>what</span>
  <span>you</span>
  <span>can</span>
  <span>accomplish,</span>
  <span>except</span>
  <span>the</span>
  <span>limits</span>
  <span>you</span>
  <span>place</span>
  <span>on</span>
  <span>your</span>
  <span>own</span>
  <span>thinking.</span>
</h1>
</Html>

<Style>
@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");

* {
  padding: 0;
  margin: 0;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h1 {
  font-family: "Helvetica";
  max-width: 40ch;
  text-align: center;
  transform: scale(0.94);
  animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
}
@keyframes scale {
  100% {
    transform: scale(1);
  }
}

span {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
}

span:nth-child(1) {
  animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(2) {
  animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(3) {
  animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(4) {
  animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(5) {
  animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(6) {
  animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(7) {
  animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(8) {
  animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(9) {
  animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(10) {
  animation: fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(11) {
  animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(12) {
  animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(13) {
  animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(14) {
  animation: fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(15) {
  animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(16) {
  animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(17) {
  animation: fade-in 0.8s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(18) {
  animation: fade-in 0.8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
</Style>

<h1 class="h1"> This will use the designers class formatting rather than the HTML. Just change "h1" to your class name.

5

Unfortunately I don’t have the hosting plan so I can’t embed custom code :frowning:

6

I was able to get 80% of the part done which is the fade in effect with scaling headline as whole. But what I can’t figure out is how to make the span go from blurred to full visibility while its animating in the moment. When I set the blur to 4 px for every span, it stays blurred permanently

7

Ah I see! Have you used the “Filter” selection from under actions in the designer?

image
image250Ă—859 18.7 KB

8

Yes I was able to do that way. I had to create a blur animation for every single span separately! Very time consuming all together but it worked in the end! Thanks a ton!!

1 Like
9

No worries! Be sure to mark this as solved, best of luck moving forward!

1 Like