These animated SVG icons are the proper technique to ship your clients to your social media. They’re all SVGs (scaleable vector graphics), which suggests you could make them any measurement and present them on any display screen (even retina), they usually’ll look 100% crisp and clear.
What occurs when the icon isn’t on the display screen? Don’t fear, the icons received’t animate till you’ve scrolled them into view.
Straightforward to Edit
Utilizing these icons is ridiculously straightforward! Severely, simply add a div with the proper class title and we’ll take it from there:
<div class="browsericon facebookIcon"></div>
All the colours are dealt with proper within the CSS so there’s no have to dig by way of SVG code or open a graphics file:
.browsericon .fb .f fill:#D97827;
Even including buttons to manage the animations is a peice of cake. You’ll be able to even specify which icons might be affected by placing their numbers in between the brackets:
<button onclick="restartIcons([0,1,2,3,4])">Restart</button> <button onclick="reverseIcons([0,1,2,3,4])">Reverse</button>
Wish to get all loopy and mess with the .js file? It couldn’t be extra easy:
var imagesPath = "pictures/";//path to the photographs var delayBetweenIcons = .5;//stagger the animation of every iccon (in seconds) var useRollover = true;//have an animation on rollover var hoverScale = 1.2;//how a lot does the icon develop on rollover var pace = 1;//pace up or decelerate the animations (1 being regular pace) var playOnStart = true;//play animations on web page load
Evaluate the scale and high quality of SVG’s, JPG’s, and PNG’s
Suitable With All Main Browsers
This merchandise makes use of Greensock’s TweenMax for the animations, moderately than jQuery. Why? As a result of GSAP is SOOOO a lot sooner and smoother. See for your self: jQuery vs GSAP pace check.
Free Flat Icons
In order for you simply the icons (not animated), you may get them free right here at GraphicBurger.