Demo of a simple animating SVG icon. Designed by Peter Nowell @pnowelldesign for a tutorial in Net Magazine's upcoming summer 2015 issue. Project files will be available at the link in the pen.
A Pen by Peter Nowell on CodePen.
Created
July 10, 2015 11:44
-
-
Save tcoyle20/20f6c73edfa9917645da to your computer and use it in GitHub Desktop.
SVG Attachments Icon
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| ANIMATING ICONS WITH SKETCH & SVG | |
| ————————————————————————————————— | |
| Designed by Peter Nowell @pnowelldesign for a tutorial in Net Magazine's upcoming summer 2015 issue. | |
| --> | |
| <a class="attachments-button" href="http://pnowell.com/s/Animating-Icon-Project-Files.zip"> | |
| <svg class="attachments-icon" xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60" version="1.1"> | |
| <title>attachments icon</title> | |
| <g class="document-container"> | |
| <path id="document-background" d="M28.32 9.286L46.32 9.286 58.32 21.286 58.32 48.286 28.32 48.286 28.32 9.286Z" stroke="#FFFFFF" stroke-width="4" fill="#FFFFFF" /> | |
| <path id="document-paper" d="M28.32 9.286L46.32 9.286 58.32 21.286 58.32 48.286 28.32 48.286 28.32 9.286Z" stroke="#4F92F0" fill="#FFFFFF" /> | |
| <g class="document-lines" fill="#4F92F0"> | |
| <rect id="text-line-5" x="33.82" y="39.786" width="6" height="1"/> | |
| <rect id="text-line-4" x="33.82" y="36.786" width="19" height="1"/> | |
| <rect id="text-line-3" x="33.82" y="33.786" width="16" height="1"/> | |
| <rect id="text-line-2" x="33.82" y="30.786" width="19" height="1"/> | |
| <rect id="text-line-1" x="33.82" y="27.786" width="16" height="1"/> | |
| </g> | |
| <path id="paper-fold" d="M58.32 21.286L46.32 21.286 46.32 9.286" stroke="#4F92F0" fill="none"/> | |
| </g> | |
| <g class="photo-2-container" fill="#FFFFFF"> | |
| <rect id="photo-2-background" stroke="#FFFFFF" stroke-width="4" x="9.667" y="10.506" width="19" height="25" /> | |
| <rect id="photo-2-border" stroke="#4F92F0" x="9.667" y="10.506" width="19" height="25" /> | |
| </g> | |
| <g class="photo-1-container" fill="#FFFFFF"> | |
| <rect id="photo-1-background" stroke="#FFFFFF" stroke-width="4" x="2.569" y="34.297" width="25" height="19" /> | |
| <rect id="photo-1-border" stroke="#4F92F0" x="2.602" y="34.208" width="25" height="19" /> | |
| </g> | |
| </svg> | |
| <span>Download Project Files</span> | |
| </a> | |
| <div class="zoom-button">Zoom</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function zoom() { | |
| $('.attachments-button').toggleClass('zoom'); | |
| $('.zoom-button').toggleClass('active'); | |
| } | |
| $('.zoom-button').click( zoom ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .attachments-icon { | |
| transition: all .4s ease; | |
| } | |
| /* Initial State */ | |
| .attachments-icon .document-container { | |
| transform-origin: center center; | |
| transform: rotate(12deg); | |
| transition: all .4s ease; | |
| } | |
| .attachments-icon .photo-1-container { | |
| transform-origin: center center; | |
| transform: rotate(-11deg); | |
| transition: all .4s ease; | |
| } | |
| .attachments-icon .photo-2-container { | |
| transform-origin: center center; | |
| transform: rotate(-3deg); | |
| transition: all .4s ease; | |
| } | |
| /* Hover State */ | |
| .attachments-button:hover .document-container { | |
| transform: translate(-7.46px,1.56px) rotate(22deg); | |
| } | |
| .attachments-button:hover .photo-1-container { | |
| transform: translate(5.18px,-4.3px) rotate(-16deg); | |
| } | |
| .attachments-button:hover .photo-2-container { | |
| transform: translate(6.71px,5.16px) rotate(4deg); | |
| } | |
| /* Other Styling */ | |
| .attachments-button { | |
| width: 270px; | |
| height: 60px; | |
| padding: 12px 0; | |
| position: absolute; | |
| top: 50vh; | |
| left: 50vw; | |
| background: white; | |
| border-top: 1px solid #F0F0F0; | |
| border-bottom: 1px solid #F0F0F0; | |
| transform: translate(-50%,-50%) scale(1); | |
| transition: all .5s ease; | |
| } | |
| .attachments-button span { | |
| display: block; | |
| float: right; | |
| font-family: "Avenir", Arial, sans-serif; | |
| font-weight: 300; | |
| font-size: 19px; | |
| line-height: 65px; | |
| color: #5C6374; | |
| } | |
| .attachments-button:hover span { | |
| color: #4B89E2; | |
| } | |
| .attachments-button.zoom { | |
| transform: translate(-50%,-50%) scale(2); | |
| } | |
| .zoom-button { | |
| width: 84px; | |
| height: 36px; | |
| position: absolute; | |
| top: 80vh; | |
| left: 50vw; | |
| transform: translate(-50%,-50%); | |
| border-radius: 4px; | |
| font-family: "Avenir", Arial, sans-serif; | |
| font-weight: 500; | |
| font-size: 16px; | |
| line-height: 37px; | |
| text-align: center; | |
| color: #D8D8D8; | |
| background: white; | |
| border: 1px solid #D8D8D8; | |
| cursor: pointer; | |
| } | |
| .zoom-button:hover { | |
| border-color: #B3B3B3; | |
| color: #B3B3B3; | |
| } | |
| .attachments-button, .zoom-button { | |
| -webkit-font-smoothing: antialiased; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment