How can I make each word pause in the middle for a second before scrolling up to the next?

Question

My code here scrolls up smoothly but I want each word to pause in the middle for a second before scrolling to the next word while keeping the infinite loop?

<div id="scroll-container">
 <div id="scroll-text">
 <h1>
 Wellbeing<br>
 Mental Health<br>
 Healing<br>
 Wellbeing<br>
 Mental Health<br>
 Healing
 </h1>
 </div>
</div>
<style>
#scroll-container {
 position: relative;
 height: 150px; /* adjust based on how many lines you want visible */
 overflow: hidden;
 display: flex;
 align-items: center;
 justify-content: flex-start;
 /* This makes the text fade at top and bottom */
 mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
 -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
}
#scroll-text {
 display: inline-block;
 animation: scroll-up 10s linear infinite;
}
#scroll-text h1 {
 font-weight: 600;
 font-style: normal;
 text-transform: uppercase;
 color: white;
 line-height: 1.4em;
 margin: 0;
 text-align: left;
 font-family: "neue-haas-grotesk-display", sans-serif !important;
}
/* Smooth infinite upward scroll */
@keyframes scroll-up {
 0% {
 transform: translateY(0);
 }
 100% {
 transform: translateY(-50%);
 }
}
</style>

I tired adjusting the keyframes but I can't make it scroll properly nor smoothly.

• Paulie_D: This is not a "simple" animation. You need to map out how long the whole animation will be, including pauses, and then add "stops" at various % values based on the number of items involved.
• A Haworth: Not related to your actual problem, but I notice the movement is jerky. I don't understand why the flex is needed/helpful.
• A Haworth: Is the overall loop to take 13 seconds (the 10s you already have plus 3 words pause)?

Answer 1

I would combined two animations where the second one will move the element in the opposite direction to simulate the pause.

#scroll-container {
 height: 150px;
 overflow: hidden;
 mask: linear-gradient(#0000,#000 20% 80%,#0000);
 background: lightblue;
}
#scroll-text {
 animation: 
 scroll 6s linear infinite,
 pause 2s linear infinite; /* 2s = 6s/3 */
}
#scroll-text h1 {
 font-weight: 600;
 font-style: normal;
 text-transform: uppercase;
 color: white;
 line-height: 1.4em;
 margin: 0;
}
@keyframes scroll {
 to {transform: translateY(-50%)}
}
@keyframes pause {
 50% {translate: 0 8.33%} /* 50%/(3*2) */
}

<div id="scroll-container">
 <div id="scroll-text">
 <h1>
 Wellbeing<br>
 Mental Health<br>
 Healing<br>
 
 Wellbeing<br>
 Mental Health<br>
 Healing
 </h1>
 </div>
</div>

Answer 2

This can be done in CSS provided you know the number of lines in advance.

For 3 lines as in your question, you need to alter the animation so it pauses for 1 second 3 times

This snippet pauses (i.e. doesn't transform the element) at 0%, 33.3333% and 66.6667%.

A one second pause of a 13 second animation (please see my comment on your question ref the overall length of the animation that you want, alter the %s if it is indeed 10 seconds) is 1/13*100%, hence the stop points in the keyframes:

Note: there is a problem with the way that you have implemented the 'fade out' effect, but that's a different question. You will also run into problems having the height determined in px. If you for example increase it you could end up with no 'middle' line. You may like to think about using line height (lh) as a measure rather than px.

<div id="scroll-container">
 <div id="scroll-text">
 <h1>
 Wellbeing<br>
 Mental Health<br>
 Healing<br>
 Wellbeing<br>
 Mental Health<br>
 Healing<br>
 </h1>
 </div>
</div>
<style>
 * {
 padding: 0;
 margin: 0;
 }
 #scroll-container {
 position: relative;
 height: 150px;
 /* adjust based on how many lines you want visible */
 overflow: hidden;
 /* This makes the text fade at top and bottom */
 mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
 -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
 }
 #scroll-text {
 display: inline-block;
 }
 #scroll-text h1 {
 font-weight: 600;
 font-style: normal;
 text-transform: uppercase;
 color: white;
 line-height: 1.4em;
 margin: 0;
 text-align: left;
 font-family: "neue-haas-grotesk-display", sans-serif !important;
 background: black;
 animation: scroll-up 13s linear infinite;
 }
 /* Smooth infinite upward scroll */
 @keyframes scroll-up {
 0%,
 7.69% {
 transform: translateY(0);
 }
 33.3333%,
 41.03% {
 transform: translateY(-16.6667%);
 }
 66.6667%,
 74.36% {
 transform: translateY(-33.3333%);
 }
 100% {
 transform: translateY(-50%);
 }
 }
</style>