Skip to content

Instantly share code, notes, and snippets.

@alekcz

alekcz/index.html

Created January 25, 2017 16:05
Show Gist options
  • Save alekcz/8bd167a0b999ee51fab93913113d27b3 to your computer and use it in GitHub Desktop.
Save alekcz/8bd167a0b999ee51fab93913113d27b3 to your computer and use it in GitHub Desktop.
Download ZIP
Getting Started with Mo.js
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Getting Started with mo.js</title>
</head>
<body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/mojs-player/latest/mojs-player.min.js"></script>
<script type="text/javascript">
class Whatsapp extends mojs.CustomShape {
getShape () { return '<path id="path0_fill" d="M 36.875 29.9C 37.5 30.225 37.9 30.4 38.025 30.65C 38.175 30.925 38.125 32.175 37.5 33.6C 37 35 34.4 36.35 33.25 36.4C 32.1 36.45 32.075 37.3 25.85 34.575C 19.625 31.85 15.875 25.2 15.575 24.775C 15.275 24.35 13.175 21.325 13.275 18.25C 13.4 15.2 15 13.75 15.65 13.15C 16.25 12.5 16.925 12.425 17.35 12.5L 18.525 12.5C 18.9 12.5 19.425 12.35 19.9 13.625L 21.625 18.3C 21.775 18.625 21.875 19 21.65 19.4L 20.975 20.425L 20 21.475C 19.7 21.775 19.35 22.1 19.7 22.725C 20 23.375 21.25 25.45 23 27.175C 25.275 29.375 27.275 30.1 27.875 30.425C 28.475 30.775 28.85 30.725 29.225 30.325L 31.25 27.975C 31.725 27.35 32.125 27.5 32.7 27.7L 36.875 29.9ZM 25 0C 28.283 1.11022e-15 31.5339 0.646644 34.5671 1.90301C 37.6002 3.15938 40.3562 5.00087 42.6777 7.32233C 44.9991 9.6438 46.8406 12.3998 48.097 15.4329C 49.3534 18.4661 50 21.717 50 25C 50 31.6304 47.3661 37.9893 42.6777 42.6777C 37.9893 47.3661 31.6304 50 25 50C 20.075 50 15.5 48.575 11.625 46.125L 0 50L 3.875 38.375C 1.425 34.5 0 29.925 0 25C 1.11022e-15 18.3696 2.63392 12.0107 7.32233 7.32233C 12.0107 2.63392 18.3696 4.44089e-15 25 0L 25 0ZM 25 5C 19.6957 5 14.6086 7.10714 10.8579 10.8579C 7.10714 14.6086 5 19.6957 5 25C 5 29.3 6.35 33.275 8.65 36.525L 6.25 43.75L 13.475 41.35C 16.725 43.65 20.7 45 25 45C 30.3043 45 35.3914 42.8929 39.1421 39.1421C 42.8929 35.3914 45 30.3043 45 25C 45 19.6957 42.8929 14.6086 39.1421 10.8579C 35.3914 7.10714 30.3043 5 25 5L 25 5Z"/>'; }
}
mojs.addShape( 'whatsapp', Whatsapp );
class Linkedin extends mojs.CustomShape {
getShape () { return '<path id="path0_fill" d="M 50 50L 38.8889 50L 38.8889 31.25C 38.8889 28.3056 35.5833 25.8611 32.6389 25.8611C 29.6944 25.8611 27.7778 28.3056 27.7778 31.25L 27.7778 50L 16.6667 50L 16.6667 16.6667L 27.7778 16.6667L 27.7778 22.2222C 29.6111 19.25 34.3333 17.3333 37.5 17.3333C 44.4444 17.3333 50 23 50 29.8611L 50 50ZM 11.1111 50L 0 50L 0 16.6667L 11.1111 16.6667L 11.1111 50ZM 5.55556 0C 7.02898 1.23358e-15 8.44206 0.585316 9.48393 1.62718C 10.5258 2.66905 11.1111 4.08213 11.1111 5.55556C 11.1111 7.02898 10.5258 8.44206 9.48393 9.48393C 8.44206 10.5258 7.02898 11.1111 5.55556 11.1111C 4.08213 11.1111 2.66905 10.5258 1.62718 9.48393C 0.585316 8.44206 1.23358e-15 7.02898 0 5.55556C 0 4.08213 0.585316 2.66905 1.62718 1.62718C 2.66905 0.585316 4.08213 1.23358e-15 5.55556 0L 5.55556 0Z"/>'; }
}
mojs.addShape( 'linkedin', Linkedin );
class Facebook extends mojs.CustomShape {
getShape () { return '<path id="path0_fill" d="M 25 0L 25 10L 20 10C 18.275 10 17.5 12.025 17.5 13.75L 17.5 20L 25 20L 25 30L 17.5 30L 17.5 50L 7.5 50L 7.5 30L 0 30L 0 20L 7.5 20L 7.5 10C 7.5 7.34784 8.55357 4.8043 10.4289 2.92893C 12.3043 1.05357 14.8478 3.33067e-15 17.5 0L 25 0Z"/>'; }
}
mojs.addShape( 'facebook', Facebook );
class Twitter extends mojs.CustomShape {
getShape () { return '<path id="path0_fill" d="M 61.5294 5.88235C 59.2647 6.91176 56.8235 7.58824 54.2941 7.91176C 56.8823 6.35294 58.8823 3.88235 59.8235 0.911765C 57.3823 2.38235 54.6765 3.41177 51.8235 4C 49.5 1.47059 46.2353 0 42.5294 0C 35.6176 0 29.9706 5.64706 29.9706 12.6176C 29.9706 13.6176 30.0882 14.5882 30.2941 15.5C 19.8235 14.9706 10.5 9.94118 4.29412 2.32353C 3.20588 4.17647 2.58824 6.35294 2.58824 8.64706C 2.58824 13.0294 4.79412 16.9118 8.20588 19.1176C 6.11765 19.1176 4.17647 18.5294 2.47059 17.6471C 2.47059 17.6471 2.47059 17.6471 2.47059 17.7353C 2.47059 23.8529 6.82353 28.9706 12.5882 30.1176C 11.5294 30.4118 10.4118 30.5588 9.26471 30.5588C 8.47059 30.5588 7.67647 30.4706 6.91177 30.3235C 8.5 35.2941 13.1176 39 18.6765 39.0882C 14.3824 42.5 8.94118 44.5 3 44.5C 2 44.5 1 44.4412 -1.12197e-07 44.3235C 5.58824 47.9118 12.2353 50 19.3529 50C 42.5294 50 55.2647 30.7647 55.2647 14.0882C 55.2647 13.5294 55.2647 13 55.2353 12.4412C 57.7059 10.6765 59.8235 8.44118 61.5294 5.88235Z"/>'; }
}
mojs.addShape( 'twitter', Twitter );
class Share extends mojs.CustomShape {
getShape () { return '<path id="path0_fill" d="M 75.339 70.7182C 71.5218 70.7182 68.1065 72.225 65.4947 74.5856L 29.6836 53.7418C 29.9347 52.5866 30.1356 51.4314 30.1356 50.226C 30.1356 49.0206 29.9347 47.8654 29.6836 46.7102L 65.0929 26.0673C 67.8051 28.5786 71.3712 30.1356 75.339 30.1356C 79.3353 30.1356 83.1678 28.5481 85.9936 25.7224C 88.8193 22.8966 90.4068 19.064 90.4068 15.0678C 90.4068 11.0716 88.8193 7.23902 85.9936 4.41326C 83.1678 1.5875 79.3353 2.23048e-15 75.339 0C 71.3428 4.46097e-15 67.5102 1.5875 64.6845 4.41326C 61.8587 7.23902 60.2712 11.0716 60.2712 15.0678C 60.2712 16.2732 60.4721 17.4284 60.7233 18.5836L 25.3139 39.2265C 22.6017 36.7152 19.0357 35.1582 15.0678 35.1582C 11.0716 35.1582 7.23902 36.7457 4.41326 39.5715C 1.5875 42.3972 6.69145e-15 46.2298 2.23048e-15 50.226C 8.92193e-15 54.2222 1.5875 58.0548 4.41326 60.8806C 7.23902 63.7063 11.0716 65.2938 15.0678 65.2938C 19.0357 65.2938 22.6017 63.7368 25.3139 61.2255L 61.0748 82.0693C 60.8237 83.1241 60.673 84.229 60.673 85.3842C 60.673 93.4706 67.2526 100 75.339 100C 83.4254 100 90.005 93.4706 90.005 85.3842C 90.005 81.4946 88.4599 77.7642 85.7095 75.0138C 82.959 72.2634 79.2287 70.7182 75.339 70.7182L 75.339 70.7182Z"/>'; }
}
mojs.addShape( 'share', Share );
const DUR = 600;
const RAD = 75;
const whatsapp = new mojs.Shape({
shape: 'whatsapp',
isShowStart: true,
radius: {0:25},
easing: 'cubic.out',
duration: DUR,
delay: 150,
fill: '#000000',
angle: { [-120]: 0 },
x: {0:0},
y: {0: -1*RAD}
}).then({delay:345,fill:"#fff",duration:100});
const linkedin = new mojs.Shape({
shape: 'linkedin',
isShowStart: true,
radius: {0:25},
easing: 'cubic.out',
duration: DUR,
delay: 350,
fill: '#000000',
angle: { [-120]: 0 },
x: {0:0},
y: {0: RAD}
}).then({delay:145,fill:"#fff",duration:100});
const facebook = new mojs.Shape({
shape: 'facebook',
isShowStart: true,
radius: {0:25},
easing: 'cubic.out',
duration: DUR,
delay: 50,
fill: '#000000',
angle: { [-120]: 0 },
x: {0: -1*RAD},
y: {0:0}
}).then({delay:495,fill:"#fff",duration:100});
const twitter = new mojs.Shape({
shape: 'twitter',
isShowStart: true,
radius: {0:25},
easing: 'cubic.out',
duration: DUR,
delay: 250,
fill: '#000000',
angle: { [-120]: 0 },
x: {0: RAD},
y: {0:0}
}).then(
{duration:150,
radius:{25:27},y:{0:1} })
.then(
{duration:150,
radius:{27:25},y:{1:0} }).then({fill:'#00AEEF',delay:25,duration:150}).then({delay:500,duration:500});
const share = new mojs.Shape({
shape: 'share',
isShowStart: true,
radius: {13:17},
easing: 'sin.out',
duration: 300,
fill: {'#000000':'#00AEEF'},
x: -10,
y: -10
});
const circle = new mojs.Shape({
fill: 'none',
stroke: '#00AEEF',
x: -10,
y: -10,
radius: { 0 : 50 },
easing: 'cubic.out',
strokeWidth: { 10 : 0 },
duration: 500
});
const circle2 = new mojs.Shape({
fill: 'none',
stroke: '#00AEEF',
x: RAD-10,
y:-10,
radius: { 0 : 30 },
easing: 'cubic.out',
strokeWidth: { 5 : 0 },
duration: 500,
delay: 500+ DUR
});
const timeline = new mojs.Timeline({ delay: 500 });
timeline
.add( twitter, facebook, whatsapp,linkedin,share, circle,circle2 );
new MojsPlayer({ add: timeline, isPlaying: false, isRepeat: true });
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment