Hello Everyone i’m trying to recreate this text effect on my webflow website: the hubspot main page website (the animation in the header) but i can’t find the proper name of the effect or how to do it, was wondering if someone here could guide me.
Thanks a lot
This effect is commonly called a text reveal, word swap, or text mask animation. The technique involves clipping overflow on a container and animating the Y position of text elements.
Here is a codepen GSAP example you can deconstruct.
Hello @altitudec ,
What @webdev shared is exactly it, but if you want to see how to implement the same concept in a webflow clonable take a look at this Infinite Text Rotation / Changer (Seamless Loop) - Webflow. I hope this helps!
hey there @Pablo_Cortes thanks a lot for this. I was able to add it to my project and edit it. However i’m having a bit of difficulty editing the color of the word that’s “in view” i would like to put another color besides purple i was wondering if that was possible. and how to change the placement of the highlight as well if we don’t have the same number of vertical text as the original template ?
Hello @altitudec,
Yes you can edit the color in the interactions panel, or if you exported it as a variable you can just edit the variable
The original text has 4 sets of 6 words so if you need less, keep the number consistent, for example if you only need 5 words, you need to delete 4 words from the total, so you will still get 4 sets of 5 words, does that make sense? I hope this helps.
