Animated Typing Font - Help

Site URL: https://www.subjectresources.com

Hello, 

I would like to add a typing font animation similar to this website homepage https://sketchwow.com/lifetime/?utm_source=google&utm_medium=cpc&utm_campaign=search&gclid=Cj0KCQjwkruVBhCHARIsACVIiOx-3cEDj4qxi2cZW7ApHpTddEIJB2JDkwdKgpC08bKwxhAcZMj07aEaAh7vEALw_wcB

Can someone help me? 

You can choose an animated text here, then share url, we can convert it to Squarespace

https://codepen.io/tag/typewriter

Thank you, I have uploaded the code you put on another post. 

Can you help me change the individual colours for each typed out word? I would like them to match the colours below where the icons are.

Also, I would like the main body of the text to be centralised 

Here is the URL for the website where it is currently live www.subjectresources.com

Thanks!

20 hours ago, Stevey1919 said:

Thank you, I have uploaded the code you put on another post. 

Can you help me change the individual colours for each typed out word? I would like them to match the colours below where the icons are.

Also, I would like the main body of the text to be centralised 

Here is the URL for the website where it is currently live www.subjectresources.com

Thanks!

#1. Use this CSS

/* center animate text */
div#block-yui_3_17_2_1_1655750353188_38269 .container {
    text-align: center;
}

#2. Try this

span[data-words*="Drama"] span {
    color: red !important;
}

span[data-words*="English"] span {
    color: green !important;
}

span[data-words*="Maths"] span {
    color: blue !important;
}

Hi Tuan 

The centre CSS worked but now I have the whole line moving back and forward when the typing animation happens. I would like the main body text to stay exactly where it is. 

The colour CSS did not work. Is there a way we can add a specific hex code to the code so that I can colour match for the right colour?