Skip to content

Instantly share code, notes, and snippets.

@netmin-net

netmin-net/have-fun-with-code.markdown

Last active April 23, 2019 01:33
Show Gist options
  • Save netmin-net/6c5a96bef877e9ad4725235af4415f1f to your computer and use it in GitHub Desktop.
Save netmin-net/6c5a96bef877e9ad4725235af4415f1f to your computer and use it in GitHub Desktop.
Download ZIP
Have Fun With Code!
Raw
have-fun-with-code.markdown
Raw
index.html
<svg class="fingerSVG" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="ropeHangMask">
<rect id="ropeHangDownBgMask" width="100%" height="100%" fill="#FFF"/>
<path id="ropeHangDownMask" fill="#FFF" stroke="none" stroke-miterlimit="10" d="M406.1,440.6
c-25.4,0-5.3-155.1-5.3-155.1H180.5v223h438v-223H400.8C400.8,285.5,424.2,440.6,406.1,440.6z"/>
</mask>
<g id="anchorPopGroup" fill="none" stroke="#ededed" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10">
<line x1="24" y1="17.5" x2="24" y2="1.5"/>
<line x1="29.5" y1="25" x2="45.5" y2="25"/>
<line x1="23" y1="30.5" x2="23" y2="46.5"/>
<line x1="17.5" y1="24" x2="1.5" y2="24"/>
</g>
<mask id="ropeHangMaskInverted">
<rect id="ropeHangDownBgMaskInverted" width="100%" height="100%" fill="#000"/>
<path id="ropeHangDownMaskInverted" fill="#000" stroke="none" stroke-miterlimit="10" d="M406.1,440.6
c-25.4,0-5.3-155.1-5.3-155.1H180.5v223h438v-223H400.8C400.8,285.5,424.2,440.6,406.1,440.6z"/>
<!-- <path id="ropeFullFlatMask" fill="#FF0513" stroke="#000000" stroke-miterlimit="10" d="M406.1,440.6
c-25.4,0-225.4-153.6-225.4-153.6l-0.2,0v221.5h438v-223l0,0C618.5,285.5,424.2,440.6,406.1,440.6z"/> -->
</mask>
</defs>
<circle id="handleL" fill="none" stroke="#ededed" stroke-width="2" stroke-miterlimit="10" cx="180.7" cy="287" r="0"/>
<circle id="handleR" fill="none" stroke="#ededed" stroke-width="2" stroke-miterlimit="10" cx="619" cy="285.5" r="0"/>
<path id="ropeFullDown" fill="none" stroke="none" stroke-miterlimit="10" d="M200.7,287c0,0,95.6,53.9,205.7,53.9
c114,0,192.6-55.4,192.6-55.4"/>
<path id="ropeFullUp" fill="none" stroke="none" stroke-miterlimit="10" d="M200.7,287c0,0,95.6-46.1,205.7-46.1
c114,0,192.6,44.6,192.6,44.6"/>
<path id="ropeHangDown" fill="none" stroke="none" stroke-miterlimit="10" d="M400.7,287c0,0-19.7,153.9,5.7,153.9
C424.5,440.9,400.7,287,400.7,287"/>
<path id="ropeHangUp" opacity="0" stroke-width="2" stroke-dasharray="2" fill="none" stroke="#ededed" stroke-miterlimit="10" d="M400.7,287c0,0-6.9,23.9,1.7,23.9
C407.7,310.9,400.7,287,400.7,287"/>
<g mask="url(#ropeHangMask)">
<text class="maskText1" x="50%" y="54%" style="fill:#ededed;">HAVE FUN</text>
</g>
<g mask="url(#ropeHangMaskInverted)" >
<text class="maskText2" class="withText" x="50%" y="54%" style="fill:#5783FC;">WITH</text>
</g>
<g id="handGroupL">
<path id="handL_7_" fill="#ededed" d="M225,315.1c-1.6-1.9-5.2-3-9.4-0.9c-4.5,2.3-5.9,5.3-6.8,7.3c-0.3,0.7-0.6,1.3-0.9,1.6
c-0.6,0.5-1.4,1.1-2.1,1.6c0-7.8,0-18.6,0-29.2c0-2.5,0-4.4,0-5.2c0-4.2,0-8.9-4.2-9.8c-1.6-0.3-3.1,0-4.3,0.9
c-1.8,1.4-2.4,3.7-2.5,4.9c-0.1,1-1.1,11.8-1.9,19.9c-3.1,1.1-4.9,3.2-6,4.4c-0.2,0.3-0.5,0.6-0.6,0.7c-0.1,0.1-0.7,0.1-1,0.1
c-1,0-2.3-0.1-3.5,0.8c-2.1,1.5-3.1,3-3.9,4.2c-0.5,0.8-0.9,1.4-1.5,1.8c-0.1,0-0.3,0.1-0.5,0.1c-1.1,0.1-2.7,0.4-4.9,2.5
c-4.6,4.4-4.2,13.7-3.5,18.8c0.9,6.7,0,9.7-3.9,14c-0.6,0.6-0.5,1.6,0.1,2.1c0.3,0.3,0.7,0.4,1,0.4c0.4,0,0.8-0.2,1.1-0.5
c4.5-5,5.7-9,4.7-16.5c-1-7.8-0.1-13.7,2.6-16.2c1.6-1.5,2.5-1.6,3.3-1.7c0.6-0.1,1.2-0.2,1.9-0.7c1-0.8,1.6-1.7,2.2-2.6
c0.7-1.1,1.4-2.2,3.1-3.4c0.4-0.3,0.9-0.3,1.7-0.3c0.9,0,1.9,0,2.9-0.6c0.4-0.3,0.7-0.6,1.1-1.1c0.8-0.9,1.8-2.1,3.4-3
c-0.2,1.8-0.3,3.3-0.4,4.3c-0.1,0.8,0.5,1.6,1.3,1.6c0.8,0.1,1.6-0.5,1.6-1.3c0.6-5.6,2.6-26.3,2.7-27.8c0-0.6,0.4-2,1.3-2.7
c0.3-0.2,0.8-0.5,1.8-0.3c1.3,0.3,1.9,1.3,1.9,6.8c0,0.8,0,2.7,0,5.2c0,11.1,0.1,37.1-0.1,39.6c-0.1,0.8,0.5,1.6,1.3,1.7
c0.1,0,0.1,0,0.2,0c0.8,0,1.4-0.6,1.5-1.3c0.1-0.8,0.1-3.4,0.2-7.2c0.8-0.5,2.9-1.7,4.2-2.9c0.7-0.6,1.1-1.5,1.5-2.5
c0.8-1.8,1.9-4.1,5.4-5.9c2.6-1.3,4.8-0.9,5.7,0.1c0.8,0.9,0.1,2-0.3,2.6c-1,1.2-3,4.5-5.6,8.6c-4.9,7.9-12.4,19.8-15.6,22.4
c-0.9,0.7-3.5,2.3-6.2,4c-5.2,3.1-11.1,6.7-13,8.9c-0.5,0.6-0.5,1.6,0.1,2.1c0.3,0.2,0.6,0.4,1,0.4c0.4,0,0.8-0.2,1.1-0.5
c1.6-1.8,7.7-5.5,12.2-8.3c3.1-1.9,5.6-3.4,6.6-4.2c3.3-2.7,9.3-12.1,16.2-23.1c2.4-3.9,4.6-7.3,5.4-8.4
C226.4,319.4,226.5,317,225,315.1z"/>
<path id="handL_6_" fill="#1d1d1d" d="M165.8,355.4c4.5-5,5.7-9,4.7-16.5c-1-7.8-0.1-13.7,2.6-16.2c1.6-1.5,2.5-1.6,3.3-1.7
c0.6-0.1,1.2-0.2,1.9-0.7c1-0.8,1.6-1.7,2.2-2.6c0.7-1.1,1.4-2.2,3.1-3.4c0.4-0.3,0.9-0.3,1.7-0.3c0.9,0,1.9,0,2.9-0.6
c0.4-0.3,0.7-0.6,1.1-1.1c0.8-0.9,1.8-2.1,3.4-3c-0.2,1.8-0.3,3.3-0.4,4.3c-0.1,0.8,0.5,1.6,1.3,1.6c0.8,0.1,1.6-0.5,1.6-1.3
c0.6-5.6,2.6-26.3,2.7-27.8c0-0.6,0.4-2,1.3-2.7c0.3-0.2,0.8-0.5,1.8-0.3c1.3,0.3,1.9,1.3,1.9,6.8c0,0.8,0,2.7,0,5.2
c0,11.1,0.1,37.1-0.1,39.6c-0.1,0.8,0.5,1.6,1.3,1.7c0.1,0,0.1,0,0.2,0c0.8,0,1.4-0.6,1.5-1.3c0.1-0.8,0.1-3.4,0.2-7.2
c0.8-0.5,2.9-1.7,4.2-2.9c0.7-0.6,1.1-1.5,1.5-2.5c0.8-1.8,1.9-4.1,5.4-5.9c2.6-1.3,4.8-0.9,5.7,0.1c0.8,0.9,0.1,2-0.3,2.6
c-1,1.2-3,4.5-5.6,8.6c-4.9,7.9-12.4,19.8-15.6,22.4c-0.9,0.7-3.5,2.3-6.2,4c-5.2,3.1-11.1,6.7-13,8.9L165.8,355.4z"/>
</g>
<g id="handGroupR">
<path id="handL_5_" fill="#ededed" d="M575.3,321.5c0.9,1.1,3,4.5,5.4,8.4c6.9,11.1,12.9,20.5,16.2,23.1c1,0.9,3.5,2.3,6.6,4.2
c4.5,2.7,10.7,6.4,12.2,8.3c0.3,0.3,0.7,0.5,1.1,0.5c0.3,0,0.7-0.1,1-0.4c0.6-0.5,0.7-1.5,0.1-2.1c-1.9-2.2-7.8-5.7-13-8.9
c-2.8-1.7-5.4-3.3-6.2-4c-3.2-2.6-10.6-14.5-15.6-22.4c-2.6-4.1-4.6-7.4-5.6-8.6c-0.5-0.6-1.1-1.7-0.3-2.6c0.9-1.1,3.1-1.4,5.7-0.1
c3.5,1.8,4.6,4.1,5.4,5.9c0.4,0.9,0.8,1.8,1.5,2.5c1.3,1.2,3.3,2.4,4.2,2.9c0,3.8,0.1,6.4,0.2,7.2c0.1,0.8,0.7,1.3,1.5,1.3
c0.1,0,0.1,0,0.2,0c0.8-0.1,1.4-0.8,1.3-1.7c-0.3-2.6-0.2-28.5-0.1-39.6c0-2.6,0-4.4,0-5.2c0-5.5,0.6-6.6,1.9-6.8
c1-0.2,1.5,0.1,1.8,0.3c0.9,0.7,1.3,2.1,1.3,2.7c0.1,1.4,2.1,22.2,2.7,27.8c0.1,0.8,0.8,1.4,1.6,1.3c0.8-0.1,1.4-0.8,1.3-1.6
c-0.1-1-0.3-2.5-0.4-4.3c1.6,0.9,2.6,2.1,3.4,3c0.4,0.5,0.8,0.9,1.1,1.1c0.9,0.7,2,0.6,2.9,0.6c0.8,0,1.3,0,1.7,0.3
c1.7,1.2,2.4,2.3,3.1,3.4c0.6,0.9,1.2,1.9,2.2,2.6c0.7,0.5,1.3,0.6,1.9,0.7c0.8,0.1,1.7,0.2,3.3,1.7c2.7,2.5,3.6,8.4,2.6,16.2
c-1,7.5,0.2,11.5,4.7,16.5c0.3,0.3,0.7,0.5,1.1,0.5c0.4,0,0.7-0.1,1-0.4c0.6-0.6,0.7-1.5,0.1-2.1c-4-4.3-4.8-7.4-3.9-14
c0.7-5.2,1.1-14.4-3.5-18.8c-2.3-2.1-3.9-2.4-4.9-2.5c-0.2,0-0.4-0.1-0.5-0.1c-0.6-0.4-1-1.1-1.5-1.8c-0.8-1.2-1.7-2.7-3.9-4.2
c-1.2-0.9-2.6-0.8-3.5-0.8c-0.3,0-0.9,0-1-0.1c-0.1-0.1-0.4-0.4-0.6-0.7c-1-1.2-2.9-3.3-6-4.4c-0.8-8.1-1.9-18.9-1.9-19.9
c-0.1-1.2-0.7-3.5-2.5-4.9c-1.2-0.9-2.7-1.2-4.3-0.9c-4.2,0.9-4.2,5.6-4.2,9.8c0,0.8,0,2.7,0,5.2c0,10.6-0.1,21.5,0,29.2
c-0.7-0.5-1.5-1-2.1-1.6c-0.3-0.2-0.6-0.9-0.9-1.6c-0.9-2-2.3-5.1-6.8-7.3c-4.2-2.1-7.8-1-9.4,0.9
C573.5,317,573.6,319.4,575.3,321.5z"/>
<path id="handL" fill="#1d1d1d" d="M618,363.3c-1.9-2.2-7.8-5.7-13-8.9c-2.8-1.7-5.4-3.3-6.2-4c-3.2-2.6-10.6-14.5-15.6-22.4
c-2.6-4.1-4.6-7.4-5.6-8.6c-0.5-0.6-1.1-1.7-0.3-2.6c0.9-1.1,3.1-1.4,5.7-0.1c3.5,1.8,4.6,4.1,5.4,5.9c0.4,0.9,0.8,1.8,1.5,2.5
c1.3,1.2,3.3,2.4,4.2,2.9c0,3.8,0.1,6.4,0.2,7.2c0.1,0.8,0.7,1.3,1.5,1.3c0.1,0,0.1,0,0.2,0c0.8-0.1,1.4-0.8,1.3-1.7
c-0.3-2.6-0.2-28.5-0.1-39.6c0-2.6,0-4.4,0-5.2c0-5.5,0.6-6.6,1.9-6.8c1-0.2,1.5,0.1,1.8,0.3c0.9,0.7,1.3,2.1,1.3,2.7
c0.1,1.4,2.1,22.2,2.7,27.8c0.1,0.8,0.8,1.4,1.6,1.3c0.8-0.1,1.4-0.8,1.3-1.6c-0.1-1-0.3-2.5-0.4-4.3c1.6,0.9,2.6,2.1,3.4,3
c0.4,0.5,0.8,0.9,1.1,1.1c0.9,0.7,2,0.6,2.9,0.6c0.8,0,1.3,0,1.7,0.3c1.7,1.2,2.4,2.3,3.1,3.4c0.6,0.9,1.2,1.9,2.2,2.6
c0.7,0.5,1.3,0.6,1.9,0.7c0.8,0.1,1.7,0.2,3.3,1.7c2.7,2.5,3.6,8.4,2.6,16.2c-1,7.5,0.2,11.5,4.7,16.5L618,363.3z"/>
</g>
</svg>
Raw
script.js
var xmlns = "http://www.w3.org/2000/svg",
xlinkns = "http://www.w3.org/1999/xlink",
select = function(s) {
return document.querySelector(s);
},
selectAll = function(s) {
return document.querySelectorAll(s);
},
getD = function(s) {
return s.getAttribute('d')
},
fingerSVG = select('.fingerSVG'),
handleL = select('#handleL'),
handleR = select('#handleR'),
anchorPopGroup = select('#anchorPopGroup'),
ropeFullDown = select('#ropeFullDown'),
ropeFullUp = select('#ropeFullUp'),
ropeHangDown = select('#ropeHangDown'),
ropeHalfDownPath = 'M200.7,287c0,0,95.6,13.9,205.7,13.9c114,0,192.6-15.4,192.6-15.4',
ropeHangUp = select('#ropeHangUp'),
ropeFullUpPath = getD(ropeFullUp),
ropeFullFlatPath = "M181,285.5c0,0,110.3,0,220.4,0 c114,0,217.6,0,217.6,0",
ropeFullDownPath = getD(ropeFullDown),
ropeHangUpPath = getD(ropeHangUp),
ropeHangDownPath = getD(ropeHangDown),
ropeFullFlatMaskPath = "M406.1,440.6c-25.4,0-225.6-155.1-225.6-155.1l0,0v223h438v-223l0,0C618.5,285.5,424.2,440.6,406.1,440.6z",
ropeHangDownMaskPath = "M406.1,440.6c-25.4,0-5.3-155.1-5.3-155.1H180.5v223h438v-223H400.8C400.8,285.5,424.2,440.6,406.1,440.6z",
anchorPopGroupL = anchorPopGroup.cloneNode(true),
anchorPopGroupR = anchorPopGroup.cloneNode(true),
jumpUpDown = CustomEase.create('jumpUpDown', 'M0,0 C0.063,0.186 0.225,0.818 0.41,0.818 0.739,0.818 0.835,0.095 0.864,0 0.904,-0.132 0.932,0 1,0');
fingerSVG.appendChild(anchorPopGroupL);
fingerSVG.appendChild(anchorPopGroupR);
var allPopL = anchorPopGroupL.querySelectorAll('line'),
allPopR = anchorPopGroupR.querySelectorAll('line');
TweenMax.staggerTo([allPopL, allPopR], 0, {
drawSVG: '0% 0%',
cycle: {
x: [Number(handleL.getAttribute('cx')) - 23, Number(handleR.getAttribute('cx')) - 23],
y: [Number(handleL.getAttribute('cy')) - 24, Number(handleR.getAttribute('cy')) - 24]
}
}, 0)
TweenMax.set([anchorPopGroupL, anchorPopGroupR], {
rotation: 45,
transformOrigin: '50% 50%'
})
TweenMax.set('svg', {
visibility: 'visible'
})
TweenMax.staggerTo(['#handGroupL', '#handGroupR'], 0, {
cycle: {
x: [-50, 50],
y: [100]
}
}, 0)
var tl = new TimelineMax({
delay: 1,
repeat: -1,
repeatDelay: 1
}).timeScale(1);
tl.staggerTo(['#handGroupL', '#handGroupR'], 1, {
cycle: {
x: [196, -196],
y: [0]
},
ease: Sine.easeInOut
}, 0)
.set(ropeHangUp, {
alpha: 1
}, '-=0')
.to(ropeHangUp, 1.5, {
morphSVG: ropeHangDownPath,
ease: Elastic.easeOut.config(0.8, 0.42)
}, '-=0')
.set('#ropeHangDownBgMask', {
fill: '#000'
})
.set('#ropeHangDownBgMaskInverted', {
fill: '#FFF'
})
.to('#handGroupL', 0.8, {
x: -20,
ease: Power4.easeIn
})
.to('#handGroupR', 0.8, {
x: 20,
ease: Power4.easeIn
}, '-=0.8')
.to('#ropeHangDownMask', 0.8, {
morphSVG: ropeFullFlatMaskPath,
ease: Power4.easeIn
}, '-=0.8')
.to('#ropeHangDownMaskInverted', 0.8, {
morphSVG: ropeFullFlatMaskPath,
ease: Power4.easeIn
}, '-=0.8')
.to(ropeHangUp, 0.8, {
morphSVG: {
shape: ropeFullFlatPath,
shapeIndex: 2
},
ease: Power4.easeIn
}, '-=0.8')
.from(ropeHangUp, 0.3, {
morphSVG: ropeFullUpPath,
immediateRender: false,
ease: Elastic.easeOut
}, '-=0')
.to([allPopL, allPopR], 0.1, {
drawSVG: '0% 50%',
ease: Linear.easeNone
}, '-=0.3')
.to([allPopL, allPopR], 0.6, {
drawSVG: '100% 100%',
ease: Power2.easeOut
}, '-=0.2')
.to('#handGroupL', 0.6, {
x: -0,
ease: Anticipate.easeIn,
rotation: 7,
transformOrigin: '60% 0%'
}, '+=1')
.to('#handGroupR', 0.6, {
x: 0,
rotation: -7,
transformOrigin: '40% 0%',
ease: Anticipate.easeIn
}, '-=0.6')
.to(ropeHangUp, 0.6, {
morphSVG: ropeFullDownPath,
ease: Anticipate.easeIn
}, '-=0.6')
//straighten out again
.to(ropeHangUp, 0.3, {
morphSVG: ropeFullFlatPath,
immediateRender: false,
ease: Power4.easeIn
}, '-=0')
.to('#handGroupL', 0.3, {
x: -20,
ease: Anticipate.easeIn,
rotation: 0,
transformOrigin: '60% 0%',
ease: Power4.easeIn
}, '-=0.3')
.to('#handGroupR', 0.3, {
x: 20,
rotation: 0,
transformOrigin: '40% 0%',
ease: Power4.easeIn
}, '-=0.3')
.from(ropeHangUp, 0.31, {
morphSVG: ropeFullUpPath,
immediateRender: false,
ease: Elastic.easeOut
}, '-=0')
.to('.maskText2', 0.8, {
y: -230,
ease: jumpUpDown
}, '-=0.37')
.to('.maskText2', 0.76, {
rotation: 360,
transformOrigin: '50% 50%',
ease: Sine.easeInOut
//}
}, '-=0.8')
.to('.maskText2', 0.1, {
text: 'CODE!',
fill: '#ededed',
ease: Expo.easeIn
}, '-=0.2')
//Land rope
.from(ropeHangUp, 0.31, {
morphSVG: ropeFullUpPath,
immediateRender: false,
ease: Elastic.easeOut
}, '-=0.12')
.staggerFrom(['#handGroupL', '#handGroupR'], 0.1, {
cycle: {
rotation: [3, -3],
transformOrigin: ['60% 100%', '20% 100%']
},
immediateRender: false,
ease: Sine.easeOut
}, 0, '-=0.32')
.staggerTo(['#handGroupL', '#handGroupR'], 1, {
cycle: {
x: [196, -196],
y: [0]
},
ease: Sine.easeInOut
}, 0, '+=1')
/* .to(ropeHangUp,1, {
morphSVG:ropeHangDownPath,
ease:Expo.easeInOut
},'-=1') */
.to(ropeHangUp, 1, {
morphSVG: ropeHangUpPath,
ease: Sine.easeInOut
}, '-=1')
.to('#ropeHangDownMaskInverted', 1, {
morphSVG: ropeHangDownMaskPath,
ease: Sine.easeInOut
}, '-=1')
.to('#ropeHangDownMask', 1, {
morphSVG: ropeHangDownMaskPath,
ease: Sine.easeInOut
}, '-=1')
.set('#ropeHangDownBgMask', {
fill: '#FFF'
})
.set('#ropeHangDownBgMaskInverted', {
fill: '#000'
})
/* .from(ropeHangUp, 1, {
scaleY:1.1,
ease:Elastic.easeOut.config(0.8,0.42)
},'-=0.3') */
.to(ropeHangUp, 1, {
morphSVG: ropeHangUpPath,
ease: Sine.easeInOut
}, '-=1')
.set([ropeHangUp, '.maskText2'], {
alpha: 0
})
.staggerTo(['#handGroupL', '#handGroupR'], 1.4, {
cycle: {
x: [-50, 50],
y: [100]
},
ease: Power1.easeInOut
}, 0.071, '-=0')
//TweenMax.globalTimeScale(0.5)
//ScrubGSAPTimeline(tl)
Raw
scripts
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/ScrubGSAPTimeline.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=12"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/AnticipateEase.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/TextPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
Raw
style.css
body {
background-color: #1d1d1d;
overflow: hidden;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
svg {
width: 100%;
height: 100%;
visibility: hidden;
position: absolute;
}
text {
text-anchor: middle;
font-family: "brandon-grotesque";
font-weight: 700;
font-size: 40px;
letter-spacing: 0px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment