Skip to content

Instantly share code, notes, and snippets.

@aldoyh

aldoyh/GSAP_Heat_Wave_is_Coming.xhtm

Last active July 9, 2025 21:59
Show Gist options
  • Save aldoyh/60b9e753e7680cbf90540f03b12de186 to your computer and use it in GitHub Desktop.
Save aldoyh/60b9e753e7680cbf90540f03b12de186 to your computer and use it in GitHub Desktop.
Download ZIP
Smart Home Temperature Slider
Raw
ReadMe.md

GSAP Heat Wave 🌊

Raw
GSAP_Heat_Wave_is_Coming.xhtm
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/utils/Draggable.min.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=12"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ModifiersPlugin-latest-beta.js"></script>
</head>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600">
<defs>
<linearGradient id="liquidGrad" x1="557" y1="150" x2="557" y2="546" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FF0909"/>
<stop offset="0.2" stop-color="#F3481A"/>
<stop offset="0.5" stop-color="#FABA2C"/>
<stop offset="1" stop-color="#00BCF2"/>
</linearGradient>
<rect id="tube" x="357" y="150" width="86" height="400" rx="43" ry="43"/>
<clipPath id="liquidMask">
<use xlink:href="#tube" class="liquidMask" />
</clipPath>
<clipPath id="tubeMask">
<use xlink:href="#tube" class="liquidMask" />
</clipPath>
<path id="liquid" d="M757,552v490H357V552c50,0,50,20,100,20s50-20,100-20,50,20,100,20S707,552,757,552Z" />
<mask id="gradMask">
<use xlink:href="#liquid" class="liquid" x="0" fill="#FCEFD6" />
<use xlink:href="#liquid" class="liquid" x="0" fill="#EEE" opacity="0.7"/>
</mask>
</defs>
<g class="whole" transform="translate(0, -40)">
<use xlink:href="#tube" class="tubeBg" fill="#C8D9D3" opacity="0.61"/>
<g class="dragger" transform="translate(-6, 0)">
<circle cx="294" cy="540" r="36" fill="#3A3335"/>
<path class="dragTip" d="M315.5,556.76,299.24,540.5l16.26-16.26,36.26,16.26Z" fill="#3A3335"/>
<text class="label" x="294" y="551">100</text>
<!-- <path id="dragShine" d="M330,540c-26,2-18-44-72,0a36,36,0,0,1,72,0Z" fill="#E9E9E9" opacity="0.052"/> -->
</g>
<g mask="url(#gradMask)">
<use xlink:href="#tube" fill="url(#liquidGrad)" />
</g>
<line class="tubeShine" x1="371" y1="200" x2="371" y2="443" fill="none" stroke="#FFF" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8" opacity="0.21" stroke-dasharray="153 30" stroke-dashoffset="-20"/>
<!-- <text class="tubeLabel" x="400" y="180">100°</text>
<text class="tubeLabel" x="400" y="356">50°</text>
<text class="tubeLabel" x="400" y="540">0°</text> -->
<g class="measurements" fill="none" stroke="#FCEFD6" stroke-width="3" stroke-linecap="round" opacity="1">
<line x1="358" y1="196" x2="370" y2="196" />
<line x1="358" y1="234" x2="370" y2="234" />
<line x1="358" y1="273" x2="370" y2="273" />
<line x1="358" y1="311" x2="370" y2="311" />
<line x1="358" y1="350" x2="370" y2="350" />
<line x1="358" y1="388" x2="370" y2="388" />
<line x1="358" y1="426" x2="370" y2="426" />
<line x1="358" y1="465" x2="370" y2="465" />
<line x1="358" y1="503" x2="370" y2="503" />
</g>
<!-- <rect class="tubeShine" x="372" y="162" width="56" height="364.02" rx="31.5" ry="31.5" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="8" stroke-linecap="round" stroke-dasharray="15 30" opacity="0.31"/> -->
<circle class="follower" cx="400" cy="540" r="0" fill="#62B6CB" fill-opacity="1" stroke="#FCEFD6" stroke-width="0"/>
</g>
</svg>
Raw
script.js
var xmlns = "http://www.w3.org/2000/svg",
xlinkns = "http://www.w3.org/1999/xlink",
select = function(s) {
return document.querySelector(s);
},
selectAll = function(s) {
return document.querySelectorAll(s);
},
liquid = selectAll('.liquid'),
tubeShine = select('.tubeShine'),
label = select('.label'),
follower = select('.follower'),
dragger = select('.dragger'),
dragTip = select('.dragTip'),
minDragY = -380,
liquidId = 0,
step = Math.abs(minDragY/100),
snap = Math.abs(minDragY/10),
followerVY = 0
TweenMax.set('svg', {
visibility: 'visible'
})
TweenMax.set(dragTip, {
transformOrigin:'20% 50%'
})
var tl = new TimelineMax()
tl.staggerTo(liquid, 0.7, {
x:'-=200',
ease:Linear.easeNone,
repeat:-1
},0.9)
tl.time(100);
document.addEventListener("touchmove", function(event){
event.preventDefault();
});
Draggable.create(dragger, {
type:'y',
bounds:{minY:minDragY, maxY:0},
onDrag:onUpdate,
throwProps:true,
throwResistance:2300,
onThrowUpdate:onUpdate,
overshootTolerance:0,
snap:function(value){
//Use this to snap the values to steps of 10
//return Math.round(value/snap) * snap
}
})
function onUpdate(){
liquidId = Math.abs(Math.round(dragger._gsTransform.y/step));
label.textContent = liquidId + '°';
TweenMax.to(liquid, 1.3, {
y:dragger._gsTransform.y*1.12,
ease:Elastic.easeOut.config(1,0.4)
})
}
TweenMax.to(follower, 1, {
y:'+=0',
repeat:-1,
modifiers:{
y:function(y, count){
followerVY += (dragger._gsTransform.y - follower._gsTransform.y) * 0.23;
followerVY *= 0.69;
return follower._gsTransform.y + followerVY;
}
}
})
TweenMax.to(dragTip, 1, {
rotation:'+=0',
repeat:-1,
modifiers:{
rotation:function(rotation, count){
return rotation-followerVY
}
}
})
TweenMax.to(label, 1, {
y:'+=0',
repeat:-1,
modifiers:{
y:function(y, count){
return y-followerVY * 0.5
}
}
})
TweenMax.to(dragger, 1.4, {
y:minDragY/2,
onUpdate:onUpdate,
ease:Expo.easeInOut
})
//ScrubGSAPTimeline(tl);
Raw
style.css
body {
background-color: #FCEFD6;
overflow: hidden;
text-align:center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
svg {
width: 100%;
height: 100%;
}
.label{
fill:#FFFCF9;
font-size:1.8em;
font-family: "din-condensed-web", sans-serif;
/* font-family: "filson-soft", sans-serif; */
text-anchor:middle;
letter-spacing:1.2px;
}
.tubeLabel{
fill:#FCEFD6;
font-size:1.4em;
font-family: "din-condensed-web", sans-serif;
/* font-family: "filson-soft", sans-serif; */
text-anchor:middle;
}
.dragger{
-webkit-tap-highlight-color:transparent;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment