Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Morph Actions
<svg version="1.1" id="favorite" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 151.8 75" style="enable-background:new 0 0 151.8 75;" xml:space="preserve">
<style type="text/css">
#favorite__icon{fill:#E54C3B;visibility:hidden;}
#favorite__rect{fill:#E54C3B;}
#favorite__text{fill:#FFFFFF;font-size:20px;}
</style>
<path id="favorite__icon" d="M76.2,75c41.1-34.6,43.8-50.3,38.8-62.2C107.3-4.9,82.7-3,75.8,10.9C68.9-3,43.9-4.9,36.6,12.8
C32,25.1,34.7,40.8,76.2,75z"/>
<path id="favorite__rect" d="M149.8,62.5H2c-1.1,0-2-0.9-2-2v-46c0-1.1,0.9-2,2-2h147.8c1.1,0,2,0.9,2,2v46
C151.8,61.6,150.9,62.5,149.8,62.5z"/>
<text id="favorite__text" transform="matrix(1 0 0 1 39.9578 41.26)">Favorite</text>
</svg>
<svg version="1.1" id="print" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 151.8 75" style="enable-background:new 0 0 151.8 75;" xml:space="preserve">
<style type="text/css">
#print__icon{fill:#9b59b6;visibility:hidden;}
#print__rect{fill:#9b59b6;}
#print__text{fill:#fff;font-size:20px;}
</style>
<path id="print__icon" d="M102.7,16.6V0H51.4v16.6H34.7v38.9h16.6V75h36.1l15.1-15.3l0,0v-4.2H117V16.6
C117,16.6,102.7,16.6,102.7,16.6z M97,5.7v10.9h-40V5.7H97z M102.7,39.2H97v16.3H81.5v14H57.1V39.2h-5.7v13.8h-4.9V33.7h61.5v19.2
H103L102.7,39.2L102.7,39.2z"/>
<path id="print__rect" d="M149.8,62.5H2c-1.1,0-2-0.9-2-2v-46c0-1.1,0.9-2,2-2h147.8c1.1,0,2,0.9,2,2v46
C151.8,61.6,150.9,62.5,149.8,62.5z"/>
<text id="print__text" transform="matrix(1 0 0 1 55.1375 41.26)">Print</text>
</svg>
<svg version="1.1" id="download" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 151.8 75" style="enable-background:new 0 0 151.8 75;" xml:space="preserve">
<style type="text/css">
#download__icon{fill:#4FBA6E;visibility:hidden;}
#download__rect{fill:#4FBA6E;}
#download__text{fill:#fff;font-size:20px;}
</style>
<path id="download__icon" d="M65.2,0h21.4v37.5h26.8L75.9,75L38.4,37.5h26.8V0z"/>
<path id="download__rect" d="M149.8,62.5H2c-1.1,0-2-0.9-2-2v-46c0-1.1,0.9-2,2-2h147.8c1.1,0,2,0.9,2,2v46
C151.8,61.6,150.9,62.5,149.8,62.5z"/>
<text id="download__text" transform="matrix(1 0 0 1 30.6976 41.26)">Download</text>
</svg>
var favoriteButton = document.querySelector('#favorite'),
printButton = document.querySelector('#print'),
downloadButton = document.querySelector('#download');
TweenMax.set('svg', {
visibility: 'visible'
});
var tlFavorite = new TimelineMax({paused: true});
favoriteButton.addEventListener('mouseenter', function() {
tlFavorite
.to('#favorite__text', 0.15, {
opacity: 0
})
.to('#favorite__rect', 0.30, {
morphSVG: '#favorite__icon',
ease: Power3.easeOut
});
tlFavorite.play();
});
favoriteButton.addEventListener('mouseleave', function() {
tlFavorite.reverse();
});
var tlPrint = new TimelineMax({paused: true});
printButton.addEventListener('mouseenter', function() {
tlPrint
.to('#print__text', 0.15, {
opacity: 0
})
.to('#print__rect', 0.30, {
morphSVG: '#print__icon',
ease: Power3.easeOut
});
tlPrint.play();
});
printButton.addEventListener('mouseleave', function() {
tlPrint.reverse();
});
var tlDownload = new TimelineMax({paused: true});
downloadButton.addEventListener('mouseenter', function() {
tlDownload
.to('#download__text', 0.15, {
opacity: 0
})
.to('#download__rect', 0.30, {
morphSVG: '#download__icon',
ease: Power3.easeOut
});
tlDownload.play();
});
downloadButton.addEventListener('mouseleave', function() {
tlDownload.reverse();
});
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
html, body {
height: 100%;
}
body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Open Sans","Helvetica Neue",sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: "liga" on;
color: #a8a8a8;
font-size: 14px;
line-height: 1.4;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
box-sizing: border-box;
*, *:before, *:after {
box-sizing: inherit;
}
}
svg {
max-width: 150px;
cursor: pointer;
user-select: none;
visibility: hidden;
+ svg {
margin-top: 15px;
}
}
text {
pointer-events: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.