@ZachSaucier Thank you for taking the time to explain how to code more efficiently with gsap, this is what I ended up with:
const colors1 = ['#ffae65', '#ffd898', '#acaf9d'];
const colors2 = ['#110029', '#f61317', '#ffa600'];
const colors3 = ['#ffb72f', '#e1ceb7', '#8199ac'];
const colors4 = ['#ffb72f', '#e1ceb7', '#8199ac'];
const colors5 = ['#ffb075', '#ff8c73', '#e0508c'];
const colors6 = ['#ffb075', '#ff8c73', '#e0508c'];
const colors7 = ['#00f050', '#00f050', '#00f050'];
const gradTl = gsap.timeline({defaults: { duration:1, stagger:.2,ease:"Power4.inOut" } });
gradTl.to("#gradient stop", {keyframes: [
{stopColor: (i) => colors1[i]},
{stopColor: (i) => colors2[i]},
{stopColor: (i) => colors3[i]},
{stopColor: (i) => colors5[i]},
{stopColor: (i) => colors6[i]},
{stopColor: (i) => colors7[i]}
]});
gsap.from("#sun", 10, {y:200,ease:"Power4.inOut"})
The bit I am still unsure of is how to loop through the colors arrays in a timeline tween.