Transition a linear-gradient background from an RGBA background - html

Question

Before I start, I understand that linear-gradients cannot be transitioned through the traditional transition in CSS. I know that gradients are treated as images. Here is my problem. I have a navbar in my website. I am working with materialize css as my framework. When a user visits my website, the navbar is a transparent white color, as the user scrolls, I would like my navbar to transition at a certain point, to the linear gradient. Would this be possible? Here is my markup:
$(document).ready(function(){
$('.sidenav').sidenav();
const parallax = () => {
let wScroll = $(window).scrollTop();
if (wScroll > 400) {
$("nav").addClass("bgchange");
} else {
$("nav").removeClass("bgchange");
}
};
parallax();
$(window).scroll(function() {
parallax();
});
});
.navlogo {
position: relative;
height: 55px !important;
width: 55px !important;
margin-top: 10px;
}
.bgchange {
z-index: 10;
background: linear-gradient(to right, #00BAA3, #1565c0) !important;
}
.navbar-fixed {position: absolute; z-index:10;}
.trans{
background-color: rgba(255,255,255,0.25) !important;
transition: all 0.7s ease-in-out;
}
input {
outline-style:none;
box-shadow:none;
border-color:transparent;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 40px white inset !important;
}
.sidenav .user-view .background img {
width: 100%;
height: 100%;
position: relative;
}
.sidenav .user-view {
height: 240px;
background-color: rgba(0, 0, 0, 0.5);
}
.name {
display: inline-block;
line-height: 15px;
}
.sale {
text-transform: uppercase;
font-weight: 900;
margin: 0 0 1rem;
padding: 0;
line-height: 1;
font-family: Futura, Helvetica, sans-serif;
font-size: 26px;
}
.brand-logo .text {
display: inline-block;
position: absolute;
margin-top: 18px;
margin-left: 5px;
text-transform: uppercase;
font-weight: 900;
padding: 0;
line-height: 1;
font-family: Futura, Helvetica, sans-serif;
font-size: 26px;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet"/>
<div class="navbar-fixed">
<nav class='trans'>
<div class="nav-wrapper">
<img class='navlogo' src="static/images/IMG_6970.png" alt=""><span class="text">Dog<span>House</span></span>
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Login</li>
<li>Sign up</li>
<li>
<form>
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</li>
</ul>
</div>
</nav>
</div>
<ul class="sidenav " id="mobile-demo">
<li><div class="user-view">
<div class="background">
<img src="static/images/IMG_6971.png">
</div>
<div class="center center-align">
<span class="white-text sale">DogHouse</span>
<span class="white-text name">The only app you will need for when you are on your dream vacation.</span>
<span class="white-text email"><br>doghouse#gmail.com</span>
</div>
</div></li>
<li><i class="material-icons">supervisor_account</i> Login</li>
<li>
<form>
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</li>
</ul>

Answer 1

Rather than trying to animate the background gradient, I suggest you create a pseudo element on your navigation, absolutely positioned with a z-index of 0. Then just transition the opacity of the pseudo element.
Below is the updated code, it's worth noting I only changed the CSS:
$(document).ready(function() {
$('.sidenav').sidenav();
const parallax = () => {
let wScroll = $(window).scrollTop();
if (wScroll > 400) {
$("nav").addClass("bgchange");
} else {
$("nav").removeClass("bgchange");
}
};
parallax();
$(window).scroll(function() {
parallax();
});
});
.navlogo {
position: relative;
height: 55px !important;
width: 55px !important;
margin-top: 10px;
}
.bgchange {
z-index: 10;
/* this is now being applied to the pseudo element */
/* background: linear-gradient(to right, #00baa3, #1565c0) !important; */
}
.navbar-fixed {
position: absolute;
z-index: 10;
}
.trans {
background-color: rgba(255, 255, 255, 0.25) !important;
/* this is now being applied to the pseudo element */
transition: all 0.7s ease-in-out;
}
input {
outline-style: none;
box-shadow: none;
border-color: transparent;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 40px white inset !important;
}
.sidenav .user-view .background img {
width: 100%;
height: 100%;
position: relative;
}
.sidenav .user-view {
height: 240px;
background-color: rgba(0, 0, 0, 0.5);
}
.name {
display: inline-block;
line-height: 15px;
}
.sale {
text-transform: uppercase;
font-weight: 900;
margin: 0 0 1rem;
padding: 0;
line-height: 1;
font-family: Futura, Helvetica, sans-serif;
font-size: 26px;
}
.brand-logo .text {
display: inline-block;
position: absolute;
margin-top: 18px;
margin-left: 5px;
text-transform: uppercase;
font-weight: 900;
padding: 0;
line-height: 1;
font-family: Futura, Helvetica, sans-serif;
font-size: 26px;
}
/* pseudo element */
.trans::before {
background: linear-gradient(to right, #00baa3, #1565c0);
bottom: 0;
content: '';
display: block;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
transition: all 0.7s ease-in-out;
z-index: 0;
}
.trans.bgchange::before {
opacity: 1;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet" />
<div class="navbar-fixed">
<nav class='trans'>
<div class="nav-wrapper">
<a href="#!" class="brand-logo "><img class='navlogo' src="static/images/IMG_6970.png" alt=""><span class="text">Dog<span>House</span></span>
</a>
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Login</li>
<li>Sign up</li>
<li>
<form>
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</li>
</ul>
</div>
</nav>
</div>
<ul class="sidenav " id="mobile-demo">
<li>
<div class="user-view">
<div class="background">
<img src="static/images/IMG_6971.png">
</div>
<div class="center center-align">
<span class="white-text sale">DogHouse</span>
<span class="white-text name">The only app you will need for when you are on your dream vacation.</span>
<span class="white-text email"><br>doghouse#gmail.com</span>
</div>
</div>
</li>
<li><i class="material-icons">supervisor_account</i> Login</li>
<li>
<form>
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</li>
</ul>
CodePen example: https://codepen.io/samwalker/pen/KeOXBa