Hey there!
Anyone have any ideas as to how to do a color fading looping bg like this site
https://www.amandakullman.com/
I tried to make a movie that looped but it rasterizes and isn’t nearly as clean as this.
Any ideas, pointers, thoughts are welcome!
you could stack several colored shape rectangles and let the first fade out after some time. Then the second one… You need to think of a logice here and when, ther first one has to be faded in again. you can work with delay here.
Or the cleaner way: use custom code and add a css animation to the bg.
Thanks for the suggestion… I am playing with it now… seems tricky to get it to sequence continually using the R/M way but I will keep trying to figure out that timing / math – In the meantime do you happen to know where I could find custom code for that – I have been searching but I don’t think my search criteria / prompts are correct 
for example here:
https://codepen.io/joppemuller/pen/EVaBZO
I appreciate that but am having a hard time implementing athat on a single page – I see the BG color in the example code flash on the screen when the page is loading but then it disappears and I feel like I have tried every way of embedding this code on R/M
well, the codepen code has to be changed a tiny bit.
Here is the solution:
Paste this into your custom-code css panel:
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst
{
0% {background: #16a085; left:0px; top:0px;}
25% {background: #1abc9c; left:0px; top:0px;}
50% {background: #9b59b6; left:0px; top:0px;}
75% {background: #8e44ad; left:0px; top:0px;}
100% {background: #16a085; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes myfirst
{
0% {background: #d25c50; left:0px; top:0px;}
25% {background: #edd6aa; left:0px; top:0px;}
50% {background: #96b6c0; left:0px; top:0px;}
75% {background: #724c45; left:0px; top:0px;}
100% {background: #f3b998; left:0px; top:0px;}
}
/* CSS for the text */
.colorchange {
width: 100%;
height:100%;
background:red;
/* Chrome, Safari, Opera */
-webkit-animation-name:myfirst;
-webkit-animation-duration:10s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
/* Standard syntax */
animation-name:myfirst;
animation-duration:20s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
}
and this into a custom-code-widget code panel:
<div class="colorchange"></div>
Now you only have to size the custom-code-widget to your desire.
Keep in mind, that the colorchange is only visible in preview/published version, not in the designer.
This is AMAZING @neueMeta Thanks so much for your help – I did just as you said and then moved the code widget to the very bottom of the layer order and pinned it full height and width and it seems to be working great!
ONE QUESTION to better understand the way this is set up…
What is the difference between the CHROME, SAFARI, OPERA and the “STANDARD” syntax – you have completely different hex codes in there… Does this mean that the first set (@-webkit-keyframes) will display those colors when viewed in a Chrome, Safari, Opera browser but then all other browsers will display a the second set (@keyframes)??? If so I am assuming that I can just change the hex codes to be identical for both if I want the color change to be the same across all platforms?
Another Question
5 Color limit – right now you have it broken down into increments of 25% but I am assuming if I did increments of 20 % I could get 6 colors in the array and if it were 10% I could get 10 is that correct?
Thanks again
yes of course, you can take the same color-values in both syntaxes. In the example there are different colorcodes for the browsers, I don´t know why though. And as you have assumed, this would mean a different set of colors is displayed depending the browser used.
And yes, you can also just add different steps like 20, 40, 60, 80, 100 or something else.
Sorry to keep bothering you with this @neueMeta however I am having issues where the BG code you have is not responsive when the browser window is resized – I Have tried placing background-size: cover;
background-position: center center; and min-height: 100%; in various places but to no avial
Any suggestions would be greatly appreciated! thanks.
anyone have any ideas?
thx.
well I don´t get your error here.
If you fix the bg element in the middle of the screen and but it in the back of everything and let it be “100% height and width” in the “fix element settings of RM” its totally working.