Skip to content

Instantly share code, notes, and snippets.

@charlenopires

charlenopires/azOBer.markdown

Created November 28, 2014 02:08
Show Gist options
  • Save charlenopires/4b904508d379d6c2821d to your computer and use it in GitHub Desktop.
Save charlenopires/4b904508d379d6c2821d to your computer and use it in GitHub Desktop.
Download ZIP
azOBer
Raw
index.html
<body>
<svg id="anim" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="250" width="600" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<g id="layer1" transform="translate(0 -802.36)">
<g id="guillaume">
<path class="path-up" id="path4946" d="m60.156 824.49c-15.814 0-29.594 11.155-29.594 24.938v57.844l9.7188-1v-56.844c0-8.1244 9.4293-15.375 19.875-15.375 8.9949 0 17.125 7.2506 17.125 15.375v17.125h9.5625v-17.125c0-13.783-12.18-24.938-26.688-24.938z"/>
<path class="path-up" id="path4944" d="m62.469 892.67v7.9688h14.812v1.9062l9.5625-0.96875v-8.9062h-24.375z"/>
<path id="path2999" d="m86.844 903.58-9.5625 0.96875v15.531c0 8.5597-8.4203 14.656-17.125 14.656-10.156 0-19.875-6.0966-19.875-14.656v-11.781l-9.7188 0.96875v10.812c0.14508 13.637 14.215 23.938 29.594 23.938 13.928 0 26.688-10.3 26.688-23.938v-16.5z"/>
<path class="path-up" id="path4986" d="m101.41 824.49v76.031l9.5625-0.9375v-75.094h-9.5625z"/>
<path class="path-up" id="path4984" d="m144.5 824.49v71.688l9.7188-0.96875v-70.719h-9.7188z"/>
<path id="path3001" d="m154.22 897.24-9.7188 0.96875v20.719c0 8.1244-7.9939 15.25-16.844 15.25-8.8498 0-16.688-7.1256-16.688-15.25v-17.344l-9.5625 0.96875v16.375c0.14507 13.637 11.887 24.812 26.25 24.812 14.508 0 26.562-11.175 26.562-24.812v-21.688z"/>
<path class="path-up" id="path4980" d="m170.72 824.49 0.0937 68.812 10.062-1v-67.812h-10.156z"/>
<path id="path3003" d="m180.88 894.33-10.062 1 0.0625 47.688h10v-48.688z"/>
<path class="path-up" id="path4976" d="m197.59 824.49 0.0937 65.812 9.4688-0.96875v-64.844h-9.5625z"/>
<path id="path3005" d="m207.16 891.36-9.4688 0.96875 0.0625 50.688h38.594v-9.5938h-29.188v-42.062z"/>
<path class="path-up" id="path4972" d="m247.19 824.49 0.0625 61.312 9.5-0.96875v-60.344h-9.5625z"/>
<path id="path3007" d="m256.75 886.86-9.5 0.9375 0.0625 55.219h38.594v-9.5938h-29.156v-46.562z"/>
<path id="path4968" class="path-up" d="m317.09 824.49-11.09 55.18l10.344-1.0625c2.4785-12.934 4.8296-25.257 7.25-37.594l7.1875 36.156 10.031-1.0312-10.81-51.65h-12.906z"/>
<path id="path3009" d="m341.22 878.14-10.031 1 6.9375 35h-28.594c2.3329-12.169 4.3927-22.925 6.4062-33.438l-10.344 1.0312-12.312 61.281h9.875l5.0625-20.625h31.219l5.3438 20.625h10.031l-13.594-64.875z"/>
<path id="path4964" class="path-up" d="m364.06 824.49v48.938l9.5938-0.96875v-47.969h-9.5938z"/>
<path id="path4962" class="path-up" d="m407.16 824.49v44.562l9.7188-0.96875v-43.594h-9.7188z"/>
<path id="path3011" d="m416.88 870.08-9.7188 1v47.844c0 8.1244-7.9627 15.25-16.812 15.25-8.8498 0-16.688-7.1256-16.688-15.25v-44.469l-9.5938 0.96875v43.5c0.14508 13.637 11.918 24.812 26.281 24.812 14.508 0 26.531-11.175 26.531-24.812v-48.844z"/>
<path id="path4958" class="path-up" d="m431.66 824.49 0.0312 42.188 9.5312-0.9375v-0.78125l0.21875 0.75 11.219-1.125-10.281-40.094h-10.719z"/>
<path id="path4956" class="path-up" d="m495.91 824.49-9.4688 36.656 18.469-1.8438v-34.812h-9z"/>
<path id="path4954" d="m504.91 861.3-19 1.9375-16.844 65.25-15.906-61.938-11.188 1.125 20.875 75.344h12.469l19.875-77.469v77.469h9.7188v-81.719z"/>
<path id="path3013" d="m441.22 867.74-9.5312 0.96875 0.0937 74.312h9.4375v-75.281z"/>
<path id="path4950" class="path-up" d="m520.5 824.49 0.0312 33.375 9.5625-0.9375v-22.875h35.969v-9.5625h-45.562z"/>
<path id="path3015" d="m530.09 858.96-9.5625 0.96875 0.125 83.094h45.406v-9.5938h-35.969v-55.562h32.062v-8.125h-32.062v-10.781z"/>
</g>
</g>
</svg>
</body>
Raw
script.js
var timeline = new TimelineMax(),
down = $('#guillaume path').not('.path-up'),
up = $('#guillaume .path-up');
console.log(down, up);
timeline.fromTo(down, 0.5, {
'display': 'block',
'y': '300px',
'fill': 'white'
}, {
'y': '0px',
})
.staggerFromTo(up, 0.1, {
'display': 'block',
'y': '-300px',
'fill': 'white'
}, {
'y': '0px',
}, 0.1)
Raw
style.css
body {
background-color: black;
text-align:center;
padding: 0;
margin: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment