Rotating words animation using 3 words

Hi there,

I am trying to use this animation to rotate between 3 words:

It currently has 24 words, but when I change the

$totalWords: 24;

to

$totalWords: 3;

The animation goes very fast and a bit odd.

Can anyone tell me what I need to do to stop this and just have 3 words rotate at the same speed as the 24 words?

Many thanks!

You’ll need to adjust the multiplier here. You went from 72s (24 * 3) to 9s (3 * 3)

image

1 Like

I see, I have changed this line to;

@include animation(rotateWord, $totalWords * 24 + s, ease-in-out, infinite, 0s);

Which rotates the words at a better speed, but there is a long blank gap at the end now :confused:

Is this better.

I got rid of your prefixes as they were wrong anyway and you don’t need them these days. :slight_smile:

1 Like

That’s awesome, thank you very much.

Which prefixes were removed?

1 Like

All of them :slight_smile:

You had this for MS:

@-ms-keyframes rotateWord {
    0% { opacity: 0; }
    1% { opacity: 0; -webkit-transform: translateY(-30px); }
    2% { opacity: 1; -webkit-transform: translateY(0px); }
    4% { opacity: 1; -webkit-transform: translateY(0px); }
    5% { opacity: 0; -webkit-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

Yet you also used a -webkit prefix inside that ms block!

In theory that should have been ignored by MS and you would have no transform at all. Luckily MS does understand a few of the -webkit prefixes even though it shouldn’t. You probably should have used -ms-transform.

You already had the -webkit keyframes in here anyway.

@-webkit-keyframes rotateWord {
    0% { opacity: 0; }
    1% { opacity: 0; -webkit-transform: translateY(-30px); }
    2% { opacity: 1; -webkit-transform: translateY(0px); }
    4% { opacity: 1; -webkit-transform: translateY(0px); }
    5% { opacity: 0; -webkit-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

However none of those are needed and you only need the real non pre-fixed styles.

@keyframes rotateWord {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
    transform: translateY(-30px);
  }
  20% {
    opacity: 1;
    transform: translateY(0px);
  }
  40% {
    opacity: 1;
    transform: translateY(0px);
  }
  50% {
    opacity: 0;
    transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

You also placed the prefixed styles last in source which means that you may use an old spec instead of the real spec (as happened with border-radius and some others). The real properties should always be the last in source.

Before using a prefix check the caniuse site to see what support is like for that property as once it’s in your code its likely to stay there forever.

1 Like

Ah I see, thank you for explaining. I am fairly new to animations, so still getting to grips with it all!

Yes they take a bit of getting used to but are very useful.

There are often ways of doing the same thing which is why it can seem confusing.

Keyframes define the changes you want over the period of time that you specified. Therefore you do have the ability within the keyframe to make nothing happen for some of the time or stagger when things happen.

If you have an animation of say 10s the that’s how long the keyframe runs. But then in the keyframe you have from 0% - 100% to make those things happen so you can in effect do nothing for 20% and then complete the animation at 80%. So although the animation time was defined as 10 seconds the animation only showed for 6 seconds. There were 2 seconds at either end that may have been doing nothing. :slight_smile:

You also have the ability to delay things happening which is what happens in your words in that each span is delayed before it animates to create the rotation. Otherwise they would all move at the same time.

I think I just made it sound more complex than it is :slight_smile:

1 Like