Built with GSAP 3.0
A Pen by HARUN PEHLİVAN on CodePen.
Created
May 3, 2021 14:10
-
-
Save harunpehlivan/0e17367f3b628d7c3092ff43d5d6a136 to your computer and use it in GitHub Desktop.
Low Poly Experiment
This file contains hidden or 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 class="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"> | |
| <defs> | |
| <polygon id="liquid"></polygon> | |
| <clipPath id="mainMask"> | |
| <polygon points="402.1 325.43 367.12 334.05 340.15 357.94 327.38 391.63 331.72 427.4 352.19 457.05 384.09 473.79 420.12 473.79 452.02 457.05 472.49 427.4 476.83 391.63 464.05 357.94 437.08 334.05 402.1 325.43" fill="#fff" stroke="#000" stroke-miterlimit="10"/> | |
| </clipPath> | |
| <clipPath id="liquidMask"> | |
| <use xlink:href="#liquid" /> | |
| </clipPath> | |
| </defs> | |
| <g id="pipette1" class="glass" fill="none" stroke="#aaccfb" stroke-miterlimit="10" stroke-width="4" transform="translate(0, 38)"> | |
| <polygon class="liquid" stroke="none" points="34.28 79.01 34.28 94.68 27.91 104.62 27.91 111.41 23.32 114 18.73 111.41 18.73 104.62 12.36 94.68 12.36 79.01 34.28 79.01" fill="#5299f9"/> | |
| <rect id="level" class="liquid" stroke="none" x="12.36" y="48.05" width="22" height="32" fill="#5299f9"/> | |
| <g opacity="0.5"> | |
| <polyline points="12.07 28.65 12.07 11.51 12.07 6.83 14.07 4 15.84 2 19.94 2 27.21 2 31.06 2 32.57 4 34.57 7.16 34.57 12.01 34.57 28.65" fill="none" stroke="#003459" stroke-miterlimit="10" stroke-width="4"/> | |
| <polygon points="42.05 39.01 4.59 39.01 2 36.43 2 32.19 2 31.53 4.59 28.95 4.59 28.95 42.05 28.95 44.64 31.53 44.64 36.43 42.05 39.01" fill="none" stroke="#003459" stroke-miterlimit="10" stroke-width="4"/> | |
| <polyline points="34.28 39.01 34.28 94.68 27.91 104.62 27.91 111.41 23.32 114.41 18.73 111.41 18.73 104.62 12.36 94.68 12.36 39.01" fill="none" stroke="#003459" stroke-miterlimit="10" stroke-width="4"/> | |
| </g> | |
| <g id="pipetteShine" opacity="0.25" stroke="none"> | |
| <polygon points="21.63 11.58 18.15 13.1 18.25 9.3 21.73 7.79 21.63 11.58" fill="#fff"/> | |
| <polygon points="17.88 90.03 17.86 90.03 16.87 89.04 16.87 47.02 18.87 47.02 18.87 89.04 17.88 90.03" fill="#fff"/> | |
| </g> | |
| </g> | |
| <g id="flask" class="glass" fill="#AACCFB" stroke="#AACCFB" stroke-miterlimit="10" stroke-width="6" > | |
| <!-- <path d="M438.68,219.23v99.08a90,90,0,1,1-77.36,0V219.23" /> | |
| <line x1="341.31" y1="219.23" x2="458.69" y2="219.23" /> --> | |
| <polyline points="444.09 221.01 444.09 320.09 476.46 348.76 491.79 389.2 486.58 432.13 462.02 467.72 423.73 487.81 380.48 487.81 342.19 467.72 317.62 432.13 312.41 389.2 327.75 348.76 360.12 320.09 360.12 221.01" stroke-linecap="round" stroke-width="8"/> | |
| <line x1="343.42" y1="221.01" x2="460.79" y2="221.01" stroke-width="8"/> | |
| </g> | |
| <g id="drip"> | |
| <polygon class="liquid" points="3.3 4.06 0 13.72 1.86 18.5 7.93 21.59 14.11 18.92 15.79 13.72 12.33 3.7 7.89 0 3.3 4.06"/> | |
| <polygon points="6.71 6.76 5.22 7.96 4.88 6.08 6.37 4.88 6.71 6.76" fill="#fff" opacity="0.5"/> | |
| </g> | |
| <!-- <circle class="liquid" cx="399" cy="420" r="4" /> --> | |
| <rect id="droplet" class="liquid" x="399" y="420" width="6" height="6" /> | |
| <g clip-path="url(#mainMask)"> | |
| <use xlink:href="#liquid" x="770" y="0" class="poly darkLiquid" opacity="0.3"/> | |
| <use xlink:href="#liquid" class="poly" y="0"/> | |
| <g id="bubbleGroup" stroke-width="0" fill="#FFF" opacity="1" clip-path="url(#liquidMask)"> | |
| <rect x="300" y="380" width="3" height="3" /> | |
| <rect x="300" y="380" width="3" height="3" /> | |
| <rect x="300" y="380" width="3" height="3" /> | |
| <rect x="300" y="380" width="3" height="3" /> | |
| <rect x="300" y="380" width="3" height="3" /> | |
| <rect x="300" y="380" width="3" height="3" /> | |
| <rect x="300" y="380" width="3" height="3" /> | |
| <rect x="300" y="380" width="3" height="3" /> | |
| <rect x="300" y="380" width="3" height="3" /> | |
| <rect x="300" y="380" width="3" height="3" /> | |
| <rect x="300" y="380" width="3" height="3" /> | |
| <rect x="300" y="380" width="3" height="3" /> | |
| <rect x="300" y="380" width="3" height="3" /> | |
| <rect x="300" y="380" width="3" height="3" /> | |
| <rect x="300" y="380" width="3" height="3" /> | |
| <rect x="300" y="380" width="3" height="3" /> | |
| <rect x="300" y="380" width="3" height="3" /> | |
| <rect x="300" y="380" width="3" height="3" /> | |
| <rect x="300" y="380" width="3" height="3" /> | |
| <rect x="300" y="380" width="3" height="3" /> | |
| <rect x="300" y="380" width="3" height="3" /> | |
| <rect x="300" y="380" width="3" height="3" /> | |
| </g> | |
| </g> | |
| <g id="flaskShine" opacity="0.25" stroke="none"> | |
| <polygon points="375.69 300 372.19 296.51 372.19 238.68 375.69 235.18 379.18 238.68 379.18 296.51 375.69 300" fill="#fff"/> | |
| <rect x="414" y="233" width="16" height="80" rx="0" ry="6" fill="#fff" opacity="0.1"/> | |
| <polygon points="368.47 362.44 351.13 369.58 354.5 351.13 371.84 344 368.47 362.44" fill="#fff"/> | |
| <polygon points="453 407.77 464.55 422.2 443.58 452.6 421.36 464.21 417.62 459.38 434.66 444.52 453 407.77" fill="#fff"/> | |
| </g> | |
| </svg> | |
| <a href="https://harunpehlivantebimtebitagem.site123.me/"><img class="gsap-3-logo" src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1606081378/logo_transparent_ru2klx.png" width="150" /></a> |
This file contains hidden or 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
| let select = s => document.querySelector(s), | |
| selectAll = s => document.querySelectorAll(s), | |
| mainSVG = select('.mainSVG'), | |
| liquid = select("#liquid"), | |
| pointArray = [], | |
| pointValueXArray = [], | |
| pointValueYArray = [], | |
| liquidWidth = 300, | |
| numPoints = 30, | |
| dripOffset = 0.0258, | |
| rippleDuration = 4.6, | |
| rippleAmount = '+=8', | |
| startValX = 250, | |
| startValY = 400, | |
| colorArray = ['#E6098B', '#FFBE0B', '#FB5607', '#8338EC', '#3A86FF', '#51E5FF', '#04A777', '#F75C03', '#F71735'], | |
| allBubbles = gsap.utils.toArray('#bubbleGroup rect') | |
| gsap.set(mainSVG, { | |
| visibility: 'visible' | |
| }) | |
| gsap.set('.darkLiquid', { | |
| scaleX: -1, | |
| transformOrigin: '50% 50%' | |
| }) | |
| for(let i = 0; i < numPoints; i++) { | |
| let p = liquid.points.appendItem(mainSVG.createSVGPoint()); | |
| pointArray.push(p); | |
| pointValueXArray.push( (i < numPoints - 2) ? startValX : ( i == numPoints - 2 ) ? 600 : 200 ); | |
| startValX += ( liquidWidth / (numPoints-2) ); | |
| pointValueYArray.push( (i < numPoints - 2) ? startValY : 800 ) | |
| } | |
| gsap.set(pointArray, { | |
| x: gsap.utils.wrap(pointValueXArray), | |
| y: gsap.utils.wrap(pointValueYArray) | |
| }) | |
| gsap.set('#level', { | |
| transformOrigin: '50% 100%' | |
| }) | |
| gsap.set('#bubbleGroup rect, #droplet', { | |
| transformOrigin: '50% 50%' | |
| }) | |
| gsap.fromTo(allBubbles, { | |
| x: 'random(0, 200)', | |
| y: 'random(0, 120)', | |
| scale:'random(0.5, 3)', | |
| rotation: 'random(20, 180)', | |
| opacity: 1 | |
| }, { | |
| duration: 1, | |
| rotation: 'random(180, 360)', | |
| repeatRefresh: true, | |
| stagger: { | |
| each: 0.52, | |
| repeat: -1 | |
| }, | |
| scale: 0.1, | |
| y: '-=30', | |
| opacity: 0.1, | |
| }).seek(100) | |
| const makeDrip = () => { | |
| let currentColor = gsap.utils.random(colorArray); | |
| gsap.to(':root', {'--main-color': currentColor}); | |
| let tl = gsap.timeline({ | |
| defaults: { | |
| ease: CustomWiggle.create('', {type: 'easeOut', wiggles: gsap.utils.random(9, 12)}) | |
| } | |
| }); | |
| tl.fromTo('#pipette1', { | |
| x: 600, | |
| opacity: 0 | |
| }, { | |
| duration: 1, | |
| x: 376, | |
| opacity: 1, | |
| ease: 'expo.inOut' | |
| }) | |
| .fromTo('#pipette1', { | |
| rotation: -95, | |
| transformOrigin: '50% 100%' | |
| }, { | |
| rotation: 0, | |
| transformOrigin: '50% 100%', | |
| duration: 1.5, | |
| ease: 'elastic(1.5, 0.83)' | |
| }, 0) | |
| .addLabel('pipetteReady') | |
| .fromTo('#drip', { | |
| scale: 0 | |
| }, { | |
| duration: 1, | |
| scale: 1, | |
| transformOrigin: '50% 0%', | |
| ease: 'elastic(1, 0.8)' | |
| }) | |
| .to('#level', { | |
| duration: 1, | |
| scaleY: 0.5, | |
| ease: 'elastic(1, 0.8)' | |
| },'pipetteReady') | |
| .fromTo('#drip', { | |
| x: 399, | |
| y: 155 | |
| }, { | |
| x: 399, | |
| y: 430, | |
| duration: 0.38, | |
| ease: 'power1.in' | |
| }) | |
| .addLabel('splash') | |
| .to('.poly', { | |
| fill:currentColor, | |
| ease: 'sine' | |
| }, 'splash') | |
| .to('#bubbleGroup', { | |
| stroke:currentColor, | |
| ease: 'sine' | |
| }, 'splash') | |
| .to(pointArray, { | |
| duration: gsap.utils.random(3, 5), | |
| y: (i) => { | |
| return rippleAmount | |
| }, | |
| stagger: { | |
| each: dripOffset, | |
| from: 'center' | |
| }, | |
| }, 'splash') | |
| .to('#bubbleGroup', { | |
| duration: 4, | |
| y: '+=random(5, 10)', | |
| ease: 'wiggle({type:easeOut, wiggles:10})' | |
| }, 'splash') | |
| .to('#droplet', { | |
| duration: 0.23, | |
| y: 'random(-30, -60, 1)', | |
| rotation: 'random(20, 290)', | |
| ease: 'power1', | |
| }, 'splash') | |
| .to('#droplet', { | |
| duration: 0.23, | |
| y:0, | |
| rotation: '+=30', | |
| ease: 'power1.in', | |
| }, 'splash+=0.23') | |
| .fromTo('#droplet', { | |
| scale: 1 | |
| }, { | |
| duration: 0.23, | |
| scale: 0, | |
| transformOrigin: '50% 100%', | |
| ease: 'expo.in' | |
| }, 'splash+=0.23') | |
| .to('#level', { | |
| duration: 1, | |
| scaleY: 1, | |
| ease: 'expo.in' | |
| }, 'splash') | |
| .to('#pipette1', { | |
| duration: 1, | |
| rotation: 23, | |
| x: 100, | |
| opacity: 0, | |
| ease: 'expo.in' | |
| }, 'splash') | |
| gsap.delayedCall(4, makeDrip); | |
| } | |
| makeDrip() |
This file contains hidden or 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://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/gsap.min.js"></script> | |
| <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js"></script> | |
| <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomWiggle3.min.js"></script> |
This file contains hidden or 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
| :root { | |
| --main-color: #E6098B; | |
| --bg-color: #03120E; | |
| } | |
| body { | |
| background-color: var(--bg-color); | |
| 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; | |
| } | |
| .liquid { | |
| fill:var(--main-color); | |
| } | |
| #bubbleGroup { | |
| stroke: var(--main-color); | |
| fill: #222932 | |
| } | |
| .poly { | |
| fill: #3A86FF; | |
| } | |
| .glass { | |
| opacity: 0.2 | |
| } | |
| #flask { | |
| opacity: 0.5; | |
| fill:#003459; | |
| stroke: #003459; | |
| } | |
| .gsap-3-logo { | |
| width: 20vw; | |
| max-width: 150px; | |
| position: fixed; | |
| bottom: 15px; | |
| right: 15px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment