SVG + Animation Exp. inline SVG code & CSS keyframe animations.
Working with inline SVG code and CSS animations to determine the limitations of the technology as it compairs to after effects utilizing traditional animation principals. Throughout the transformations of the triangle use of: easing, overshooting, rotation, scale, opacity, stroke, skew, and color were tested. With correct timing you can miror the basics of what can be done in after effects opening many doors to advanced animations in a web enviroment without the dependecies and weight of Javascript.
liquid + responsive SVG, HTML, CSS Gradients, Img, & CSS Animation.
To showcase a review of the best gear added to govx in 2016 this graphic was created, as the products that would be in this category had not yet been selected a minimal aproach was taken. This graphic layers into it many layers of differnet elements to create the composition. Much how a composition is created in photoshop the gradients and shadows are built with code elements and then positioned and layered to create depth. this layering also allows for adjustments of the elements to seamlessly transition in liquid fashion across screen sizes. The animation adds subbtle movement and depth to the composition to draw attention to the area.
9.11 SVG animation SVG Shapes, HTML & CSS keyframe looping animation.
To Comemerate the passing of 9-11, govx.com wanted a minimal and somber feeling animation to pair with a blog post that they would do each year to honor those who lost their lives that day. This responsive animation of SVG shapes was used to provide the opening tone and draw interest to the blog. This animation uses: scale, rotation, and opacity key frames in 3 scenes that loop to convey the message.
*Through President's day. Excludes extra charges. Ends 2/20/17 11:59 pm PT.
GIFs + CSS Animation Animated Gifs, SVG, HTML, Img & CSS Animation.
The challenge was to display Free shipping for Presidents Day weekend in a more exciting way with limited time investment. This composition utilizes animated gifs as well as css animation to simplify the creation of the add and reduse strain on the browser rendering engine with the trade off of heaver weight animated gifs. This segmented layout enables the animations to be transfered seamlessly to mobile without lossing effect.