Hi there,
I have the following fiddle which fades in text one word at a time.
What I would like to do is have some words fade to a different colour after a period of time, like this example (second section down)
I have tried adding the following to one of the words, but doesn’t seem to work.
h2.fadeIn span:nth-of-type(6){
animation-delay: 2.5s;
.dark{
color: #ff0000;
}
}
Any ideas how I can achieve this?
Thanks!
You can set up another animation to change the color.
e.g.
.container h2.fadeIn .launch{
animation: fadeIn 0.5s 3s ease-out forwards, changeColor 3s 6s ease-out forwards;
}
@keyframes changeColor{
to{color:red;}
}
<span class="launch">launch</span>
Or use nth-of-type instead of classes.
You will have to restate the animation delay etc and set up different keyframes if you want different colors on different elements.
Many thanks for that.
I now have this which kind of works, but the timing of the launch class seems to be out. Do I need to change the timing in the launch class or the fadeIn from the original
You’d have to change it on each as you have different timings.
Ignore the launch class and do something like this.
/*
.h2.fadeIn .launch{
}
*/
@keyframes changeColor{
to{color:red;}
}
h2.fadeIn span:nth-of-type(3){
animation: fadeIn 0.5s 1s ease-out forwards, changeColor 1s 2s ease-out forwards;
}
h2.fadeIn span:nth-of-type(4){
animation: fadeIn 0.5s 1.3s ease-out forwards, changeColor 1s 2.5s ease-out forwards;
}
h2.fadeIn span:nth-of-type(5){
animation: fadeIn 0.5s 1.6s ease-out forwards, changeColor 1s 3s ease-out forwards;
}
h2.fadeIn span:nth-of-type(6){
animation: fadeIn 0.5s 1.8s ease-out forwards, changeColor 1s 3.55s ease-out forwards;
}
You don’t want the changeColor to start until the related item has faded in and so is different for every item. The above is pretty close but adjust to suit 
(I’m assuming you still wanted one word at a time to fade in and not the whole block as your fiddle?)
Many thanks! That has worked great, thanks!
My next thing is have it animate when the user scrolls into the view of the element? I have tried some JS, but can’t get it to work. I guess I need to post that in the JS forum?
I’ve noticed this doesn’t work in Firefox 
It worked in Firefox when I checked.
Back tomorrow now.
This is what I see in Firefox:
I think it could be this culprit:
h2.fadeIn span{
opacity: 0;
....
When i remove that in developer tools, the text appears, but when removing it from the CSS, it no longer has the fade in effect and just appears as text.
It’s working on the fiddle in Firefox.
Are you looking at your real page or another fiddle.?
You can use the JS intersection observer for that and add a class when in the viewport and then you use that class in the animation rules. Probably best to ask in the JS forum though as I am out a lot of today.
I just added the word colouring to an old demo of mine that was using intersection observer so you can see the effect.
It’s pretty straight forward and adds a class when the element is in the viewport and that class triggers the animation.
Many thanks for that.
I have now updated this fiddle, but I can’t seem to get it to work:
I’m not sure if I have classes correct?
Also, I am getting an error on this line:
entries.map((entry, index) => {
It says index is defined, but not used.
Any ideas what I gave done wrong here?
Thanks!
You only needed part of that code as the rest in my example was for fixed background changes. Here’s the code for your html and word change only.
(function (d) {
"use strict";
const myBG = d.querySelectorAll(".fadeIn");
let options = {
root: null,
rootMargin: "0px",
threshold: 0.1
};
function calculateVisibleDiv(entries) {
entries.map((entry, index) => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
} else {
entry.target.classList.remove('active');
}
});
}
let observer = new IntersectionObserver(calculateVisibleDiv, options);
myBG.forEach((entry) => {
observer.observe(entry);
});
})(document);
Next you need to put the active class on the css to trigger it to start (you were also missing the fadeIn keyframes).
h2.fadeIn.active span{
opacity: 0;
transform: translateY(30px);
animation: fadeIn 0.5s ease-out forwards;
display:inline-block;
font-size: 80px;
font-weight: 500;
padding-right: 15px;
}
h2.fadeIn.active span:nth-of-type(1){
animation: fadeIn 0.5s .5s ease-out forwards;
&:after{
content: "";
background-image: url(../images/stars-top-left-white.svg);
background-size: cover;
position: absolute;
top: -50px;
left: -95px;
width: 90px;
height: 90px;
display: inline-block;
animation: fadeIn 0.8s .5s ease-out forwards;
}
}
h2.fadeIn.active span:nth-of-type(2){
animation: fadeIn 0.5s 1s ease-out forwards;
}
h2.fadeIn.active span:nth-of-type(3){
animation: fadeIn 0.5s 1.5s ease-out forwards, changeColor 1s 8s ease-out forwards;
}
h2.fadeIn.active span:nth-of-type(4){
animation: fadeIn 0.5s 2s ease-out forwards, changeColor 1s 8.5s ease-out forwards;
}
h2.fadeIn.active span:nth-of-type(5){
animation: fadeIn 0.5s 2.5s ease-out forwards, changeColor 1s 9s ease-out forwards;
}
h2.fadeIn.active span:nth-of-type(6){
animation: fadeIn 0.5s 3s ease-out forwards, changeColor 1s 9.5s ease-out forwards;
}
h2.fadeIn.active span:nth-of-type(7){
animation: fadeIn 0.5s 3.5s ease-out forwards;
}
h2.fadeIn.active span:nth-of-type(8){
animation: fadeIn 0.5s 4s ease-out forwards;
}
h2.fadeIn.active span:nth-of-type(9){
animation: fadeIn 0.5s 4.5s ease-out forwards;
}
h2.fadeIn.active span:nth-of-type(10){
animation: fadeIn 0.5s 5s ease-out forwards;
}
h2.fadeIn.active span:nth-of-type(11){
animation: fadeIn 0.5s 5.5s ease-out forwards;
}
h2.fadeIn.active span:nth-of-type(12){
animation: fadeIn 0.5s 6s ease-out forwards;
}
h2.fadeIn.active span:nth-of-type(13){
animation: fadeIn 0.5s 6.5s ease-out forwards;
}
h2.fadeIn.active span:nth-of-type(14){
animation: fadeIn 0.5s 7s ease-out forwards;
}
@keyframes changeColor{
to{color:#ff0000;}
}
@keyframes fadeIn{
to{opacity:1;}
}
That is working when added to your fiddle.
Hi @PaulOB,
I see what you mean now Thanks very much for your help again, really appreciate it.