EDIT: I succeded in CSS. The issue happens because all the elements are stacked one after another, and their animations are moving them up and down without them being in the proper starting positions: be right below the normal position, right below the visible position. I needed to ensure that each starts from the exact position directly below the visible area, so that it moves up into view without being obstructed by the next in the list.
I want to display a dummy loader, In my loading page when user first land on my site. Better than a long explanation, this is the HTML of the loading page :
<template>
<div class="loader" :class="{ active: isActive }">
<div class="loader__counter">
<div class="counter__number">
<span>0</span>
<span>2</span>
<span>5</span>
<span>8</span>
<span>9</span>
<span>M</span>
</div>
<div class="counter__number-second">
<span>2</span>
<span>4</span>
<span>5</span>
<span>9</span>
<span>L</span>
</div>
</div>
<div class="loader__button" @click="toggleAppActive">Visit Website</div>
<div class="loader__text" v-html="splitLetter('loading')"></div>
</div>
<the-header></the-header>
<main :class="{ app__active: isActive }">
<router-view></router-view>
<div class="footer__area"></div>
</main>
<the-footer></the-footer>
</template>
As you can see, I imagined the loader as numbers that I hard code, I display them side by side. I want a "rolling number" effect, where the numbers inside both .counter__number and .counter__number-second elements are first invisible at the bottom of the element, then move from the bottom to their normal position, visible and pause for a second or so, and then move out from the top (making them invisible). The "rolling effects" ends with the letters, and the user can see the letters in each column: "M" and "L" side by side. (my initials).
This is my inspiration : https://max-milkin.com.ua/ I am training and trying to reproduce the rolling numbers effect of this page.
I imagine using GSAP to animate the vertical translation of each
The steps are:
- Start with the numbers below the container (offscreen using
y:100%)invisible withoverflow: hiddenproperty. - Animate the numbers up to their normal position (
y:0)s that they are visible. - Make a pause in the animation there.
- Continue moving them up to the top (y:-100%) so they disappear.
Moreover, I want to make variations in the rolling effect number, for exemple the "5" in .counter__number-second must stay visible a bit longer than the other numbers ! But it can be handle later :)
This is the css of the loading page:
</script>
<style lang="scss">
.loader {
font-family: "Oswald";
}
.loader__counter {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
text-transform: uppercase;
color: $bckgrnd;
font-size: 3rem;
font-weight: 600;
}
.counter__number,
.counter__number-second {
// position: relative;
// display: flex;
// flex-direction: column;
overflow: hidden;
height: 4rem;
// width: 2rem;
// span {
// display: block;
// position: absolute;
// top: 0;
// width: 100%;
// text-align: center;
// }
}
.counter__number span,
.counter__number-second span {
display: block;
}
.loader__button {
position: absolute;
left: 50%;
top: 60%;
transform: translateX(-50%);
color: $bckgrnd;
font-size: 2.5rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: -0.15rem;
cursor: pointer;
}
.loader__text {
position: absolute;
bottom: 1vh;
left: 2vh;
color: $bckgrnd;
text-transform: uppercase;
font-weight: 600;
font-size: 4rem;
letter-spacing: -0.25rem;
overflow: hidden;
.letter {
display: inline-block;
}
}
.active {
position: fixed;
height: 100%;
width: 100vw;
top: 0;
left: 0;
background-color: $white;
z-index: 100000;
}
.footer__area {
height: 84vh;
pointer-events: none;
@media (min-width: 768px) {
height: 100vh;
}
}
</style>
I tried to animate the "rolling numbers with a pause when visible" effect with GSAP and Keyframes.
This is the try I made with GSAP's timeline for sequential animation: I tried at first with the only one element to make it simplier: .counter__number. This is the whole SCRIPT section of my App.vue component
<script>
import TheHeader from "./layouts/TheHeader.vue";
import TheFooter from "./layouts/TheFooter.vue";
import { gsap } from "gsap";
import { splitLetter } from "@/utils/titleToArray";
export default {
components: {
TheHeader,
TheFooter,
},
mounted() {
this.loaderTextAnimation();
this.counterAnimation();
},
data() {
return {
isActive: "true",
};
},
methods: {
gsap,
splitLetter,
toggleAppActive() {
this.isActive = !this.isActive;
},
loaderTextAnimation() {
gsap.fromTo(
".loader__text .letter",
{
y: "110%",
opacity: 0,
},
{
y: 0,
stagger: 0.1,
opacity: 1,
duration: 1.2,
ease: "expo.out",
}
);
},
counterAnimation() {
const counterNumbers = gsap.utils.toArray(".counter__number span");
console.log(counterNumbers);
counterNumbers.forEach((number, i) => {
console.log("animating number:", number);
const tl = gsap.timeline({
// repeat: -1,
delay: i * 0.2,
});
//// First phase: Move from bottom to normal position (y: 100% -> y: 0%)
tl.fromTo(
number,
{ y: "100%" },
{ y: "0", duration: 1, ease: "expo.out" }
)
//pause at normal position
.to(number, { y: "0%", duration: 0.5 })
//Second phase: Move from normal to top position (y: 0% -> y: -100%)
.to(number, { y: "-100%", duration: 1, ease: "expo.in" });
});
},
},
};
</script>
The loaderTextAnimation works well, the counterAnimation is the animation I have issue with, animation of the numbers.
I commented the overflow: hidden in the css to see thenumbers and how the animation works.
Thanks to the console.log, I have the confiramtion that the animation is set on all the .
I can visualize the numbers in the counter__number element, they are animated. When the page is loaded, the 0 moves immediately to the "normal/visible" position, and so do all the below numbers: they moves up one place,an then moves verticaly to the top. the "2" moves from bottom to the normal position, and so do all the below numbers: they moves up one place. AND then the animation is done, it stops !! In a nutshell: the "2" is visible, the "0" is above the "2" hidden, and the "4" and the rest are below the "2", hidden.
I then tried to handle the animation with CSS, this is the CSS part to handle the animation :
.counter__number,
.counter__number-second {
// position: relative;
display: flex;
flex-direction: column;
// overflow: hidden;
height: 4rem;
// width: 2rem;
}
.counter__number span,
.counter__number-second span {
display: block;
transform: translateY(100%);
}
/* CSS keyframes for rolling effect /
@keyframes roll {
0% {
transform: translateY(100%); / Start hidden below /
}
20% {
transform: translateY(0); / Move to normal position /
}
80% {
transform: translateY(0); / Stay in place /
}
100% {
transform: translateY(-100%); / Move up and disappear */
}
}
/* Apply animation to each number /
.counter__number span:nth-child(1),
.counter__number-second span:nth-child(1) {
animation: roll 4s ease-in-out 0.1s forwards; / Adjust timing as needed */
}
.counter__number span:nth-child(2),
.counter__number-second span:nth-child(2) {
animation: roll 4s ease-in-out 0.2s forwards; /* Add a delay to stagger */
}
.counter__number span:nth-child(3),
.counter__number-second span:nth-child(3) {
animation: roll 4s ease-in-out 0.4s forwards;
}
.counter__number span:nth-child(4),
.counter__number-second span:nth-child(4) {
animation: roll 4s ease-in-out 0.6s forwards;
}
.counter__number span:nth-child(5),
.counter__number-second span:nth-child(5) {
animation: roll 4s ease-in-out 0.8s forwards;
}
.counter__number span:nth-child(6),
.counter__number-second span:nth-child(6) {
animation: roll 4s ease-in-out 1s forwards;
}
Even in CSS, the animation stops when the second range of numbers are visible! the "0" of .counter__number and the "2" of counter__number-second are coming from bottom, stay a bit at visible position, and are going to the top. The "2" and the "4" too, but then nothing happens, it stop as if the animation is done!
I am missing something !! please help me