Animated BG color

Design help General
1

Hello,

I am trying to implement an animated background background.

From what I saw I don’t think I can do it with webflow directly so I was trying to use some custom code.
However, even after following the short tutorial about custom code I still found myself confused.
I tried to embed an element or put it directly in the footer but it doesn’t work at all.

Can anyone tell me how to use this type of code : https://codepen.io/P1N2O/pen/pyBNzX

Thanks in advance !

1 Like
2

Hi there,

Great question, and thanks for posting.

You can do something similar to this using IX2 and changing background colors with different easing options.

But, you can also add the custom code that you referenced within the head tag of your project.

.YourClassNameHere {
	background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
	background-size: 400% 400%;
	-webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

The following short screencapture shows the steps needed to complete the interaction: Screen Recording 2018-05-29...

You can view the project at the following URLs:
Live site - http://animated-background-in-webflow.webflow.io/
Read-only link - Webflow - Animated Background in Webflow

Hopefully this is helpful :blush:

4 Likes
3

I would create a div 100vh x 500vw, fill it up with a gradient bg of different colors. Then add a page animation of this div moving slow from right to left, then back, and loop.

2 Likes
4

Oh wow, thank you so much for the very detail answer and the video. That was just so helpfull !
It just works perfectly well now ! Thank you again !

1 Like
5

That’s a neat idea too ! Thank you !

6

No problem at all! Glad I could help! :bowing_man:

1 Like
7

thank you for sharing