Rotate Text Webflow Style
I like the way the text rotates on the Webflow Homepage and since I couldn't find any existing resources I recreated it. I found a really great article and detailed instructions by Keenan Payne that basically did what I wanted. So I adapted it a little to fit my needs and tried to keep it really simple.
The main challenges were to make it loop infinitely with the correct keyframes, to get the words to follow each other by fine-tuning the delays and to get the move out effect just right - which I think I pretty much nailed with these settings.
Things to note
- The structure is kept really simple. I added all necessary CSS animations into an embed.
- For the demo I choose to work with 4 words and a total animation length of 10 seconds to make the time/percentage/keyframe calculations easy to follow by not complicating it with uneven fractions.
- I know I could shorten the keyframe instructions a little by combining them but for a bit more clarity I kept all stages on their own lines.
- For further reading please refer to the credits below. Keenan and Chris explained the underlying logics very well and I couldn't do it better.