Spring Animation with GLSL Shader
My favorite (and probably the most complex) part of our new callstack.ai website is the DeepCode Engine card. It starts out as a blank, black section, and smoothly reveals its contents when scrolled into view, using multiple synchronised animations:
We have started out with an animation rendered with Cinema 4D and exported in the Lottie format (more on that later). Our initial idea was to animate a gradient background using css (since you can totally do that) while the animation plays, but it just didn’t feel right.
Css gradients are linear, and stacking them doesn’t always work that well - we needed more complexity to achieve the same effect we use elsewhere on our website. We have decided that css gradients are not enough for our use-case, and we needed to use a shader instead.
The overall theme of the website is Physical phenomena, mainly light interactions with different mediums, such as dispersion. We wanted the reveal animation to reflect that theme, so we have started with a simple light rings with simulated “dispersion”.
