jessep

jessep

@jessep.fi

Doing projects around web dev, design, vector & 3D graphics jessep.fi

83 followers432 following16 posts

jessep
@jessep.fi

Made this 3D animated puppy that I rendered into a 2D 1-bit style spritesheet CSS animation for my website. Weekend project went a bit overtime, but had to get it done before I'm off travelling 😪

View full thread
jessep
@jessep.fi

Made this 3D animated puppy that I rendered into a 2D 1-bit style spritesheet CSS animation for my website. Weekend project went a bit overtime, but had to get it done before I'm off travelling 😪

View full thread
jessep
@jessep.fi

I initially used the technique from the article. To animate the `object-position` which I liked a lot, and since my animation was so long I had to wrap it to multiple rows so as to not exceed WEBP maximum width, which required me to move the sprite's X and Y frame position at separate intervals.

jessep
@jessep.fi

I got it working on Chrome by doing 2 animations on the position values of the custom properties for the X and Y values. Sadly I had to switch last minute to a better supported method of `overflow: hidden` + `translate` as I noticed that Firefox did not like my way of animating the variables 😵

jessep
@jessep.fi

Made this 3D animated puppy that I rendered into a 2D 1-bit style spritesheet CSS animation for my website. Weekend project went a bit overtime, but had to get it done before I'm off travelling 😪

You are up to date.