A Pen by Rahul Gupta on CodePen.
Created
November 26, 2022 09:46
-
-
Save planetoftheweb/083182ca70647ee5fc7c806b2c8d7d78 to your computer and use it in GitHub Desktop.
Movie Style Film Countdown
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="projectionScreen" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200"> | |
<defs> | |
<radialgradient id="filmGradient" cx="600" cy="450" r="340" gradientUnits="userSpaceOnUse"> | |
<stop offset="0" stop-color="#e6e6e6"/> | |
<stop offset="0.1" stop-color="#d1d1d1"/> | |
<stop offset="1" stop-color="#1a1a1a"/> | |
</radialgradient> | |
<mask id="filmMask"> | |
<circle class="big" cx="600" cy="450" transform="rotate(-90 600 450)" r="250" stroke="#fff" stroke-width="500" fill="none" /> | |
</mask> | |
<mask id="sockMask"> | |
<rect x="490" y="285.13" width="260" height="260" fill="#fff"/> | |
</mask> | |
<mask id="textMask"> | |
<rect x="213" y="585" width="774" height="130" fill="#fff"/> | |
</mask> | |
</defs> | |
<title>Film Countdown</title> | |
<ellipse id="shadow" cx="600" cy="1080.97" rx="375" ry="13" fill="#111" opacity="0.15"/> | |
<g id="screenMaster"> | |
<g id="supports" transform="translate(5,0)"> | |
<rect id="centerStand" x="583.78" y="117.91" width="18.76" height="718.65" fill="#878787"/> | |
<g id="leftLeg"> | |
<polygon id="ltLeg" points="442.91 1081.74 420.74 1082.24 586.17 796.3 602.41 805.69 442.91 1081.74" fill="#878787"/> | |
<path id="ltFoot" d="M447.28,1078.95a4.14,4.14,0,0,1-4.14,4.14h-21.9a4.14,4.14,0,0,1-4.14-4.14h0a4.14,4.14,0,0,1,4.14-4.14h21.9a4.14,4.14,0,0,1,4.14,4.14h0Z" fill="#f9b233"/> | |
</g> | |
<g id="rightLeg"> | |
<polygon id="rtLeg" points="744.04 1081.44 766.21 1081.94 600.78 796.01 584.54 805.39 744.04 1081.44" fill="#878787"/> | |
<path id="rtFoot" d="M769.12,1078.95a4.14,4.14,0,0,1-4.14,4.14h-21.9a4.14,4.14,0,0,1-4.14-4.14h0a4.14,4.14,0,0,1,4.14-4.14H765a4.14,4.14,0,0,1,4.14,4.14h0Z" fill="#f9b233"/> | |
</g> | |
</g> | |
<rect id="screen" x="213.04" y="168.42" width="774.93" height="552.7" fill="#fff"/> | |
<rect id="centerShadowBottom" x="589.08" y="744.16" width="18.16" height="18.61" fill="#575756"/> | |
<g id="screenBars"> | |
<g id="screenTop"> | |
<rect id="topCore" x="168.78" y="154.36" width="863.43" height="17.97" rx="4" ry="4" fill="#c6c6c6"/> | |
<rect id="topBar" x="180.57" y="148.21" width="839.87" height="30.3" rx="8" ry="8" fill="#4c4c4c"/> | |
<rect id="topHighlight" x="188.62" y="166.93" width="825.31" height="6.14" fill="#fff" opacity="0.2"/> | |
</g> | |
<g id="screenBottom"> | |
<rect id="bottomCore" x="168.78" y="722.05" width="863.43" height="17.97" rx="4" ry="4" fill="#c6c6c6"/> | |
<rect id="bottomBar" x="180.57" y="715.34" width="839.87" height="34.63" rx="8" ry="8" fill="#4c4c4c"/> | |
<rect id="bottomHighlight" x="187.28" y="722.54" width="825.31" height="6.14" fill="#fff" opacity="0.2"/> | |
</g> | |
</g> | |
</g> | |
<g id="film" opacity="0"> | |
<rect width="700" height="500" x="250" y="200" rx="30" ry="30" opacity="0.65" fill="url(#filmGradient)"/> | |
<g mask="url(#filmMask)" > | |
<rect width="700" height="500" x="250" y="200" rx="30" ry="30" fill="url(#filmGradient)" /> | |
</g> | |
<g stroke-width="2"> | |
<circle cx="600" cy="450" r="175" stroke="#111" fill="none" /> | |
<circle cx="600" cy="450" r="150" stroke="#fff" fill="none" /> | |
<circle cx="600" cy="450" r="110" stroke="#fff" fill="none" /> | |
<line x1="350" y1="450" x2="850" y2="450" stroke="#111" /> | |
<line x1="600" y1="220" x2="600" y2="680" stroke="#111" /> | |
</g> | |
<line id="rotator" x1="600" y1="275" x2="600" y2="450" stroke="#333" stroke-width="3" /> | |
<text id="counter" text-anchor="middle" x="600" y="535" font-size="250" ></text> | |
</g> | |
<g id="movieClip"> | |
<g id="gsText" mask="url(#textMask)" fill="#333"> | |
<text id="line1" text-anchor="middle" x="600" y="640" font-size="60" > Congratulations!!! </text> | |
<text id="line2" text-anchor="middle" x="600" y="680" font-size="40" > Time's Up!! </text> | |
</g> | |
</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
$( document ).ready(function() { | |
$( window ).load(function() { | |
/* | |
Thanks for taking a look at the new film countdown demo | |
A lot more demos, tricks and tips are in the works | |
I've finally set up a Twitter account for all these things | |
so if you like this demo please follow me: @Craig_PointC | |
If you use this countdown on anything, please send me a link. | |
I'd love to see it. | |
Have fun. | |
*/ | |
var demo = document.getElementById("projectionScreen"), | |
countDown = document.getElementById("counter"), | |
masterTimeline = new TimelineMax({delay:0.1}), | |
count = 10; // starting number for the countdown | |
TweenMax.set(demo, {transformOrigin:"center", autoAlpha:1, xPercent:-50, yPercent:-50}); | |
TweenMax.set("#rightLeg", {transformOrigin:"0% 0%", rotation:30, x:5}); | |
TweenMax.set("#leftLeg", {transformOrigin:"100% 0%", rotation:-30, x:-5}); | |
TweenMax.set("#screenBars, #shadow", {transformOrigin:"50% 50%"}); | |
TweenMax.set("#rotator, #supports", {transformOrigin:"50% 100%"}); | |
TweenMax.set("#shadow", {scaleX:0, autoAlpha:0}); | |
TweenMax.set("#screen", {transformOrigin:"50% 0%", scaleY:0}); | |
TweenMax.set("#centerShadowBottom, #movieClip",{autoAlpha:0, transformOrigin:"center"}); | |
// start the countdown with the count variable value | |
countDown.textContent = count; | |
// create the projection screen animation | |
function projector() { | |
var tl = new TimelineMax(); | |
tl.from("#supports", 0.6, {scaleY:0, ease:Expo.easeInOut}) | |
.add("legExtension") | |
.to("#rightLeg", 0.4, {rotation:0, x:0, ease:Power2.easeOut}, "legExtension") | |
.to("#leftLeg", 0.4, {rotation:0, x:0, ease:Power2.easeOut},"legExtension") | |
.from("#screenBars",0.6,{scaleX:0, ease:Expo.easeOut}, "legExtension") | |
.to("#centerShadowBottom",0.3,{autoAlpha:1}, "legExtension") | |
.add("screenDown","-=0.25") | |
.to("#screen", 0.6, {scaleY:1, ease:Power4.easeOut},"screenDown") | |
.from("#screenBottom, #centerShadowBottom", 0.6, {y:-569, ease:Power4.easeOut},"screenDown") | |
.to("#shadow", 0.6, {scaleX:1, autoAlpha:.2, ease:Power4.easeOut},"screenDown") | |
.to("#film", 1.5, {autoAlpha:1}); | |
return tl; | |
} | |
// create the countdown animation | |
function theCount() { | |
var tl = new TimelineMax({repeat:count-1, onRepeat:changeIt}); | |
tl.to("#rotator", 1, {rotation:360, ease:Linear.easeNone}) | |
.fromTo( ".big", 1 , {drawSVG:'0 0%'}, {drawSVG:'0% 100%', ease:Linear.easeNone},0 ); | |
return tl; | |
} | |
// fade out the countdown and show GreenSock info | |
function movie() { | |
var tl = new TimelineMax(); | |
tl.to("#film", 0.2, {autoAlpha:0}) | |
.set("#movieClip", {autoAlpha:1}) | |
.add("textEnter") | |
.from("#line1", 1, {x:-700, ease:Back.easeOut}, "textEnter") | |
.from("#line2", 1, {x:700, ease:Back.easeOut}, "textEnter") | |
.from("#sock", 0.75, {y:260, ease:Power3.easeOut}, "textEnter+=0.5"); | |
return tl; | |
} | |
// change the countdown on each repeat of the film leader animation | |
function changeIt() { | |
count--; | |
countDown.textContent = count; | |
} | |
/* --------------------------------------------------------------- | |
Correctly size/resize and position the SVG | |
---------------------------------------------------------------*/ | |
function sizeAll() { | |
var h = window.innerHeight, | |
w = window.innerWidth; | |
if ( w > h) { | |
TweenMax.set(demo, {height:h, width:h}); | |
} | |
else { | |
TweenMax.set(demo, {height:w, width:w}); | |
} | |
} | |
$(window).resize(sizeAll); | |
sizeAll(); | |
// master timeline with all sections | |
masterTimeline | |
.add( projector() ) | |
.add( theCount(),"-=1.5" ) | |
.add( movie() ); | |
// end window load | |
}); | |
// end doc ready | |
}); |
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/jquery/2.2.2/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.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
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700); | |
body { | |
background-color: #d7ecd0; | |
overflow: hidden; | |
} | |
#projectionScreen { | |
overflow:hidden; | |
font-family: 'Source Sans Pro', sans-serif; | |
font-weight: 700; | |
visibility:hidden; | |
opacity:0; | |
position: absolute; | |
top:50%; | |
left:50%; | |
} | |
#follow { | |
position:absolute; | |
bottom:16px; | |
right:16px; | |
z-index: 1000; | |
font-size: 48px; | |
color: #444; | |
} |
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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment