Animations / Gradients changing color

Hello everybody,

I am trying to re-create gradients alternating colors on loop, like those underlines in this example:

Does somebody know a way to do this in Webflow?

Thanks!


Here is my public share link: LINK
(how to access public share link)

Hey,

I remember seeing this video a while back and think you might find it helpful.

I took at look at the HTML and it looks like the animated text has been placed within a div block. I’d imagine it’s just a series of div blocks on top of each other, that are set to move up and down to reveal the text. When this happens, the text changes colour.

1 Like

Here is the code scraped from the website that you could embed in your project.

.magic-underline { position: relative; display: inline-block; z-index: 2; padding: 0 4px; color: #020202; font-family: freight-display-pro, sans-serif; font-style: italic; font-weight: 600 !important; transition: all 0.5s ease-out } .magic-underline::before, .name:hover { background: linear-gradient(270deg, #ead642, #ca5f33, #db8c99, #4670aa); background-size: 500% 500% } .magic-underline::before { position: absolute; content: ""; height: 3px; width: 100%; bottom: 0; right: 0.01em; z-index: -1; -webkit-animation: Magic 10s ease infinite; -moz-animation: Magic 10s ease infinite; animation: Magic 10s ease infinite; transition: all 0.3s ease } .magic-underline:hover { color: #fff !important } .magic-underline:hover:before { height: 90% } @-webkit-keyframes Magic { 0% { background-position: 0 50% } 50% { background-position: 100% 50% } 100% { background-position: 0 50% } } @-moz-keyframes Magic { 0% { background-position: 0 50% } 50% { background-position: 100% 50% } 100% { background-position: 0 50% } } @keyframes Magic { 0% { background-position: 0 50% } 50% { background-position: 100% 50% } 100% { background-position: 0 50% } }
  <div class="magic-underline">travel</div>

Put the CSS in a style block

Thanks a lot!
I am going to try this out…I need to figure out first how to add custom code :))

1 Like

Custom code can be added in the header or on the page.

Here is an article about adding to the header.
https://university.webflow.com/lesson/custom-code-in-the-head-and-body-tags

Here is an article about embedding in the page.
https://webflow.com/blog/webflow-custom-code-tips

Quote from the article;
"Should I use the custom code area in the page settings or project settings?

The answer to this is simple. Any code you want to apply to every page on the website should go in the project settings. Any code you want to only apply to one or a few particular pages should go in the page settings."

Awesome, I am going to try this, thanks!

1 Like

I don’t think you need to add custom code for this. It can be done using the animations in WF easily enough.

I found another video showing how this type of animation is done. Your example looks very similar. Daily Interaction #6 | Fullscreen Menu with Text Animation | WebDev For You | Made in Webflow - YouTube

Thanks George,

actually I managed to do the animation (this shadow covering the font on hover) without code, but I wanted to have the colors changing on a loop as well, and this I could only achieve with the piece of code ahead.
Thanks to both, it worked!

1 Like