A Pen by Matt Daniel Brown on CodePen.
Created
December 19, 2020 05:49
-
-
Save matt-daniel-brown/33951032ab4c3fab8247ea0be5bd33a7 to your computer and use it in GitHub Desktop.
Light/Dark Toggle
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 class="btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" width="75" height="75" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#fff"> | |
<mask id="m"> | |
<circle class="masker" cx="7.5" cy="7.5" r="8.5" fill="#fff" /> | |
</mask> | |
<g mask="url(#m)"> | |
<path class="sun" d="M7.5 1.5v-1m0 13.99v-.998m6-5.997h1m-13 0h-1m2-4.996l-1-1m12 0l-1 1m-10 9.993l-1 1m12 0l-1-1m-2-4.997a2.999 2.999 0 01-3 2.998 2.999 2.999 0 113-2.998z" /> | |
</g> | |
<path class="moon" d="M1.66 11.362A6.5 6.5 0 007.693.502a7 7 0 11-6.031 10.86z" /> | |
</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
gsap.timeline() | |
.set('body', {backgroundColor:'#000'}) | |
.set('.btn', {left:'50%', xPercent:-50, top:'50%', yPercent:-50, position:'absolute', cursor:'pointer'}) | |
.set('.moon', {scale:0, transformOrigin:'66% 66%'}) | |
$('.btn').on('click', (e)=>{ | |
if (gsap.getProperty('body', 'backgroundColor')=='rgb(0, 0, 0)'){ | |
gsap.timeline({defaults:{duration:0.5, ease:'expo', overwrite:'auto'}}) | |
.to('.btn', {attr:{stroke:'#000'}}, 0) | |
.to('.masker', {attr:{r:0}}, 0) | |
.to('.sun', {scale:2.5, transformOrigin:'50% 50%', attr:{'stroke-width':0.25}}, 0) | |
.fromTo('.moon', {scale:0},{scale:1}, 0) | |
.to('body', {backgroundColor:'#eee', ease:'power3.inOut'}, 0) | |
} else { | |
gsap.timeline({defaults:{duration:0.5, ease:'expo', overwrite:'auto'}}) | |
.to('.btn', {attr:{stroke:'#fff'}}, 0) | |
.to('.masker', {attr:{r:9}, ease:'power2.inOut'}, 0) | |
.to('.sun', {scale:1, transformOrigin:'50% 50%', attr:{'stroke-width':1}, duration:0.4, ease:'back.inOut(1.5)'}, 0) | |
.to('.moon', {scale:0, duration:0.01}, 0) | |
.to('body', {backgroundColor:'#000', ease:'power3.inOut'}, 0) | |
} | |
}); |
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/3.5.0/gsap.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.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
html, body { | |
width:100%; | |
height:100%; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment