Issue
I want to create animation similar to lving.io where different text reveals. I tried to recreate this but the animation is not smooth.
I tried assigning different animation delays to the texts, but they are not working in sync. The texts are revealed at the same time when they should be revealing one at a time.
.animation-container {
display: flex;
align-items: center;
height: 1.5em; /* Adjust this based on your content size */
font-size: 1.2em; /* Adjust this based on your design */
overflow: hidden;
}
.base-text {
white-space: nowrap;
}
.spans-container{
margin-left: 5px;
display: flex;
flex-direction: column
}
.word {
margin: 0;
opacity: 0;
animation: fadeInOut 9s linear infinite;
}
.word:nth-child(2) { animation-delay: 3s; }
.word:nth-child(3) { animation-delay: 6s; }
@keyframes fadeInOut {
0% {
opacity: 0;
transform: translateY(100%);
}
15% {
opacity: 1;
transform: translateY(0);
}
30% {
opacity: 1;
transform: translateY(0);
}
45% {
opacity: 1;
transform: translateY(0);
}
60% {
opacity: 0;
transform: translateY(-200%);
}
75% {
opacity: 0;
transform: translateY(-200%);
}
90% {
opacity: 0;
transform: translateY(-200%);
}
100% {
opacity: 0;
transform: translateY(100%);
}
}
<div class="animation-container">
<span class="base-text">The future of home</span>
<div class="spans-container">
<span class="word"> living</span>
<span class="word"> owning</span>
<span class="word"> renting</span>
</div>
</div>
Solution
Have the words be on top of each other before we apply the animation. This will simplify the animation since the words are in the same place, but with the animation offset:
.animation-container {
display: flex;
align-items: center;
height: 1.5em;
/* Adjust this based on your content size */
font-size: 1.2em;
/* Adjust this based on your design */
overflow: hidden;
}
.base-text {
white-space: nowrap;
}
.spans-container {
margin-left: 5px;
display: grid;
}
.word {
margin: 0;
grid-area: 1 / 1 / -1 / -1;
}
<div class="animation-container">
<span class="base-text">The future of home</span>
<div class="spans-container">
<span class="word"> living</span>
<span class="word"> owning</span>
<span class="word"> renting</span>
</div>
</div>
For the animation, we have 3 elements, so our keyframe "active" duration should be 33.33%, since 100% ÷ 3 = 33.33…%. This is so our animations can be offset seamlessly:
■ Visible
◻ Invisible
0%/100% 33.33% 66.66% 0%/100%
1: |■ ■ ■ ■ ■ ■|◻ ◻ ◻ ◻ ◻ ◻|◻ ◻ ◻ ◻ ◻ ◻|■ ■ ■
2: |◻ ◻ ◻ ◻ ◻ ◻|■ ■ ■ ■ ■ ■|◻ ◻ ◻ ◻ ◻ ◻|◻ ◻ ◻
3: |◻ ◻ ◻ ◻ ◻ ◻|◻ ◻ ◻ ◻ ◻ ◻|■ ■ ■ ■ ■ ■|◻ ◻ ◻
.animation-container {
display: flex;
align-items: center;
height: 1.5em;
/* Adjust this based on your content size */
font-size: 1.2em;
/* Adjust this based on your design */
overflow: hidden;
}
.base-text {
white-space: nowrap;
}
.spans-container {
margin-left: 5px;
display: grid;
}
.word {
margin: 0;
grid-area: 1 / 1 / -1 / -1;
animation: fadeInOut 9s infinite both;
}
.word:nth-child(2) {
animation-delay: -6s;
}
.word:nth-child(3) {
animation-delay: -3s;
}
@keyframes fadeInOut {
0%, 33.33%, 100% {
opacity: 1;
transform: translateY(0);
}
33.34% {
opacity: 0;
transform: translateY(-100%);
}
99.9% {
opacity: 0;
transform: translateY(100%);
}
}
<div class="animation-container">
<span class="base-text">The future of home</span>
<div class="spans-container">
<span class="word"> living</span>
<span class="word"> owning</span>
<span class="word"> renting</span>
</div>
</div>
We then add some animation either side of 0% and 33%. It should be the same percentage amount so that the outgoing and ingoing animation happen together and at the same speed. For example, 10%:
■ Visible
◻ Invisible
◧ Transitioning out
◨ Transitioning in
0%/100% 33.33% 66.66% 0%/100%
1: |■ ■ ■ ■ ■|◧|◻ ◻ ◻ ◻ ◻ ◻|◻ ◻ ◻ ◻ ◻|◨|■ ■ ■
2: |◻ ◻ ◻ ◻ ◻|◨|■ ■ ■ ■ ■ ◧|◻ ◻ ◻ ◻ ◻|◻|◻ ◻ ◻
3: |◻ ◻ ◻ ◻ ◻|◻|◻ ◻ ◻ ◻ ◻ ◨|■ ■ ■ ■ ■|◧|◻ ◻ ◻
23.33% 90%
The trick is to ensure the 10% transitioning overlaps by subtracting/adding 10% to the appropriate keyframe.
.animation-container {
display: flex;
align-items: center;
height: 1.5em;
/* Adjust this based on your content size */
font-size: 1.2em;
/* Adjust this based on your design */
overflow: hidden;
}
.base-text {
white-space: nowrap;
}
.spans-container {
margin-left: 5px;
display: grid;
}
.word {
margin: 0;
grid-area: 1 / 1 / -1 / -1;
animation: fadeInOut 9s infinite both;
}
.word:nth-child(2) {
animation-delay: -6s;
}
.word:nth-child(3) {
animation-delay: -3s;
}
@keyframes fadeInOut {
0%, 23.33%, 100% {
opacity: 1;
transform: translateY(0);
}
33.33% {
opacity: 0;
transform: translateY(-100%);
}
90% {
opacity: 0;
transform: translateY(100%);
}
}
<div class="animation-container">
<span class="base-text">The future of home</span>
<div class="spans-container">
<span class="word"> living</span>
<span class="word"> owning</span>
<span class="word"> renting</span>
</div>
</div>
Answered By - Wongjn
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.