Animate The Skew Of An Image

December 14, 2018

Sometimes its nice to add a little bit of constant motion to a website page element, to keep things a bit less “static”. One option is adding a looping animation to certain images. You can see an example of this here: https://jsfiddle.net/Garconis/f014vxuq/

As you will see, there are two separate animated pieces.

The image itself is being “clipped” to an animated skewing, via the clip-path property.
There is an extra background animation added via a ::before pseudo element which is skewed via the transform property.
Both elements are then animated by creating a new set of keyframes for each.

Subtle but effective.

Jon Fuller https://freshysites.com/team/#Jon-Fuller

Jon is from the Binghamton, NY area and graduated from the School of Art and Design at Alfred University with a Bachelor of Fine Arts. Concentrated studies were in Graphic Design and Video. Jon has an appreciation of all aspects of art and design, and has an extensive background in both print media and web — with a thorough understanding of video and photography. Jon comes to FreshySites with 9 years of graphic design and web experience. He continues to make a habit of researching new tools and technologies to broaden his knowledge in the web development industry. He’s a tech junkie who has a passion for implementing new techniques and improving his surroundings. Outside of work, Jon also enjoys going on new adventures with his wife, exercising, and sipping on quality craft beer.