Please add something like css @keyframes

[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. 

[ZachSaucier]

Hey Riley and welcome to the GreenSock forums!

 

First off, that pseudo-CSS keyframes is not equivalent to the GSAP that you wrote above. It's a bit simplified. In CSS you'd have to create an animation for each element, calculate the percent based on the duration, etc. etc. It'd be a lot of work to do something detailed. 

 

Second, GSAP 3 already has keyframes! You can use them like so:

.to(nightskyOpacity, {keyframes: [
  { value: 1, duration: sunriseTime - .05 },
  { value: 0, duration: 0.05 },
  // a bunch of other values affecting nightskyOpacity
]})

This is shorthand for the first two tweens that you have on your timeline.

 

It's unclear what your end goal is exactly just from that code, but if you just want to fade something in and out it could be something as simple as this:

See the Pen bGdEqEp?editors=0010 by GreenSock (@GreenSock) on CodePen

[GreenSock]

@Rileyhemp very sorry to hear about your negative experience. I'm pretty confident there are just some misunderstandings at play and once we clear them up, you'll see that GSAP is waaaaay easier than working with CSS keyframes. 

 

I'd echo @ZachSaucier's comments for sure.

 

I struggled to figure out exactly what you're trying to do with your animation and why you had those super tiny durations, and what the targets are exactly. Are they generic JavaScript objects that you're using for state somehow? And how are you applying the values? 

 

If you could maybe provide more information or (better yet) a demo, we could probably show you how to do it in the most efficient GSAP-y way. Seriously, once you see what's possible I bet you'll never want to go back to CSS  I'd recommend reading this article, as it could really enhance your animation workflow: https://css-tricks.com/writing-smarter-animation-code/ (it uses the old GSAP 2 syntax, but the concepts are the same in GSAP 3)

 

Happy tweening!