Rileyhemp

Since css @keyframes don't let you jump to a certain point in the animation, I had to do it with GSAP and it was a nightmare. Here's what I had to go through to just add a simple day/ night cycle. let day = gsap.timeline({ paused: true, defaults: { ease: "linear" } }) .to(nightskyOpacity, { value: 1, duration: sunriseTime - .05 }) .to(nightskyOpacity, { value: 0, duration: 0.05 }) .to(sunsetOpacity, { value: 1, duration: 0.05 }, "<") .to(nightOpacity, { value: 0, duration: 0.07 }, "<") .to(sunsetOpacity, { value: 0, duration: 0.02 }, "<+.05") .to(sunsetOpacity, { value: 1, duration: 0.02 }, `>${dayLength}`) .to(nightOpacity, { value: 1, duration: 0.07 }, "<") .to(nightskyOpacity, { value: 1, duration: 0.05 }, "<.02") .to(sunsetOpacity, { value: 0, duration: 0.05 }, "<") .to(nightskyOpacity, { value: 1, duration: 1 - sunsetTime - .05 }) day.progress(now) Everything is dependent on everything else and the math lining up exactly. If GSAP let me use keyframes, it would have looked something like this: @keyframes { 0%{ nightSkyOpacity : 1; sunsetOpacity : 0; } ${sunsetTime - 0.02} { nightSkyOpacity : 1; sunsetOpacity : 0; } ${sunsetTime} { nightSkyOpacity : 0; sunsetOpacity : 1; } ${sunsetTime + .0.5} { sunsetOpacity : 0; } etc... } Did I make this way too hard on myself or is that really how gsap.timeline wants me to do things? Feels super fiddly when you start dealing with relative values.