Hand crafted SVG animated with GSAP. Inspired by https://dribbble.com/shots/3100915-Coastal-Mountain-View
A Pen by Tim Rijkse on CodePen.
<svg viewBox="0 0 500 500"> | |
<g class="scene1"> | |
<defs> | |
<clipPath id="circle"> | |
<circle class="mask" cx="250" cy="250" r="100" /> | |
</clipPath> | |
<clipPath id="ground"> | |
<rect x="50" y="50" width="400" height="260" /> | |
</clipPath> | |
</defs> | |
<g clip-path="url(#circle)"> | |
<rect class="bg" x="0" y="0" width="500" height="500" /> | |
<g clip-path="url(#ground)"> | |
<rect class="sky3" x="50" y="130" width="350" height="70" /> | |
<rect class="sky2" x="50" y="200" width="350" height="50" /> | |
<rect class="sky1" x="50" y="250" width="350" height="50" /> | |
<g class="mountain" transform="translate(150 185)"> | |
<polygon class="mountain-left" points="100,0 100,120 0,120" /> | |
<polygon class="mountain-right" points="100,0 200,120 100,120" /> | |
<polygon class="mountain-top-left" points="100,0 100,30 75,30" /> | |
<polygon class="mountain-top-right" points="100,0 125,30 100,30" /> | |
</g> | |
</g> | |
<g class="tree tree1" transform="translate(150 255)"> | |
<polygon class="tree-left" points="15,0 15,50 0,50" /> | |
<polygon class="tree-right" points="15,0 15,50 30,50" /> | |
</g> | |
<g class="tree tree2" transform="translate(180 255)"> | |
<polygon class="tree-left" points="15,0 15,50 0,50" /> | |
<polygon class="tree-right" points="15,0 15,50 30,50" /> | |
</g> | |
<g class="tree tree3" transform="translate(210 255)"> | |
<polygon class="tree-left" points="15,0 15,50 0,50" /> | |
<polygon class="tree-right" points="15,0 15,50 30,50" /> | |
</g> | |
<g class="tree tree4" transform="translate(240 255)"> | |
<polygon class="tree-left" points="15,0 15,50 0,50" /> | |
<polygon class="tree-right" points="15,0 15,50 30,50" /> | |
</g> | |
<g class="tree tree5" transform="translate(270 255)"> | |
<polygon class="tree-left" points="15,0 15,50 0,50" /> | |
<polygon class="tree-right" points="15,0 15,50 30,50" /> | |
</g> | |
<g class="tree tree6" transform="translate(300 255)"> | |
<polygon class="tree-left" points="15,0 15,50 0,50" /> | |
<polygon class="tree-right" points="15,0 15,50 30,50" /> | |
</g> | |
<g class="tree tree7" transform="translate(330 255)"> | |
<polygon class="tree-left" points="15,0 15,50 0,50" /> | |
<polygon class="tree-right" points="15,0 15,50 30,50" /> | |
</g> | |
<rect class="ground" x="100" y="300" width="350" height="10" /> | |
</g> | |
</g> | |
</svg> |
Hand crafted SVG animated with GSAP. Inspired by https://dribbble.com/shots/3100915-Coastal-Mountain-View
A Pen by Tim Rijkse on CodePen.
const tl = new TimelineMax({ | |
repeat: -1, | |
repeatDelay: 2 | |
}) | |
const svg = document.querySelector('svg') | |
const scene1 = { | |
wrapper: svg.querySelector('.scene1'), | |
mask: svg.querySelector('.scene1 .mask'), | |
ground: svg.querySelector('.scene1 .ground'), | |
sky1: svg.querySelector('.scene1 .sky1'), | |
sky2: svg.querySelector('.scene1 .sky2'), | |
sky3: svg.querySelector('.scene1 .sky3'), | |
tree1: svg.querySelector('.scene1 .tree1'), | |
tree2: svg.querySelector('.scene1 .tree2'), | |
tree3: svg.querySelector('.scene1 .tree3'), | |
tree4: svg.querySelector('.scene1 .tree4'), | |
tree5: svg.querySelector('.scene1 .tree5'), | |
tree6: svg.querySelector('.scene1 .tree6'), | |
tree7: svg.querySelector('.scene1 .tree7'), | |
mountain: svg.querySelector('.scene1 .mountain'), | |
mountain1: svg.querySelector('.scene1 .mountain-left'), | |
mountain2: svg.querySelector('.scene1 .mountain-right') | |
} | |
tl.from(scene1.mask, 1, { | |
attr: { | |
r: 0 | |
}, | |
ease: Elastic.easeOut.config(3, 1) | |
}) | |
tl.from(scene1.ground, 0.5, { | |
autoAlpha: 0, | |
attr: { | |
y: '+=200' | |
}, | |
transformOrigin: 'left center', | |
ease: Power4.easeOut | |
}, 0.1) | |
tl.staggerFrom([scene1.sky1, scene1.sky2, scene1.sky3], 0.5, { | |
autoAlpha: 0, | |
skewY: 0, | |
attr: { | |
y: '+=90' | |
}, | |
transformOrigin: 'center bottom', | |
ease: Elastic.easeOut.config(1, 3) | |
}, 0.075, 0.25) | |
tl.staggerFrom([scene1.tree1, scene1.tree2, scene1.tree3, scene1.tree4, scene1.tree5, scene1.tree6, scene1.tree7], 0.5, { | |
rotation: 45, | |
scale: 0, | |
transformOrigin: 'bottom center', | |
ease: Back.easeOut.config(2, 1.55) | |
}, 0.05, 0.4) | |
tl.staggerFrom([scene1.mountain], 0.75, { | |
y: '+=50', | |
skewX: -200, | |
scale: 0, | |
transformOrigin: 'bottom center', | |
ease: Back.easeOut.config(1, .2) | |
}, 0.0125, 0.5) | |
tl.to(scene1.mask, 1, { | |
attr: { | |
r: 0 | |
}, | |
transformOrigin: 'center center', | |
ease: Back.easeIn.config(2, 1.55) | |
}, '+=3') |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> |
$red: #E9214F; | |
$burnt-sienna: #F06B4B; | |
$goldenrod: #F6DA71; | |
$scooter: #349597; | |
$midnight-express: #20283B; | |
$marzipan: #FCDC9F; | |
$fruit-salad: #49934E; | |
$goblin: #3D7C42; | |
$chambray: #44557E; | |
$port-gore: #384668; | |
$white: #ffffff; | |
$silver-sand: #BBBBBB; | |
body { | |
background-color: $midnight-express; | |
} | |
svg { | |
position: absolute; | |
left: 50%; | |
top: 50%; | |
transform: translate(-50%, -50%); | |
width: 500px; | |
height: 500px; | |
backface-visibility: hidden; | |
} | |
.scene1 { | |
.bg { | |
fill: $scooter; | |
} | |
.ground { | |
fill: $marzipan; | |
} | |
.sky1 { | |
fill: $goldenrod; | |
} | |
.sky2 { | |
fill: $burnt-sienna; | |
} | |
.sky3 { | |
fill: $red; | |
} | |
.tree-left { | |
fill: $fruit-salad; | |
} | |
.tree-right { | |
fill: $goblin; | |
} | |
.mountain-left { | |
fill: $chambray; | |
} | |
.mountain-right { | |
fill: $port-gore; | |
} | |
.mountain-top-left { | |
fill: $white; | |
} | |
.mountain-top-right { | |
fill: $silver-sand; | |
} | |
} |