Animated Text Help

Hey! I found a code I'd like to use to have a piece of animated text on one of my pages. Changing the position from absolute to relative aligns the text center but the text now displays one below the other (rather then appearing directly under the stationary text) Also, it seems to cut the top of the text off too.

URL if needed: https://ftws-progress.squarespace.com/config/design
Password: happy123

I have copied the code used below:

In code block on the page:

 <CENTER><h2>ARE YOU READY TO
    <div class="fadeIn">
      <span>BREAK THE MOULD?</span>
      <span>ELEVATE YOUR BRAND?</span>
      <span>SOAR WITH CONFIDENCE?</span>
      <span>GET STARTED?</span>
    </div>
  </h2></center>

In Design > CSS:

/*FadeIn*/
.fadeIn{
    display: grid;
    text-indent: 0px;
}
.fadeIn span{
    animation: fadeEffect 10.5s linear infinite 0s;
    -ms-animation: fadeEffect 10.5s linear infinite 0s;
    -webkit-animation: fadeEffect 10.5s linear infinite 0s;
    color: #F9F3F3;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}
.fadeIn span:nth-child(2){
    color: #F9F3F3;
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
} 
.fadeIn span:nth-child(3){
    color: #F9F3F3;
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}
.fadeIn span:nth-child(4){
    color: #F9F3F3;
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
}

/*FadeIn Animation*/
@-moz-keyframes fadeEffect{
    0% { opacity: 0; }
    5% { opacity: 0; -moz-transform: translateY(0px); }
    10% { opacity: 1; -moz-transform: translateY(0px); }
    25% { opacity: 1; -moz-transform: translateY(0px); }
    30% { opacity: 0; -moz-transform: translateY(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-webkit-keyframes fadeEffect{
    0% { opacity: 0; }
    5% { opacity: 0; -webkit-transform: translateY(0px); }
    10% { opacity: 1; -webkit-transform: translateY(0px); }
    25% { opacity: 1; -webkit-transform: translateY(0px); }
    30% { opacity: 0; -webkit-transform: translateY(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes fadeEffect{
    0% { opacity: 0; }
    5% { opacity: 0; -ms-transform: translateY(0px); }
    10% { opacity: 1; -ms-transform: translateY(0px); }
    25% { opacity: 1; -ms-transform: translateY(0px); }
    30% { opacity: 0; -ms-transform: translateY(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

Thanks in advance

https://ftws-progress.squarespace.com/?noredirect

Can you take a screenshot of problem?

@tuanphan Please find attached. There are 4 lines of text that appear one after the other but rather then appearing in place of each other, they appear leaving a gap and the top of the text is cut off.

6 hours ago, Vicks said:

 

it looks like your span has position relative and not absolute as in the code above..
I have updated the code:

1. made the grid container relative, so that all child follow absolute position from this grid.
2. made the spans absolute.
3. added line-height so not crop the texts.
4. aligned the items to center, because they all will stick to left once positioned absolute.

.fadeIn{
    display: grid;
    text-indent: 0px;
    position:relative;
    justify-items: center; // align items to center
    line-height: 1.2em;  // added bigger line height so that element doesnt cut off from top
}

.fadeIn span{
	position: absolute; 
}

if the posittion absolute in .fadeIn span doesnt work, try " absolute !important; "

hope this helps

You are an absolute diamond, thank you so much!

Don't suppose you can help with a media query to get it to show properly on mobile? When I add one it doesn't seem to make any difference. Thanks

5 hours ago, FTWSGEM said:

Don't suppose you can help with a media query to get it to show properly on mobile? When I add one it doesn't seem to make any difference. Thanks

I see its the middle text which is spans across three lines and overlaps the paragraph below a little. is it what you want to fix?

Perhaps you want to reduce the font size a bit? 

Or add height to the fadeIn section so it stays constant and keep some separation with paragraph below. 

something like this:

@media screen and (max-width: 767px) {
	.fadeIn {
		min-height: 70px;
	}
}

That should work, though I would design it in a different way so that it doesn't float on top of other elements.

Yes, that is what is causing problems on mobile. Is there a way to only reduce the font size of the fade in on mobile only? I like the way is displays on desktop.

8 hours ago, Vicks said:

I see its the middle text which is spans across three lines and overlaps the paragraph below a little. is it what you want to fix?

Perhaps you want to reduce the font size a bit? 

Or add height to the fadeIn section so it stays constant and keep some separation with paragraph below. 

something like this:

@media screen and (max-width: 767px) {
	.fadeIn {
		min-height: 70px;
	}
}

That should work, though I would design it in a different way so that it doesn't float on top of other elements.

5 hours ago, FTWSGEM said:

Yes, that is what is causing problems on mobile. Is there a way to only reduce the font size of the fade in on mobile only? I like the way is displays on desktop.

 

Its the same code, just use font-size property to update the font size, you can stack multiple media queries starting from bigger to smaller like this:

@media screen and (min-width: 1200px) {
    .fadeIn {
        font-size: 0.9rem;
    }
}

@media screen and (min-width: 768px) {
    .fadeIn {
        font-size: 0.7rem;
    }
}

@media screen and (min-width: 480px) {
    .fadeIn {
        font-size: 0.5rem;
        min-height: 10px; // If on smaller screen, the height is too much, you can reduce it too. 
    }
}

Just play around with different screen sizes and add breakpoints and adjust your sizes and margins wherever the layout is breaking.

applying style to .fadeIn will only change the size of fading text, not the "ARE YOU READY TO" part of it. If you want to change the whole text size, you need to apply another class to your h2 element and use that class to adjust the font size.

On 4/16/2023 at 9:56 AM, Vicks said:

 

it looks like your span has position relative and not absolute as in the code above..
I have updated the code:

1. made the grid container relative, so that all child follow absolute position from this grid.
2. made the spans absolute.
3. added line-height so not crop the texts.
4. aligned the items to center, because they all will stick to left once positioned absolute.

.fadeIn{
    display: grid;
    text-indent: 0px;
    position:relative;
    justify-items: center; // align items to center
    line-height: 1.2em;  // added bigger line height so that element doesnt cut off from top
}

.fadeIn span{
	position: absolute; 
}

if the posittion absolute in .fadeIn span doesnt work, try " absolute !important; "

hope this helps

Hi @Vicks & @FTWSGEM! This is exactly what I've been trying to create, thank you so much for sharing your knowledge! 

I've got this partially working, but am having some difficulties with the text cutting off. I see that I can keep increasing the line height to help, but it forces my text down. It seems that my container is collapsing, is there a better way to resolve?

https://toucan-vuvuzela-r235.squarespace.com/about
pw: illume

Bump, wondering if @tuanphan, @Ziggy or @creedon might have insight?

Use this code to Website Tools > Custom CSS

h3.preFade.fadeIn {
    position: relative !important;
    top: -20px;
}