part of a set of mockups (eventually implemented a bit differently in a real ad platform) for a campaign last year. keeping a running collection of mocks here:
Created
November 27, 2019 03:35
-
-
Save CodeMyUI/9c20e986fdeebce1c1ab4d0a44ce80ad to your computer and use it in GitHub Desktop.
GSAP Banner Ad - Animating Clippath - B (320x50)
This file contains 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
| <svg id="ad_01" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="320px" height="50px" viewBox="0 0 320 50" enable-background="new 0 0 320 50" xml:space="preserve"> | |
| <defs> | |
| <clipPath id="clp_1"> | |
| <polygon points="0,0 105,0 105,0 0,0" /> | |
| </clipPath> | |
| <clipPath id="clp_2"> | |
| <polygon points="80,50 215,50 215,50 80,50" /> | |
| </clipPath> | |
| <clipPath id="clp_3"> | |
| <polygon points="240,0 320,0 320,0 240,0" /> | |
| </clipPath> | |
| <clipPath id="clp_4"> | |
| <polygon points="0,0 105,0 80,50 0,50" /> | |
| </clipPath> | |
| <clipPath id="grclp_1"> | |
| <polygon points="0,0 345,0 320,50 -25,50" /> | |
| </clipPath> | |
| <clipPath id="grclp_2"> | |
| <polygon points="0,0 0,0 -25,50 -25,50" /> | |
| </clipPath> | |
| <clipPath id="logo_clp"> | |
| <polygon points="206,0 206,0 206,50 206,50" /> | |
| </clipPath> | |
| </defs> | |
| <g id="ad_cta"> | |
| <rect fill="#5e5f61" x="8" y="12" width="160" height="26"/> | |
| <text class="txt txt_3" fill="#fff" x="13" y="29">ORDER A FREE SAMPLE <tspan class="txt_b">NOW</tspan></text> | |
| <path fill="#fff" d="M0.28,21.22a0.93,0.93,0,0,0,.66.28,0.92,0.92,0,0,0,.66-0.28l9.81-9.81a0.94,0.94,0,0,0,0-1.33L1.6,0.27A0.94,0.94,0,0,0,.28,1.6l9.15,9.15L0.28,19.89A0.94,0.94,0,0,0,.28,21.22Z" transform="translate(156, 19.8) scale(0.48)"/> | |
| </g> | |
| <g id="logo"> | |
| <path id="logo_1" fill="#5e5f61" d="m187.133334,27.2l8.1,8.3l8.2,-8.3" /> | |
| <path id="logo_2" fill="#5e5f61" d="m195,18.1l-3.7,3.8l4.5,4.5l7.4,0" /> | |
| <path id="logo_3" fill="#5e5f61" d="m186.2,18.1l-8.1,8.3l16.3,0" /> | |
| <g id="logo_text" clip-path="url(#logo_clp)"> | |
| <path fill="#5e5f61" d="m207.8,26c0,-1.8 1,-2.8 2.8,-2.8c1.2,0 2.2,0.4 2.6,1.5l0.7,-0.3c-0.6,-1.3 -2,-1.8 -3.3,-1.8c-2.1,0 -3.6,1.2 -3.6,3.4c0,1.9 1.2,3.4 3.6,3.4c1.5,0 2.7,-0.5 3.4,-1.9l-0.7,-0.3c-0.5,1 -1.4,1.5 -2.6,1.5c-2,-0.1 -2.9,-1.2 -2.9,-2.7" /> | |
| <path fill="#5e5f61" d="m222.4,26.2c0.8,0 2,-0.4 2,-1.8c0,-1.6 -1.5,-1.8 -2.5,-1.8l-3.7,0l0,6.4l0.8,0l0,-2.8l2.5,0l2,2.8l0.9,0l-2,-2.8zm-3.4,-0.6l0,-2.2l2.7,0c1.1,0 1.9,0.2 1.9,1.1c0,0.9 -0.8,1.1 -1.9,1.1l-2.7,0z" /> | |
| <path fill="#5e5f61" d="m232.4,22.5c-2.2,0 -3.7,1.3 -3.7,3.4c0,2.3 1.9,3.3 3.7,3.3c1.8,0 3.7,-1.1 3.7,-3.3c0,-2.1 -1.6,-3.4 -3.7,-3.4m0,6.1c-1.6,0 -2.9,-0.8 -2.9,-2.8c0,-1.4 1.1,-2.6 2.9,-2.6c1.8,0 2.9,1.2 2.9,2.6c0,1.9 -1.4,2.8 -2.9,2.8" /> | |
| <path fill="#5e5f61" d="m240.9,24.3c0,-0.8 0.9,-1.1 2.2,-1.1c1.7,0 2.3,0.8 2.6,1.1l0.6,-0.5c-0.4,-0.6 -1.5,-1.3 -3.1,-1.3c-1.7,0 -3,0.6 -3,1.9c0,2.6 5.5,0.9 5.5,2.8c0,1 -1.3,1.3 -2.3,1.3c-1.9,0 -2.5,-0.8 -2.9,-1.3l-0.6,0.5c0.5,0.6 1.3,1.5 3.4,1.5c2.2,0 3.2,-0.9 3.2,-2c-0.1,-2.8 -5.6,-0.9 -5.6,-2.9" /> | |
| <path fill="#5e5f61" d="m251.3,24.3c0,-0.8 0.9,-1.1 2.2,-1.1c1.7,0 2.3,0.8 2.6,1.1l0.6,-0.5c-0.4,-0.6 -1.5,-1.3 -3.1,-1.3c-1.7,0 -3,0.6 -3,1.9c0,2.6 5.5,0.9 5.5,2.8c0,1 -1.3,1.3 -2.3,1.3c-1.9,0 -2.5,-0.8 -2.9,-1.3l-0.6,0.5c0.5,0.6 1.3,1.5 3.4,1.5c2.2,0 3.2,-0.9 3.2,-2c-0.1,-2.8 -5.6,-0.9 -5.6,-2.9" /> | |
| <path fill="#5e5f61" d="m264.3,29.1l3.3,-6.4l-0.9,0l-2.8,5.6l-2.8,-5.6l-0.8,0l3.2,6.4" /> | |
| <path fill="#5e5f61" d="m271.5,22.700001l0.8,0l0,6.4l-0.8,0l0,-6.4z" /> | |
| <path fill="#5e5f61" d="m277.93334,29.1l5.699982,0l0,-0.700001l-5,0l0,-5.699999l-0.699982,0" /> | |
| <path fill="#5e5f61" d="m287.9,29.1l5.8,0l0,-0.7l-5,0l0,-5.7l-0.8,0" /> | |
| <path fill="#5e5f61" d="m296.4,29.1l5.8,0l0,-0.7l-5,0l0,-2.3l4.1,0l0,-0.7l-4.1,0l0,-2l4.9,0l0,-0.7l-5.7,0" /> | |
| <path fill="#5e5f61" d="m305,28.6c-0.6,0 -1.1,0.5 -1.1,1.1c0,0.7 0.5,1.1 1.1,1.1c0.6,0 1.1,-0.5 1.1,-1.1c0,-0.6 -0.5,-1.1 -1.1,-1.1m0,2.1c-0.5,0 -0.9,-0.4 -0.9,-0.9c0,-0.5 0.4,-0.9 0.9,-0.9c0.5,0 0.9,0.4 0.9,0.9c0,0.5 -0.4,0.9 -0.9,0.9" /> | |
| <path fill="#5e5f61" d="m305.5,29.5c0,-0.3 -0.2,-0.4 -0.5,-0.4l-0.5,0l0,1.3l0.2,0l0,-0.6l0.2,0l0.3,0.6l0.2,0l-0.4,-0.6c0.4,0 0.5,-0.1 0.5,-0.3m-0.7,0.2l0,-0.4l0.3,0c0.1,0 0.3,0 0.3,0.2c0,0.2 -0.1,0.2 -0.3,0.2l-0.3,0z" /> | |
| </g> | |
| </g> | |
| <g clip-path="url(#grclp_2)"> | |
| <image clip-path="url(#clp_4)" x="0" y="0" width="105" height="50" xlink:href="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QORaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzExMSA3OS4xNTgzMjUsIDIwMTUvMDkvMTAtMDE6MTA6MjAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6YzBmZDNkYmMtMzRiYi00ZjU5LWFjYTYtM2RkNTM0MDdlNzA2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjhCODAyMEZCQTU1QzExRTY5RDU4RkU1MzAwRDc5NTU1IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjhCODAyMEZBQTU1QzExRTY5RDU4RkU1MzAwRDc5NTU1IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1LjUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpjZTRmNWZhMS02MWQwLTQ3OTUtODIxMS0wMDdiMWU5OTE0MWUiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo1ODFkYTUzOC1jYTNjLTExNzktYmRmMi1jYTA3YWVjOTg3OTkiLz4g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" /> | |
| <text class="txt" fill="#5e5f61" x="132" y="22">A beautiful solution forging</text> | |
| <text class="txt txt_b" fill="#5e5f61" x="163" y="38">strength & style</text> | |
| </g> | |
| <text class="in_1 txt txt_intro" fill="#5e5f61" x="19" y="30">Create a</text> | |
| <text class="in_2 txt txt_intro txt_b" fill="#5e5f61" x="83" y="30">timeless look</text> | |
| <text class="in_3 txt txt_intro" fill="#5e5f61" x="185" y="30">on your timeline</text> | |
| <g clip-path="url(#grclp_1)"> | |
| <text id="txtIntro" class="txt" fill="#5e5f61" x="132" y="31">Introducing</text> | |
| <text id="txtAlt" class="txt txt_b" fill="#5e5f61" x="206" y="31">Altered State</text> | |
| <image clip-path="url(#clp_3)" x="215" y="0" width="105" height="50" xlink:href="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QORaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzExMSA3OS4xNTgzMjUsIDIwMTUvMDkvMTAtMDE6MTA6MjAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6YzBmZDNkYmMtMzRiYi00ZjU5LWFjYTYtM2RkNTM0MDdlNzA2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjhCODAyMEZGQTU1QzExRTY5RDU4RkU1MzAwRDc5NTU1IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjhCODAyMEZFQTU1QzExRTY5RDU4RkU1MzAwRDc5NTU1IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1LjUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpjZTRmNWZhMS02MWQwLTQ3OTUtODIxMS0wMDdiMWU5OTE0MWUiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo1ODFkYTUzOC1jYTNjLTExNzktYmRmMi1jYTA3YWVjOTg3OTkiLz4g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" /> | |
| <image clip-path="url(#clp_2)" x="80" y="0" width="160" height="50" xlink:href="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QORaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzExMSA3OS4xNTgzMjUsIDIwMTUvMDkvMTAtMDE6MTA6MjAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6YzBmZDNkYmMtMzRiYi00ZjU5LWFjYTYtM2RkNTM0MDdlNzA2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJENUI0NzVFQTU1RDExRTY5RDU4RkU1MzAwRDc5NTU1IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjhCODAyMTAyQTU1QzExRTY5RDU4RkU1MzAwRDc5NTU1IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1LjUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpjZTRmNWZhMS02MWQwLTQ3OTUtODIxMS0wMDdiMWU5OTE0MWUiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo1ODFkYTUzOC1jYTNjLTExNzktYmRmMi1jYTA3YWVjOTg3OTkiLz4g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" /> | |
| <image clip-path="url(#clp_1)" x="0" y="0" width="105" height="50" xlink:href="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QORaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzExMSA3OS4xNTgzMjUsIDIwMTUvMDkvMTAtMDE6MTA6MjAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6YzBmZDNkYmMtMzRiYi00ZjU5LWFjYTYtM2RkNTM0MDdlNzA2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjI0RDgzM0U0QTUyNjExRTY5RDU4RkU1MzAwRDc5NTU1IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI0RDgzM0UzQTUyNjExRTY5RDU4RkU1MzAwRDc5NTU1IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1LjUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpjZTRmNWZhMS02MWQwLTQ3OTUtODIxMS0wMDdiMWU5OTE0MWUiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo1ODFkYTUzOC1jYTNjLTExNzktYmRmMi1jYTA3YWVjOTg3OTkiLz4g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" /> | |
| </g> | |
| </svg> |
This file contains 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 animateAd() { | |
| var tl = new TimelineMax({repeat:-1, paused: false, yoyo: false}); | |
| tAnim = 0.7; | |
| tl.fromTo(['.in_1','.in_3'], tAnim*2, { | |
| opacity: 0, | |
| y: -60 | |
| }, { | |
| opacity: 1, | |
| y: 0, | |
| ease:Power2.easeOut | |
| }, '+=' + tAnim/2) | |
| .fromTo('.in_2', tAnim*2, { | |
| opacity: 0, | |
| y: 60 | |
| }, { | |
| opacity: 1, | |
| y: 0, | |
| ease:Power2.easeOut | |
| }, '-=' + tAnim*2) | |
| .to('#clp_1 polygon', tAnim, { | |
| attr:{points:"0,0 105,0 80,50 0,50"}, | |
| ease:Power3.easeInOut | |
| }, '+=' + tAnim*3) | |
| .to('#clp_2 polygon', tAnim, { | |
| attr:{points:"105,0 240,0 215,50 80,50"}, | |
| ease:Power3.easeInOut | |
| }, '-=' + tAnim) | |
| .to('#clp_3 polygon', tAnim, { | |
| attr:{points:"240,0 320,0 320,50 215,50"}, | |
| ease:Power3.easeInOut | |
| }, '-=' + tAnim) | |
| .set('.txt_intro', { | |
| opacity: 0 | |
| }) | |
| .to('#clp_2 polygon', tAnim, { | |
| attr:{points:"105,0 240,0 240,0 80,0"}, | |
| ease:Power3.easeInOut | |
| }, '+=' + tAnim) | |
| .to('#clp_3 polygon', tAnim, { | |
| attr:{points:"215,50 320,50 320,50 215,50"}, | |
| ease:Power3.easeInOut | |
| }, '-=' + tAnim) | |
| .fromTo('#txtIntro', tAnim/2, { | |
| opacity: 0, | |
| y: 20 | |
| }, { | |
| opacity: 1, | |
| y: 0 | |
| }, '-=' + tAnim/4) | |
| .fromTo('#txtAlt', tAnim/2, { | |
| opacity: 0, | |
| y: -20 | |
| }, { | |
| opacity: 1, | |
| y: 0 | |
| }, '-=' + tAnim/2) | |
| .to('#grclp_1 polygon', tAnim*1.5, { | |
| attr:{points:"345,0 345,0 320,50 320,50"}, | |
| ease:Power3.easeIn | |
| }, '+=' + tAnim*1.5) | |
| .set(['#txtAlt', '#txtIntro'], { | |
| opacity: 0 | |
| }) | |
| .to('#grclp_2 polygon', tAnim*1.5, { | |
| attr:{points:"0,0 345,0 320,50 -25,50"}, | |
| ease:Power3.easeOut | |
| }, '-=' + tAnim/6) | |
| .set('#logo_2', { | |
| opacity: 0 | |
| }) | |
| .set('#logo_3', { | |
| rotation: 180, | |
| y: 1, | |
| x: 8, | |
| transformOrigin: "50% 100%" | |
| }) | |
| .to('#grclp_2 polygon', tAnim*1.5, { | |
| attr:{points:"345,0 345,0 320,50 320,50"}, | |
| ease:Power3.easeIn | |
| }, '+=' + tAnim*2) | |
| .to('#logo', tAnim/2, { | |
| opacity: 1 | |
| }, '-=' + tAnim/8) | |
| .to('#logo_3', tAnim/2, { | |
| rotation: 0, | |
| y: 0, | |
| x: 8, | |
| transformOrigin: "50% 100%", | |
| ease:Power3.easeIn | |
| }, '-=' + tAnim/1.5) | |
| .set('#logo_2', { | |
| opacity: 1 | |
| }) | |
| .to('#logo_3', tAnim/2, { | |
| x: 0, | |
| transformOrigin: "50% 100%", | |
| ease:Power3.easeOut | |
| }) | |
| .to('#logo_clp polygon', tAnim*1.6, { | |
| attr:{points:"206,0 320,0 320,50 206,50"}, | |
| ease:Power3.easeOut | |
| }, '-=' + tAnim) | |
| .fromTo('#ad_cta', tAnim/2, { | |
| opacity: 0, | |
| transformOrigin: "50% 50%", | |
| scale: 0.001 | |
| }, { | |
| opacity: 1, | |
| transformOrigin: "50% 50%", | |
| scale: 1, | |
| ease: Back.easeOut.config(1.3) | |
| }, "-=" + tAnim/2) | |
| .to('#ad_cta', tAnim/2, { | |
| opacity: 0, | |
| y: -30, | |
| ease: Back.easeIn.config(1.7) | |
| }, "+=" + tAnim*4) | |
| .to('#logo', tAnim/2, { | |
| opacity: 0, | |
| y: 30, | |
| ease: Back.easeIn.config(1.7) | |
| }, "-=" + tAnim/4); | |
| } | |
| animateAd(); |
This file contains 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="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> |
This file contains 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
| body { | |
| background: #eff; | |
| background: linear-gradient(to left, #eee, #ddefef); | |
| } | |
| svg { | |
| background: #fff; | |
| width: 100%; | |
| max-width: 320px; | |
| height: auto; | |
| } | |
| .txt_1, .txt_2, .txt_intro, #ad_cta, #logo, #txtIntro, #txtAlt { | |
| opacity: 0; | |
| } | |
| .txt { | |
| font-family: 'Roboto', sans-serif; | |
| font-weight: 300; | |
| font-size: 14px; | |
| } | |
| .txt_intro { | |
| font-size: 16px; | |
| } | |
| .txt_b { | |
| font-weight: 500; | |
| } | |
| .txt_3 { | |
| opacity: 1; | |
| font-size: 10.2px; | |
| } |
This file contains 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
| <link href="https://codepen.io/halvves/pen/fa63b7330a44789bc714d6b77a1414a5" rel="stylesheet" /> | |
| <link href="https://fonts.googleapis.com/css?family=Roboto:300,500" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment