Skip to content

Instantly share code, notes, and snippets.

@stanwmusic
Created July 20, 2020 09:15
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save stanwmusic/f4e482a008afcc11c74c53b5bd5fa0fc to your computer and use it in GitHub Desktop.
GSAP - Rocket
<div class="artboard">
<div class="stars">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
<div class="stars2">
<div class="shootingstar"></div>
<div class="shootingstar"></div>
<div class="shootingstar"></div>
<div class="shootingstar"></div>
<div class="shootingstar"></div>
<div class="shootingstar"></div>
<div class="shootingstar"></div>
<div class="shootingstar"></div>
<div class="shootingstar"></div>
<div class="shootingstar"></div>
<div class="shootingstar"></div>
<div class="shootingstar"></div>
<div class="shootingstar"></div>
<div class="shootingstar"></div>
<div class="shootingstar"></div>
<div class="shootingstar"></div>
<div class="shootingstar"></div>
<div class="shootingstar"></div>
<div class="shootingstar"></div>
<div class="shootingstar"></div>
<div class="shootingstar"></div>
<div class="shootingstar"></div>
<div class="shootingstar"></div>
<div class="shootingstar"></div>
<div class="shootingstar"></div>
<div class="shootingstar"></div>
<div class="shootingstar"></div>
<div class="shootingstar"></div>
</div>
<div class="fire"></div>
<div class="takeoff"></div>
<div class="smoke">
<div class="smoke-bubble" id="sb1"></div>
<div class="smoke-bubble" id="sb2"></div>
<div class="smoke-bubble" id="sb3"></div>
<div class="smoke-bubble" id="sb4"></div>
<div class="smoke-bubble" id="sb5"></div>
<div class="smoke-bubble" id="sb6"></div>
<div class="smoke-bubble" id="sb7"></div>
<div class="smoke-bubble" id="sb8"></div>
<div class="smoke-bubble" id="sb9"></div>
<div class="smoke-bubble" id="sb10"></div>
<div class="smoke-bubble" id="sb11"></div>
<div class="smoke-bubble" id="sb12"></div>
</div>
<svg id="rocket" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 154.1 259.1" enable-background="new 0 0 154.1 259.1"><style>.st0{fill:#18F4A3;} .st1{fill:#E8E6EF;} .st2{filter:url(#Adobe_OpacityMaskFilter);} .st3{filter:url(#Adobe_OpacityMaskFilter_1_);} .st4{mask:url(#SVGID_1_);fill:url(#SVGID_2_);} .st5{opacity:0.61;fill:#CFE0E2;} .st6{opacity:0.7;fill:#012226;} .st7{filter:url(#Adobe_OpacityMaskFilter_2_);} .st8{filter:url(#Adobe_OpacityMaskFilter_3_);} .st9{mask:url(#SVGID_3_);fill:url(#SVGID_4_);} .st10{fill:url(#SVGID_5_);} .st11{fill:#063A3A;} .st12{fill:#049F75;}</style><path class="st0" d="M97.4 236.1c0 2.6-5.2 4.7-11.7 4.7H70.3c-6.4 0-11.7-2.1-11.7-4.7v-4.5c0-2.6 5.2-4.7 11.7-4.7h15.4c6.4 0 11.7 2.1 11.7 4.7v4.5zM37.1 137.4s-28 19.2-28 32v59.3l30-30-2-61.3zM117.5 137.4s28 19.2 28 32v59.3l-30-30 2-61.3z"/><path class="st1" d="M29.6 140.5c.3 36.4 8.3 69.6 21.3 95.3 8.6-2.8 17.7-4.4 27.2-4.4 9.5-.1 18.6 1.3 27.3 4 12.5-25.9 19.9-59.3 19.6-95.6-.6-57.8-20.4-107.7-48.8-132-28.1 24.8-47.1 75-46.6 132.7z"/><defs><filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="44.2" y="62.7" width="28.1" height="171"><feFlood result="back" flood-color="#fff" flood-opacity="1"/><feBlend in="SourceGraphic" in2="back"/></filter></defs><mask maskUnits="userSpaceOnUse" x="44.2" y="62.7" width="28.1" height="171" id="SVGID_1_"><g class="st2"><defs><filter id="Adobe_OpacityMaskFilter_1_" filterUnits="userSpaceOnUse" x="44.2" y="62.7" width="28.1" height="171"><feFlood result="back" flood-color="#fff" flood-opacity="1"/><feBlend in="SourceGraphic" in2="back"/></filter></defs><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="719.881" y1="-755.102" x2="616.624" y2="-640.129" gradientTransform="rotate(-41.77 1486.062 530.152)"><stop offset="0" stop-color="gray"/><stop offset=".145" stop-color="#7A7A7A"/><stop offset=".338" stop-color="#696969"/><stop offset=".556" stop-color="#4E4E4E"/><stop offset=".792" stop-color="#282828"/><stop offset="1"/></linearGradient><path class="st4" d="M60.2 233.7l12-1.9c-18.3-108.4-8.6-169-8.6-169l-11.4.4c-22 76.5 8 170.5 8 170.5z"/></g></mask><path class="st5" d="M60.2 233.7l12-1.9c-18.3-108.4-8.6-169-8.6-169l-11.4.4c-22 76.5 8 170.5 8 170.5z"/><path class="st6" d="M41.5 64l-2.1 6.7s40.7-5 75.7.1l-3.2-7.4c-.1 0-47.1-5.4-70.4.6z"/><path class="st0" d="M41.5 64c11.4-.9 23.2-1.4 35.2-1.5 12-.1 23.7.2 35.2.9-8.6-23.7-21-43-35.6-55.6C61.7 20.6 49.7 40.2 41.5 64z"/><defs><filter id="Adobe_OpacityMaskFilter_2_" filterUnits="userSpaceOnUse" x="52.2" y="7.8" width="24" height="55.3"><feFlood result="back" flood-color="#fff" flood-opacity="1"/><feBlend in="SourceGraphic" in2="back"/></filter></defs><mask maskUnits="userSpaceOnUse" x="52.2" y="7.8" width="24" height="55.3" id="SVGID_3_"><g class="st7"><defs><filter id="Adobe_OpacityMaskFilter_3_" filterUnits="userSpaceOnUse" x="52.2" y="7.8" width="24" height="55.3"><feFlood result="back" flood-color="#fff" flood-opacity="1"/><feBlend in="SourceGraphic" in2="back"/></filter></defs><linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="739.606" y1="-771.977" x2="769.629" y2="-799.072" gradientTransform="rotate(-41.77 1486.062 530.152)"><stop offset="0" stop-color="gray"/><stop offset=".145" stop-color="#7A7A7A"/><stop offset=".338" stop-color="#696969"/><stop offset=".556" stop-color="#4E4E4E"/><stop offset=".792" stop-color="#282828"/><stop offset="1"/></linearGradient><path class="st9" d="M63.6 62.7C65.7 35.3 76.2 7.8 76.2 7.8c-18.9 24.2-24 55.3-24 55.3l11.4-.4z"/></g></mask><linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="739.606" y1="-771.977" x2="769.629" y2="-799.072" gradientTransform="rotate(-41.77 1486.062 530.152)"><stop offset="0" stop-color="#EAEFEE"/><stop offset=".45" stop-color="#F0F3F3"/><stop offset="1" stop-color="#FFF"/></linearGradient><path class="st10" d="M63.6 62.7C65.7 35.3 76.2 7.8 76.2 7.8c-18.9 24.2-24 55.3-24 55.3l11.4-.4z"/><path class="st11" d="M75.9 78.3c-14.8.1-26.7 12.2-26.6 27 .1 14.8 12.2 26.7 27 26.6 14.8-.1 26.7-12.2 26.5-27-.1-14.9-12.2-26.8-26.9-26.6z"/><path class="st12" d="M75.9 86.4c-10.3.1-18.5 8.5-18.5 18.8.1 10.3 8.5 18.5 18.8 18.4 10.3-.1 18.5-8.5 18.4-18.8 0-10.2-8.4-18.5-18.7-18.4z"/><path class="st0" d="M68.6 122.1c2.3 1 4.9 1.6 7.7 1.6 10.3-.1 18.5-8.5 18.4-18.8 0-3.6-1.1-7-3-9.9-.3.3-.7.5-1 .8-8.1 6.6-18.2 15.6-22.1 26.3z"/><path class="st11" d="M79 139.9c-11.1.1-20 9.2-19.9 20.3.1 11.1 9.2 20 20.3 19.9 11.1-.1 20-9.2 19.9-20.3-.1-11-9.2-20-20.3-19.9z"/><path class="st12" d="M79.1 146.1c-7.7.1-13.9 6.4-13.8 14.1.1 7.7 6.4 13.9 14.1 13.8 7.7-.1 13.9-6.4 13.8-14.1-.1-7.7-6.4-13.9-14.1-13.8z"/><path class="st0" d="M73.5 172.8c1.8.8 3.7 1.2 5.8 1.2 7.7-.1 13.9-6.4 13.8-14.1 0-2.7-.8-5.3-2.2-7.4-.3.2-.5.4-.8.6-6 4.9-13.6 11.7-16.6 19.7z"/><path class="st11" d="M81.5 187.9c-7.8.1-14.1 6.5-14 14.3.1 7.8 6.5 14.1 14.3 14.1 7.8-.1 14.1-6.5 14-14.3-.1-7.8-6.5-14.2-14.3-14.1z"/><path class="st12" d="M81.5 192.2c-5.4 0-9.8 4.5-9.8 9.9s4.5 9.8 9.9 9.8 9.8-4.5 9.8-9.9-4.5-9.8-9.9-9.8z"/><path class="st0" d="M77.6 211.1c1.2.5 2.6.9 4.1.8 5.4 0 9.8-4.5 9.8-9.9 0-1.9-.6-3.7-1.6-5.2-.2.1-.4.3-.5.4-4.3 3.5-9.7 8.3-11.8 13.9z"/></svg>
</div>
</div>
var tl = new TimelineMax({});
tl.addLabel('start', 0)
.add(TweenMax.from(".takeoff", 0.5, {scaleY:0, y: -200, ease:Expo.easeInOut, delay:3}))
.add(TweenMax.to("#rocket", 1 ,{className:"+=shake", delay:-1}))
.add(TweenMax.to(".smoke", 2,{y: -50, delay: 1}))
.add(TweenMax.to("#rocket", 1 ,{className: "-=shake"}))
.add(TweenMax.to("#rocket",1, {y: -300, delay:-1}))
.add(TweenMax.to(".takeoff",1, {y: -300, delay:-1}))
.add(TweenMax.to(".smoke", 5,{scale: 1, y: -20, delay: -1}))
.add(TweenMax.to("#rocket",1, {y: -10, rotate: 40, delay: -3}))
.add(TweenMax.to(".takeoff",0.2, {opacity: 0, delay: -3}))
.add(TweenMax.to(".stars",0.2, {opacity: 0, delay: -3}))
.add(TweenMax.from(".stars2",0.2, {opacity: 0, delay: -3}))
.add(TweenMax.to(".artboard",0.2, {rotation: 40, delay: -3}))
.add(TweenMax.to(".smoke", 2,{opacity: 0, delay: -2}))
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://codepen.io/rgfx/pen/eWLrGP"></script>
@import 'compass';
$bg : #01191d;
$green : #18F4A3;
$bluegreen : #00ffea;
$bluewhite: #dafffe;
body {
background-color: $bg ;
}
#rocket{
position: absolute;
width: 80px;
left: 50%;
margin-left: -40px;
top: 100px;
z-index: -2;
}
.artboard {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
border: solid $green 2px;
margin: 0 auto;
margin-top: 15vh;
overflow: hidden;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
backface-visibility: none;
background: radial-gradient(circle at bottom, rgba(24, 244, 163, 0.3) 0%, rgba(1, 34, 38, 0) 60%);
}
.star {
position: absolute;
width: 10px;
height: 10px;
top: 37%;
left: 31%;
}
.star::before,
.star::after {
content: '';
position: absolute;
width: 3px;
height: 10px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 6px 3px rgba(255, 255, 255, 0.15);
animation: sparkle 1s ease-in-out infinite alternate;
}
.star::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.star::before {
transform: translate(-50%, -50%);
}
.star:nth-child(2) {
top: 20%;
left: 23%;
transform: scale(1.4);
}
.star:nth-child(3) {
top: 28%;
left: 64%;
transform: scale(0.7);
}
@keyframes sparkle {
from {
height: 10px;
}
to {
height: 3px;
}
}
.smoke {
position: absolute;
width: 400%;
height: 400%;
bottom: -250%;
left: 50%;
background-color: #e8e6ef;
transform: translateX(-50%) scale(0.25);
}
.smoke-bubble {
position: absolute;
background-color: #e8e6ef;
border-radius: 50%;
animation: smoke infinite 7s alternate ease-in-out;
}
.smoke-bubble:nth-child(1){
left: 1%;
top: -22%;
width: 20%;
height: 20%;
animation-duration: 5s;
}
.smoke-bubble:nth-child(2){
right: 1%;
top: -22%;
width: 20%;
height: 20%;
animation-duration: 5s;
}
.smoke-bubble:nth-child(3){
left: -6%;
top: -28%;
width: 15%;
height: 15%;
animation-duration: 3s;
}
.smoke-bubble:nth-child(4){
right: -6%;
top: -28%;
width: 15%;
height: 15%;
animation-duration: 3s;
}
.smoke-bubble:nth-child(5){
left: 12%;
top: -11%;
width: 20%;
height: 20%;
animation-duration: 6s;
}
.smoke-bubble:nth-child(6){
right: 12%;
top: -11%;
width: 20%;
height: 20%;
animation-duration: 6s;
}
.smoke-bubble:nth-child(7){
left: 28%;
top: -7%;
width: 14%;
height: 14%;
animation-duration: 3s;
}
.smoke-bubble:nth-child(8){
right: 28%;
top: -7%;
width: 14%;
height: 14%;
animation-duration: 3s;
}
.smoke-bubble:nth-child(9){
left: 35%;
top: -6%;
width: 19%;
height: 19%;
animation-duration: 5s;
}
.smoke-bubble:nth-child(10){
right: 35%;
top: -6%;
width: 19%;
height: 19%;
animation-duration: 5s;
}
.smoke-bubble:nth-child(11){
left: -9%;
top: -19%;
width: 30%;
height: 30%;
animation: none;
}
.smoke-bubble:nth-child(12){
right: -9%;
top: -19%;
width: 30%;
height: 30%;
animation: none;
}
@keyframes smoke {
0% {
transform: scale(1.2);
}
50% {
transform: scale(0.8);
}
100% {
transform: scale(1.2);
}
}
.fire {
top: 67%;
z-index: -4;
position: absolute;
left: 50%;
margin-left: -10px;
width: 20px;
height: 20px;
border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
background-color: $bluegreen;
transform: rotate(135deg);
margin-top: 20px;
animation: flicker infinite 1s alternate ease-in-out;
}
.fire:after {
content: "";
top: 5px;
position: absolute;
width: 15px;
height: 15px;
border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
background-color: $bluewhite;
}
@keyframes flicker {
0% {
transform: rotate(135deg) scale(0.8);
box-shadow:
0 0 17px 10px rgba(165, 238, 224, 0.5);
}
25% {
box-shadow:
0 0 17px 5px rgba(165, 238, 224, 0.5);
}
50% {
box-shadow:
0 0 17px 7px rgba(165, 238, 224, 0.5);
}
75% {
box-shadow:
0 0 17px 5px rgba(165, 238, 224, 0.5);
}
100% {
box-shadow:
0 0 17px 10px rgba(165, 238, 224, 0.5);
}
}
.takeoff {
z-index: -4;
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 7%;
height: 100%;
top: 67%;
background-image: linear-gradient(to right, $green 0%, $bluewhite 25%, $bluegreen 50%, $bluewhite 75%, $green 100%);
}
.shake {
animation: shake 0.2s infinite cubic-bezier(.36,.07,.19,.97) alternate;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(-1px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-2px, 0, 0);
}
40%, 60% {
transform: translate3d(2px, 0, 0);
}
}
.shootingstar {
position: absolute;
width: 3px;
height: 20px;
border-radius: 50%;
box-shadow: 0 0 6px 3px rgba(255, 255, 255, 0.15);
background-color: #fff;
z-index: -2;
animation: shooting 10s infinite ease;
}
@for $i from 1 through 30 {
.shootingstar:nth-child(#{$i}) {
left: random(300) + px;
top: random(300) + px;
animation-delay: calc(-400s / #{$i});
}
}
@keyframes shooting {
0% {
opacity: 0;
transform: translateY(-300px);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(600px);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment