search

ssbc / visual-docs

Diagrams and animations documenting Secure Scuttlebutt (scuttlebutt.nz) and Āhau (ahau.io)
https://scuttlebutt.nz
Other
16 stars 1 forks source link

some end values are empty #3

Closed cameralibre closed 3 years ago

cameralibre commented 3 years ago

Sometimes when using multiple keyframes, the final 'to' value is not recorded. Example:

    tl
      .add({
    changeBegin: function(anim) {
          logAnimations(anim)
          console.log(anim)
         },
    targets: '#symbol-wave-a',
        keyframes: [
          { opacity: [0, 1], duration: 500 },
          { opacity: [1, 1], duration: 500 },
          { opacity: [1, 0], duration: 500 },
          { opacity: [0, 1], duration: 500 }
        ],
        delay: anime.stagger(250)
      })

This produces the following CSS:

#symbol-wave-a { animation-name: symbol-wave-a-anim; } 
@keyframes symbol-wave-a-anim {
  0% { opacity:0; }
  25% { opacity:1; }
  50% { opacity:1; }
  75% { opacity:0; }
  100% { }
}
cameralibre commented 3 years ago

https://github.com/ssbc/visual-docs/blob/b49519a37d463cbc543d6929c771e4b174316f81/js/convert-anime-to-css.js#L24-L36

I'm only adding the To values if [tweenStart][animatedProperty] doesn't exist yet - I should be checking [tweenEnd][animatedProperty] instead.