From static to interactive: turn SVGs into exciting experiences | The Flourish blog
Have you ever created the perfect static graphic but you just didn’t know how to bring interaction and responsiveness to it? Look no further! With the Flourish “Interactive SVG” template, you can easily make any SVG file interactive and clickable – all within our user-friendly interface.
… transform static Scalable Vector Graphics (SVG) images into interactive diagrams, complete with clickable elements that reveal in-depth information....
Readme Typing SVG
Dynamically generated, customizable SVG that gives the appearance of typing and deleting text for use on your profile page, repositories, or website.
See also the demo site
Codrops
Tutorials
In this section you will find in-depth how-tos involving common web development and web design techniques.
Playground
In this category you will find experiments, plugins and articles related to web development and programming. Here we present some new ideas and inspiration for solving problems and tackling challenges around web development.
Blueprints
The Blueprints are a collection of basic and minimal website concepts, components, plugins and layouts with minimal style for easy adaption and usage, or simply for inspiration....
Visualizing CAMediaTiming
To show the different timing related properties, both on their own and in combination, I’m animating a color from orange to blue. The block shows the progress of the animation from start to finish (orange to blue) and the ticks on the timeline are one second apart.
(via Controlling Animation Timing )
CAPPTIVATE.co
Capptivate.co captures fleeting transitions between app screens and delightful animated UI elements that we’ll otherwise lose forever as apps and operating systems continue to evolve.
Categories:
Basic Motion Fade Grow or Shrink Motion Path Move or Slide Point At Spin or Rotate Camera Focus or Blur Frame Parallax Rotate Around or Sweep Zoom Simulations Align to Motion Attract or Repel Bounce Collide Ease Drift Gravity Orbit Around Spring Vortex
3D Transforms and Animations in CSS
… using WebKit keyframes to set up a perpetual animation effect in 3D space
Transition Timing Functions is CSS
This article follows on from the related article on Animation using CSS Transforms and investigates the transition-duration and transition-timing-function properties which control, respectively, the duration and speed at which a transition is carried out.