Skip to content

Instantly share code, notes, and snippets.

@imlinus

imlinus/animated-unsubscribe-page.markdown

Created October 17, 2018 13:06
Show Gist options
  • Save imlinus/533b8627480edcf4d252ac9872a569e4 to your computer and use it in GitHub Desktop.
Save imlinus/533b8627480edcf4d252ac9872a569e4 to your computer and use it in GitHub Desktop.
Download ZIP
Animated Unsubscribe Page
Raw
animated-unsubscribe-page.markdown
Raw
index.html
<div class="container">
<svg id="svg" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 590 484.7">
<g id="blobs">
<path id="blob-1" d="M545.5,299c0,80.3-28.6,150.4-126.4,139.4-63.2-7.1-109.3-37.3-142.6-37.3-45.7,0-105.4,29.3-146.8,22.2-69-11.7-85.3-66.8-85.3-135.8,0-56.3,25.5-99.9,46.2-140.8,18.3-36.1,55.9-97.8,125.1-100.5,53.3-2.1,97.4,50.5,138.4,74.2,49.9,28.8,98.4-1.8,126,1.3C537.9,127.9,545.5,265.5,545.5,299Z" fill="#eddfeb"/>
<path id="blob-3" d="M55.1,300.7c0,80.3,27.4,150.4,121,139.4,60.5-7.1,104.7-37.3,136.5-37.3,43.8,0,100.9,29.3,140.5,22.2,66-11.7,81.7-66.8,81.7-135.8,0-56.3-16.2-103.6-36.1-144.5-17.6-36.1-54.9-97.4-121.2-100.1-51-2.1-100.1,53.8-139.4,77.5-47.8,28.8-94.3-1.8-120.7,1.3C62.4,129.6,55.1,267.1,55.1,300.7Z" fill="#eddfeb"/>
</g>
<g id="confetti" class="confetti">
<rect x="284" y="230.4" width="17.7" height="17.67" rx="4" ry="4" fill="#543093"/>
<rect x="284" y="230.4" width="17.7" height="17.67" rx="4" ry="4" fill="#543093"/>
<rect x="285.4" y="231.7" width="17.7" height="17.67" rx="4" ry="4" fill="#fff"/>
<rect x="285.4" y="231.7" width="17.7" height="17.67" rx="4" ry="4" fill="#fff"/>
<rect x="285.4" y="230.1" width="17.7" height="17.67" rx="4" ry="4" fill="#d960ae"/>
<rect x="285.4" y="230.1" width="17.7" height="17.67" rx="4" ry="4" fill="#d960ae"/>
<rect x="285.4" y="231.7" width="17.7" height="17.67" rx="4" ry="4" fill="#f3c1df"/>
<rect x="285.4" y="231.7" width="17.7" height="17.67" rx="4" ry="4" fill="#f3c1df"/>
<circle cx="294.1" cy="241.3" r="9.7" fill="#543093"/>
<circle cx="294.1" cy="243.6" r="12" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2"/>
<circle cx="294.2" cy="243.6" r="12" fill="#fff"/>
<circle cx="294.2" cy="243.6" r="12" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2"/>
<circle cx="294.2" cy="243.6" r="12" fill="none" stroke="#d960ae" stroke-miterlimit="10" stroke-width="2"/>
<circle cx="294.2" cy="243.6" r="12" fill="none" stroke="#d960ae" stroke-miterlimit="10" stroke-width="2"/>
<circle cx="295.9" cy="242.1" r="12" fill="none" stroke="#543093" stroke-miterlimit="10" stroke-width="2"/>
<circle cx="295.9" cy="242.1" r="12" fill="none" stroke="#543093" stroke-miterlimit="10" stroke-width="2"/>
<circle cx="294.1" cy="241.3" r="9.7" fill="#d960ae"/>
<circle cx="294.1" cy="241.3" r="9.7" fill="#d960ae"/>
<circle cx="292.9" cy="241.3" r="9.7" fill="#fff"/>
<circle cx="294.1" cy="241.3" r="9.7" fill="#d960ae"/>
<circle cx="294.1" cy="241.3" r="9.7" fill="#543093"/>
<circle cx="294.1" cy="241.3" r="9.7" fill="#d960ae"/>
<circle cx="294.1" cy="241.3" r="9.7" fill="#543093"/>
<circle cx="294.1" cy="241.3" r="9.7" fill="#543093"/>
<path d="M300.9,243.2l-3-3a1.5,1.5,0,0,1,0-2.1l3-3a2,2,0,0,0,.3-2.5,1.9,1.9,0,0,0-2.9-.3l-3.1,3.1a1.5,1.5,0,0,1-2.1,0l-3-3a2,2,0,0,0-2.5-.3,1.9,1.9,0,0,0-.3,2.9l3.1,3.1a1.5,1.5,0,0,1,0,2.1l-3,3a2,2,0,0,0-.3,2.5,1.9,1.9,0,0,0,2.9.3l3.1-3.1a1.5,1.5,0,0,1,2.1,0l3.1,3.1a1.9,1.9,0,0,0,2.9-.3A2,2,0,0,0,300.9,243.2Z" fill="#f3c1df"/>
<path d="M300.9,243.2l-3-3a1.5,1.5,0,0,1,0-2.1l3-3a2,2,0,0,0,.3-2.5,1.9,1.9,0,0,0-2.9-.3l-3.1,3.1a1.5,1.5,0,0,1-2.1,0l-3-3a2,2,0,0,0-2.5-.3,1.9,1.9,0,0,0-.3,2.9l3.1,3.1a1.5,1.5,0,0,1,0,2.1l-3,3a2,2,0,0,0-.3,2.5,1.9,1.9,0,0,0,2.9.3l3.1-3.1a1.5,1.5,0,0,1,2.1,0l3.1,3.1a1.9,1.9,0,0,0,2.9-.3A2,2,0,0,0,300.9,243.2Z" fill="#543093"/>
<path d="M300.9,243.2l-3-3a1.5,1.5,0,0,1,0-2.1l3-3a2,2,0,0,0,.3-2.5,1.9,1.9,0,0,0-2.9-.3l-3.1,3.1a1.5,1.5,0,0,1-2.1,0l-3-3a2,2,0,0,0-2.5-.3,1.9,1.9,0,0,0-.3,2.9l3.1,3.1a1.5,1.5,0,0,1,0,2.1l-3,3a2,2,0,0,0-.3,2.5,1.9,1.9,0,0,0,2.9.3l3.1-3.1a1.5,1.5,0,0,1,2.1,0l3.1,3.1a1.9,1.9,0,0,0,2.9-.3A2,2,0,0,0,300.9,243.2Z" fill="#d960ae"/>
<path d="M300.9,243.2l-3-3a1.5,1.5,0,0,1,0-2.1l3-3a2,2,0,0,0,.3-2.5,1.9,1.9,0,0,0-2.9-.3l-3.1,3.1a1.5,1.5,0,0,1-2.1,0l-3-3a2,2,0,0,0-2.5-.3,1.9,1.9,0,0,0-.3,2.9l3.1,3.1a1.5,1.5,0,0,1,0,2.1l-3,3a2,2,0,0,0-.3,2.5,1.9,1.9,0,0,0,2.9.3l3.1-3.1a1.5,1.5,0,0,1,2.1,0l3.1,3.1a1.9,1.9,0,0,0,2.9-.3A2,2,0,0,0,300.9,243.2Z" fill="#f3c1df"/>
<path d="M300.9,243.2l-3-3a1.5,1.5,0,0,1,0-2.1l3-3a2,2,0,0,0,.3-2.5,1.9,1.9,0,0,0-2.9-.3l-3.1,3.1a1.5,1.5,0,0,1-2.1,0l-3-3a2,2,0,0,0-2.5-.3,1.9,1.9,0,0,0-.3,2.9l3.1,3.1a1.5,1.5,0,0,1,0,2.1l-3,3a2,2,0,0,0-.3,2.5,1.9,1.9,0,0,0,2.9.3l3.1-3.1a1.5,1.5,0,0,1,2.1,0l3.1,3.1a1.9,1.9,0,0,0,2.9-.3A2,2,0,0,0,300.9,243.2Z" fill="#fff"/>
<path d="M300.9,243.2l-3-3a1.5,1.5,0,0,1,0-2.1l3-3a2,2,0,0,0,.3-2.5,1.9,1.9,0,0,0-2.9-.3l-3.1,3.1a1.5,1.5,0,0,1-2.1,0l-3-3a2,2,0,0,0-2.5-.3,1.9,1.9,0,0,0-.3,2.9l3.1,3.1a1.5,1.5,0,0,1,0,2.1l-3,3a2,2,0,0,0-.3,2.5,1.9,1.9,0,0,0,2.9.3l3.1-3.1a1.5,1.5,0,0,1,2.1,0l3.1,3.1a1.9,1.9,0,0,0,2.9-.3A2,2,0,0,0,300.9,243.2Z" fill="#543093"/>
<path d="M300.9,243.1l-3-3a1.5,1.5,0,0,1,0-2.1l3-3a2,2,0,0,0,.3-2.5,1.9,1.9,0,0,0-2.9-.3l-3.1,3.1a1.5,1.5,0,0,1-2.1,0l-3-3a2,2,0,0,0-2.5-.3,1.9,1.9,0,0,0-.3,2.9l3.1,3.1a1.5,1.5,0,0,1,0,2.1l-3,3a2,2,0,0,0-.3,2.5,1.9,1.9,0,0,0,2.9.3l3.1-3.1a1.5,1.5,0,0,1,2.1,0l3.1,3.1a1.9,1.9,0,0,0,2.9-.3A2,2,0,0,0,300.9,243.1Z" fill="#d960ae"/>
<path d="M300.9,243.1l-3-3a1.5,1.5,0,0,1,0-2.1l3-3a2,2,0,0,0,.3-2.5,1.9,1.9,0,0,0-2.9-.3l-3.1,3.1a1.5,1.5,0,0,1-2.1,0l-3-3a2,2,0,0,0-2.5-.3,1.9,1.9,0,0,0-.3,2.9l3.1,3.1a1.5,1.5,0,0,1,0,2.1l-3,3a2,2,0,0,0-.3,2.5,1.9,1.9,0,0,0,2.9.3l3.1-3.1a1.5,1.5,0,0,1,2.1,0l3.1,3.1a1.9,1.9,0,0,0,2.9-.3A2,2,0,0,0,300.9,243.1Z" fill="#f3c1df"/>
<path d="M300.9,243.2l-3-3a1.5,1.5,0,0,1,0-2.1l3-3a2,2,0,0,0,.3-2.5,1.9,1.9,0,0,0-2.9-.3l-3.1,3.1a1.5,1.5,0,0,1-2.1,0l-3-3a2,2,0,0,0-2.5-.3,1.9,1.9,0,0,0-.3,2.9l3.1,3.1a1.5,1.5,0,0,1,0,2.1l-3,3a2,2,0,0,0-.3,2.5,1.9,1.9,0,0,0,2.9.3l3.1-3.1a1.5,1.5,0,0,1,2.1,0l3.1,3.1a1.9,1.9,0,0,0,2.9-.3A2,2,0,0,0,300.9,243.2Z" fill="#543093"/>
<path d="M300.9,243.2l-3-3a1.5,1.5,0,0,1,0-2.1l3-3a2,2,0,0,0,.3-2.5,1.9,1.9,0,0,0-2.9-.3l-3.1,3.1a1.5,1.5,0,0,1-2.1,0l-3-3a2,2,0,0,0-2.5-.3,1.9,1.9,0,0,0-.3,2.9l3.1,3.1a1.5,1.5,0,0,1,0,2.1l-3,3a2,2,0,0,0-.3,2.5,1.9,1.9,0,0,0,2.9.3l3.1-3.1a1.5,1.5,0,0,1,2.1,0l3.1,3.1a1.9,1.9,0,0,0,2.9-.3A2,2,0,0,0,300.9,243.2Z" fill="#d960ae"/>
<path d="M300.9,243.2l-3-3a1.5,1.5,0,0,1,0-2.1l3-3a2,2,0,0,0,.3-2.5,1.9,1.9,0,0,0-2.9-.3l-3.1,3.1a1.5,1.5,0,0,1-2.1,0l-3-3a2,2,0,0,0-2.5-.3,1.9,1.9,0,0,0-.3,2.9l3.1,3.1a1.5,1.5,0,0,1,0,2.1l-3,3a2,2,0,0,0-.3,2.5,1.9,1.9,0,0,0,2.9.3l3.1-3.1a1.5,1.5,0,0,1,2.1,0l3.1,3.1a1.9,1.9,0,0,0,2.9-.3A2,2,0,0,0,300.9,243.2Z" fill="#f3c1df"/>
<path d="M300.9,243.2l-3-3a1.5,1.5,0,0,1,0-2.1l3-3a2,2,0,0,0,.3-2.5,1.9,1.9,0,0,0-2.9-.3l-3.1,3.1a1.5,1.5,0,0,1-2.1,0l-3-3a2,2,0,0,0-2.5-.3,1.9,1.9,0,0,0-.3,2.9l3.1,3.1a1.5,1.5,0,0,1,0,2.1l-3,3a2,2,0,0,0-.3,2.5,1.9,1.9,0,0,0,2.9.3l3.1-3.1a1.5,1.5,0,0,1,2.1,0l3.1,3.1a1.9,1.9,0,0,0,2.9-.3A2,2,0,0,0,300.9,243.2Z" fill="#fff"/>
<path d="M300.9,243.1l-3-3a1.5,1.5,0,0,1,0-2.1l3-3a2,2,0,0,0,.3-2.5,1.9,1.9,0,0,0-2.9-.3l-3.1,3.1a1.5,1.5,0,0,1-2.1,0l-3-3a2,2,0,0,0-2.5-.3,1.9,1.9,0,0,0-.3,2.9l3.1,3.1a1.5,1.5,0,0,1,0,2.1l-3,3a2,2,0,0,0-.3,2.5,1.9,1.9,0,0,0,2.9.3l3.1-3.1a1.5,1.5,0,0,1,2.1,0l3.1,3.1a1.9,1.9,0,0,0,2.9-.3A2,2,0,0,0,300.9,243.1Z" fill="#d960ae"/>
<path d="M300.9,243.1l-3-3a1.5,1.5,0,0,1,0-2.1l3-3a2,2,0,0,0,.3-2.5,1.9,1.9,0,0,0-2.9-.3l-3.1,3.1a1.5,1.5,0,0,1-2.1,0l-3-3a2,2,0,0,0-2.5-.3,1.9,1.9,0,0,0-.3,2.9l3.1,3.1a1.5,1.5,0,0,1,0,2.1l-3,3a2,2,0,0,0-.3,2.5,1.9,1.9,0,0,0,2.9.3l3.1-3.1a1.5,1.5,0,0,1,2.1,0l3.1,3.1a1.9,1.9,0,0,0,2.9-.3A2,2,0,0,0,300.9,243.1Z" fill="#f3c1df"/>
</g>
<g id="envelope">
<path id="Background" d="M452.9,376.3a26.1,26.1,0,0,1-25.5,20.8H162.6a26.1,26.1,0,0,1-26-26V193.2a26.1,26.1,0,0,1,26-26H427.4a26.1,26.1,0,0,1,26,26V371.1a25.9,25.9,0,0,1-.5,5.2" fill="#d960ae" stroke="#543093" stroke-miterlimit="10" stroke-width="5"/>
<g id="paper-group">
<rect id="paper" x="157.3" y="87.6" width="275.3" height="266.33" rx="26" ry="26" fill="#fff" stroke="#543093" stroke-miterlimit="10" stroke-width="5"/>
<g id="face">
<g id="mouth">
<path id="mouth-scared" d="M275,220a18.7,18.7,0,0,1,35.9.1" fill="none" stroke="#543093" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5"/>
<path id="mouth-sad" d="M258.8,231.9c3.9-14.5,17.7-25.2,34-25.2s30.3,10.8,34.1,25.4" fill="none" stroke="#543093" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5"/>
<path id="mouth-worry" d="M271.1,218.7c10-11.1,28.2-15,43.6-9.4" fill="none" stroke="#543093" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5"/>
<path id="mouth-happy" d="M259.3,207c3.9,14.5,17.7,25.2,34,25.2s30.3-10.8,34.1-25.4" fill="none" stroke="#543093" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5"/>
<g id="mouth-laughing">
<path id="open-mouth" d="M323.8,208.3c3.9,0,6.7,3.9,5.9,7.9a37.5,37.5,0,0,1-73.5,0c-0.9-4.1,2-7.9,5.9-7.9h61.7Z" fill="#543093" opacity="0.98"/>
<path id="tongue" d="M293.2,241.1c6.9,0,13.1-2.3,17.3-5.9a2.1,2.1,0,0,0,.5-2.6c-3.1-5.8-9.9-9.8-17.8-9.8s-14.7,4-17.8,9.8a2.1,2.1,0,0,0,.5,2.5C280,238.8,286.2,241.1,293.2,241.1Z" fill="#d960ae"/>
</g>
</g>
<g id="eye-group">
<g id="eyes" class="eyes">
<ellipse id="eye-right" cx="349" cy="172.8" rx="11.2" ry="13.8" fill="#543093" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5" />
<ellipse id="eye-left" cx="235.5" cy="172.8" rx="11.2" ry="13.8" fill="#543093" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5" /> <path id="eyebrow-sad-right" d="M341.9,133.7c2.6,5.3,14.8,14.1,24.3,14.7" fill="none" stroke="#543093" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5"/>
<path id="eyebrow-sad-left" d="M240.7,133.7c-2.6,5.3-14.8,14.1-24.3,14.7" fill="none" stroke="#543093" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5"/>
</g>
<g id="eyes-laughing">
<path id="eye-laughing-right" d="M332.2,174c0-8.3,7.5-15,16.8-15s16.8,6.7,16.8,15" fill="none" stroke="#543093" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5"/>
<path id="eye-laughing-left" d="M218.7,174c0-8.3,7.5-15,16.8-15s16.8,6.7,16.8,15" fill="none" stroke="#543093" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5"/>
</g>
<g id="eyebrows-happy">
<path id="eyebrow-happy-right" d="M366.2,146.3c-2.6-5.3-14.8-14.1-24.3-14.7" fill="none" stroke="#543093" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5"/>
<path id="eyebrow-happy-left" d="M216.4,146.3c2.6-5.3,14.8-14.1,24.3-14.7" fill="none" stroke="#543093" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5"/>
</g>
</g>
</g>
</g>
<path id="back" d="M451.9,186.7S322.4,288.2,313.4,294.1s-27,5.8-36.9,0S137.9,186.5,137.9,186.5a23.6,23.6,0,0,0-1.3,6.7V371.1a26.1,26.1,0,0,0,26,26H427.4a26,26,0,0,0,26-26V193.2C453.4,190.7,452.5,188.9,451.9,186.7Z" fill="#f3c1df" stroke="#543093" stroke-miterlimit="10" stroke-width="5"/>
<g id="shadow">
<path id="shadow-3" d="M263.3,279.7s11.3-8.1,13.1-9.3c9.9-6.5,27-5.8,36.9,0,1.7,1,13.5,9.3,13.5,9.3" fill="none" stroke="#eddfeb" stroke-linejoin="bevel" stroke-width="7"/>
<path id="shadow-2" d="M430.2,193.3L313.4,282.2a26.1,26.1,0,0,1-36.8,0L159.8,193.3V201l116.8,90.6c7.9,5.7,26.9,6.4,37,0l116.6-90.9v-7.4Z" fill="#eddfeb"/>
</g>
<path id="shadow-1" d="M425.2,381.5h-262c-14.1,0-24.2-11-24.2-24.4v13.2c0,13.4,10.1,24.3,24.2,24.3h262c12.7,1.2,23.9-8.4,25.2-19.5a42.8,42.8,0,0,0,.5-4.9V358.1a14.7,14.7,0,0,1-.5,3.9C448,373.1,437.6,381.5,425.2,381.5Z" fill="#d960ae" opacity="0.5"/>
<g id="Front">
<path id="Front-2" data-name="Front" d="M139.8,381.9s127.5-99.5,136.5-105.4,27-5.8,36.9,0S449.8,382.1,449.8,382.1" fill="none" stroke="#543093" stroke-miterlimit="10" stroke-width="5"/>
<path id="Front-3" data-name="Front" d="M225.4,315.3s41.9-33,51-38.9,27-5.8,36.9,0S355,307.9,355,307.9" fill="#f3c1df" stroke="#543093" stroke-miterlimit="10" stroke-width="5"/>
</g>
</g>
</svg>
<div class="bottom">
<h2 class="title">Do you want to unsubscribe?</h2>
<p class="subtitle">If you unsubscribe, you will stop receiving our weekly newsletter.
<p/>
<div class="buttons">
<button id="unsubscribe">Unsubscribe</button>
<button id="cancel">Cancel</button>
<button id="go-back">Go back</button>
</div>
</div>
</div>
Raw
script.babel
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
function setWindowSize() {
windowWidth = window.innerWidth;
windowHeight = window.innerHeight;
};
window.addEventListener('resize', setWindowSize);
var eyes = document.querySelectorAll(".eyes");
var cursorPos = { x: 0, y: 0 };
window.addEventListener("mousemove", mousemove);
window.addEventListener("touchmove", touchmove);
function mousemove(e) {
cursorPos = {
x: e.clientX,
y: e.clientY
};
if (!clicked) {
eyes.forEach(function(el) {
eyeFollow.init(el);
})
}
}
function touchmove(e) {
cursorPos = {
x: e.targetTouches[0].offsetX,
y: e.targetTouches[0].offsetY
};
if (!clicked) {
eyes.forEach(function(el) {
eyeFollow.init(el);
})
}
}
var eyeFollow = (function() {
function getOffset(el) {
el = el.getBoundingClientRect();
return {
x: el.left + window.scrollX,
y: el.top + window.scrollY
};
}
function moveEye(eye) {
var eyeOffset = getOffset(eye);
var bBox = eye.getBBox();
var centerX = eyeOffset.x + bBox.width / 2;
var centerY = eyeOffset.y + bBox.height / 2;
var percentTop = Math.round((cursorPos.y - centerY) * 100 / windowHeight);
var percentLeft = Math.round((cursorPos.x - centerX) * 100 / windowWidth);
eye.style.transform = `translate(${percentLeft/5}px, ${ percentTop/5}px)`
}
return {
init: (el) => {
moveEye(el);
}
};
})();
var clicked, cancelled;
var animate = (function() {
var select = function(el) {
return document.getElementById(el);
};
var svg = select("svg"),
blob1 = select("blob-1"),
blob3 = select("blob-3"),
envelope = select("envelope"),
eyeGroup = select("eye-group"),
paper = select("paper-group"),
mouth = select("mouth"),
mouthHappy = select("mouth-happy"),
mouthScared = select("mouth-scared"),
mouthSad = select("mouth-sad"),
eyeLeft = MorphSVGPlugin.convertToPath(select("eye-left")),
eyeRight = MorphSVGPlugin.convertToPath(select("eye-right")),
eyeLaughingLeft = select("eye-laughing-left"),
eyeLaughingRight = select("eye-laughing-right"),
eyebrowHappyLeft = select("eyebrow-happy-left"),
eyebrowHappyRight = select("eyebrow-happy-right"),
eyebrowSadLeft = select("eyebrow-sad-left"),
eyebrowSadRight = select("eyebrow-sad-right"),
mouthWorry = select("mouth-worry"),
openMouth = select("open-mouth"),
tongue = select("tongue"),
unsubscribeButton = select("unsubscribe"),
cancelButton = select("cancel"),
goBackButton = select("go-back");
var confettis = document.querySelectorAll('#confetti > *');
var title = document.querySelector('.title'),
subtitle = document.querySelector('.subtitle');
var masterTl = new TimelineMax();
unsubscribeButton.addEventListener("mouseover", willUnsubscribe);
cancelButton.addEventListener("mouseover", willCancel);
unsubscribeButton.addEventListener("touchstart", willUnsubscribe);
cancelButton.addEventListener("touchstart", willCancel);
unsubscribeButton.addEventListener("click", hasUnsubscribed);
cancelButton.addEventListener("click", hasCancelled);
unsubscribeButton.addEventListener("mouseout", initFace);
cancelButton.addEventListener("mouseout", initFace);
unsubscribeButton.addEventListener("touchleave", initFace);
cancelButton.addEventListener("touchleave", initFace);
goBackButton.addEventListener("click", goBack);
function animateBlob() {
var speed = 10;
var tlBlob = new TimelineMax({repeat:-1});
tlBlob.to(blob1, speed, {morphSVG:blob3, ease: Power0.easeNone})
.to(blob1, speed, {morphSVG:blob1, ease: Power0.easeNone});
}
function makeConfetti() {
var speed = 3;
var confettiTl = new TimelineMax({ paused:true });
confettis.forEach(function(el) {
var angle = random(0, 360);
var delay = random(0, 6);
var opacity = random(0.5, 1);
var tl = new TimelineMax({delay: delay});
var posX = Math.cos(angle * Math.PI / 180) * 250;
var posY = Math.sin(angle * Math.PI / 180) * 250;
TweenMax.set(el,{autoAlpha:1});
tl.to(el, speed, {x:posX, y: posY, ease:Power0.easeOut, rotation:360, repeat:-1});
confettiTl.add(tl, 0);
});
return confettiTl;
}
//Envelope animations
function happyJump() {
var speed = 0.15;
var happyJumpTl = new TimelineMax({repeat:-1, repeatDelay: 1, delay:0.5, paused:true});
happyJumpTl.to(envelope, speed, {y:-20, ease: Power0.easeNone})
.to(envelope, speed, {y:0, ease: Power0.easeNone})
.to(envelope, speed, {y:-10, ease: Power0.easeNone})
.to(envelope, speed, {y:0, ease: Power0.easeNone})
.to(envelope, speed, {y:-5, ease: Power0.easeNone})
.to(envelope, speed, {y:0, ease: Power0.easeNone});
return happyJumpTl;
}
function shake() {
var speed = 0.1;
var shakeTl = new TimelineMax({repeat:-1, paused:true});
shakeTl.to(envelope, speed, {x:-1, ease: Power0.easeNone})
.to(envelope, speed, {x:1, ease: Power0.easeNone});
return shakeTl;
}
var doJump = happyJump();
var doShake = shake();
var addConfetti = makeConfetti();
function willUnsubscribe() {
masterTl.add(doShake.play());
var speed = 0.2;
TweenMax.to(mouthWorry, speed, {morphSVG:mouthScared, ease: Power0.easeNone});
TweenMax.to(paper, speed, {y:15});
TweenMax.to(eyeGroup, speed, {y:5});
TweenMax.to(mouth, speed, {y:5});
TweenMax.to(eyebrowSadLeft, speed, {y:5});
TweenMax.to(eyebrowSadRight, speed, {y:5});
};
function willCancel() {
var speed = 0.2;
TweenMax.to(mouthWorry, speed, {morphSVG:mouthHappy, ease: Power0.easeNone});
TweenMax.to(eyebrowSadLeft, speed, {morphSVG:eyebrowHappyLeft, ease: Power0.easeNone});
TweenMax.to(eyebrowSadRight, speed, {morphSVG:eyebrowHappyRight, ease: Power0.easeNone});
TweenMax.to(mouth, speed, {y:10});
TweenMax.to(eyebrowSadLeft, speed, {y:-10});
TweenMax.to(eyebrowSadRight, speed, {y:-10});
};
function hasUnsubscribed() {
var speed = 0.2;
TweenMax.to(mouthWorry, speed, {morphSVG:mouthSad, ease: Power0.easeNone});
TweenMax.to(eyeGroup, speed, {y:15});
TweenMax.to(eyebrowSadLeft, speed, {y:10});
TweenMax.to(eyebrowSadRight, speed, {y:10});
title.innerHTML = "We are sad to see you go!";
subtitle.innerHTML = "You have been unsubscribed and will no longer hear from us.";
unsubscribeButton.style.display = 'none';
cancelButton.style.display = 'none';
goBackButton.style.display = 'block';
clicked = true;
masterTl.remove(doShake);
};
function hasCancelled() {
masterTl.add(doJump.play());
masterTl.add(addConfetti.play());
var speed = 0.1;
TweenMax.to(eyeLeft, speed, {morphSVG:eyeLaughingLeft, ease: Power0.easeNone});
TweenMax.to(eyeLeft, speed, {stroke:'#543093', fill:'none', ease: Power0.easeNone});
TweenMax.to(eyeRight, speed, {morphSVG:eyeLaughingRight, ease: Power0.easeNone});
TweenMax.to(eyeRight, speed, {stroke:'#543093', fill:'none', ease: Power0.easeNone});
TweenMax.to(mouthWorry, speed, {morphSVG:openMouth, ease: Power0.easeNone});
TweenMax.to(mouthWorry, speed, {fill:'#543093', stroke:'none', ease: Power0.easeNone});
TweenMax.to(tongue, speed, {css:{display:'block'}, ease: Power0.easeNone});
TweenMax.to(eyeGroup, speed, {y:10});
TweenMax.to(eyebrowSadLeft, speed, {y:0});
TweenMax.to(eyebrowSadRight, speed, {y:0});
title.innerHTML = "Thanks for staying with us!";
subtitle.innerHTML = "You will continue receiving our weekly newsletter. Yay!";
unsubscribeButton.style.display = 'none';
cancelButton.style.display = 'none';
goBackButton.style.display = 'block';
clicked = true;
cancelled = true;
};
function initFace() {
masterTl.remove(doShake);
if (!clicked) {
var speed = 0.1;
TweenMax.to(mouthWorry, speed, {morphSVG:mouthWorry, ease: Power0.easeNone});
TweenMax.to(mouthWorry, speed, {fill:'none', stroke:'#543093', ease: Power0.easeNone})
TweenMax.to(tongue, speed, {css:{display:'none'}, ease: Power0.easeNone})
TweenMax.to(eyebrowSadLeft, speed, {morphSVG:eyebrowSadLeft, ease: Power0.easeNone});
TweenMax.to(eyebrowSadRight, speed, {morphSVG:eyebrowSadRight, ease: Power0.easeNone});
TweenMax.to(paper, speed, {y:0});
TweenMax.to(eyeGroup, speed, {y:0});
TweenMax.to(mouth, speed, {y:0});
TweenMax.to(eyebrowSadLeft, speed, {y:0});
TweenMax.to(eyebrowSadRight, speed, {y:0});
TweenMax.to(eyeLeft, speed, {morphSVG:eyeLeft, ease: Power0.easeNone});
TweenMax.to(eyeLeft, speed, {stroke:'none', fill:'#543093', ease: Power0.easeNone});
TweenMax.to(eyeRight, speed, {morphSVG:eyeRight, ease: Power0.easeNone});
TweenMax.to(eyeRight, speed, {stroke:'none', fill:'#543093', ease: Power0.easeNone});
}
};
function goBack() {
clicked = false;
cancelled = false;
initAnimations();
masterTl.remove(doJump);
masterTl.remove(addConfetti);
confettis.forEach(function(el) {
TweenMax.set(el, {x:0, y: 0, rotation:0});
});
title.innerHTML = "Do you want to unsubscribe?";
subtitle.innerHTML = "If you unsubscribe, you will stop receiving our weekly newsletter.";
unsubscribeButton.style.display = 'block';
cancelButton.style.display = 'block';
goBackButton.style.display = 'none';
};
function initAnimations() {
clicked = false;
initFace();
animateBlob();
}
return {
init: () => {
initAnimations();
}
};
})();
document.addEventListener("DOMContentLoaded", animate.init());
function random(min, max) {
if (max == null) {
max = min;
min = 0;
}
return Math.random() * (max - min) + min;
}
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=10"></script>
Raw
style.scss
body {
width: 100vw;
height: 100vh;
background: #fefefe;
color: #373737;
margin: 0;
padding: 0;
background: #543093;
background: -moz-linear-gradient(45deg, #543093 32%, #d960ae 100%);
background: -webkit-linear-gradient(45deg, #543093 32%, #d960ae 100%);
background: linear-gradient(45deg, #543093 32%, #d960ae 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr="#543093",
endColorstr="#d960ae",
GradientType=1
);
}
* {
box-sizing: border-box;
font-family: "Cabin", Arial, sans-serif;
}
.container {
width: 600px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
margin: 0;
position: absolute;
background: #fefefe;
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
padding-bottom:30px;
box-shadow: 5px 10px 40px 0 rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
svg {
max-width: 90%;
}
.bottom {
text-align: center;
margin-top: 0em;
max-width: 70%;
h2 {
font-family: "Rokkitt", sans-serif;
letter-spacing: 0.05em;
font-size: 30px;
line-height: 1.2;
text-align: center;
margin: 0 auto 0.25em;
}
p {
color: #777;
letter-spacing: 0.1em;
font-size: 16px;
line-height: 1.4;
margin: 0 auto 2em;
}
}
.buttons {
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
button {
padding: 10px 30px;
font-size: 20px;
background-color: #d960ae;
border: 0;
cursor: pointer;
border-radius: 4px;
letter-spacing: 0.1em;
color: #ffffff;
margin-right: 20px;
margin-bottom: 15px;
transition: all 0.25s ease-in-out;
&:hover {
background-color: darken(#d960ae, 10%);
}
&#cancel {
margin-right: 0;
color: #333;
background-color: #eddfeb;
&:hover {
background-color: darken(#eddfeb, 10%);
}
}
&#go-back {
display: none;
}
&:focus {
border: none;
outline: 0;
}
}
}
#blob-3,
#blob-2,
#mouth-happy,
#mouth-sad,
#eyebrow-happy-left,
#eyebrow-happy-right,
#eyes-laughing,
#open-mouth,
#tongue,
#mouth-scared {
display: none;
}
@media (max-width: 699px) {
.container {
width: 90%;
}
.bottom {
margin-top: 1em;
max-width:90%;
}
}
@media (max-width: 399px) {
.container {
padding: 20px;
}
.bottom {
// margin-top: 0em;
// max-width: 90%;
h2 {
font-size: 24px;
}
}
.buttons {
flex-direction: column;
button {
margin-right: 0;
}
}
svg {
padding-top: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment