Skip to content

Commit f43f0cd

Browse files
SandstedtSandstedt
committed
Finishing the convertion of Shape and Swirl Tutorial
1 parent 6617d11 commit f43f0cd

24 files changed

Lines changed: 10152 additions & 315 deletions

‎README.md‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,15 @@ Website for mo · js with tutorials and documentation.
1313
* Push to the mojs.github.io master branch using `. deploy.sh`
1414

1515
## Tips for docs writers
16-
If you need very special demo that doesn't work with the `<MojsCode>`or the `MojsInteractive` components, create a new component and add it to the folder "components". Make shure the name doen't contain a number, VuePress doesn't like that.
16+
If you need very special demo that doesn't work with the `<MojsCode>`or the `MojsInteractive` components, create a new component and add it to the folder "components". Make shure the name doen't contain a number, VuePress doesn't like that.
17+
18+
### Known bugs
19+
* If you get a `Unknown custom element:` or any other wierd errors, try restarting VuePress by stopping the process in tour terminal and run `npm run start` again to clear the VuePress cache. It's probably due to some JS error in a custom component that you used wrote.
20+
21+
* If you get an `Errors compiling template: tag <p> has no matching end tag.`, make sure you have a dubble line break before any html comments (`<!--`). Like this:
22+
23+
```md
24+
My code
25+
26+
<!-- Some html comment -->
27+
```

‎docs/.vuepress/components/DemoElegantTriangles.vue‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<template>
2+
<div class="mojs-interactive">
3+
<slot></slot>
4+
<div class="mojs-interactive__result mojs-interactive__result--dark" id="demo-elegant-triangles">
5+
<div id="demo-elegant-triangles_controller" class="mojs-interactive__controller"></div>
6+
</div>
7+
</div>
8+
</template>
9+
10+
<script>
11+
export default {
12+
13+
mounted: function () {
14+
import("mo-js").then(module => {
15+
import('mojs-player').then(module => {
16+
const COLORS = {
17+
white: '#ffffff',
18+
black: '#000000',
19+
green: '#49F2CC',
20+
pink: '#777',
21+
grey: '#29363B',
22+
cyan: 'cyan',
23+
yellow: '#FFE202',
24+
hotpink: 'deeppink',
25+
};
26+
const blendMode = 'screen';
27+
28+
const y = -50;
29+
30+
const staticTriangle = new mojs.Shape({
31+
parent: '#demo-elegant-triangles',
32+
shape: 'polygon',
33+
duration: 1160,
34+
radius: { 60: 65 },
35+
angle: -60,
36+
fill: 'none',
37+
stroke: COLORS.white,
38+
strokeWidth: { 30 : 5 },
39+
easing: 'cubic.out',
40+
isShowEnd: false,
41+
width: 170,
42+
height: 170,
43+
y
44+
});
45+
46+
// small triangles
47+
48+
let shift1 = 87,
49+
shift2 = 50,
50+
SMALL_OPTS = {
51+
parent: '#demo-elegant-triangles',
52+
shape: 'polygon',
53+
duration: 1160,
54+
radius: 14,
55+
angle: -60,
56+
fill: 'none',
57+
stroke: COLORS.white,
58+
strokeWidth: { 14 : 4 },
59+
easing: 'expo.out',
60+
isShowEnd: false
61+
};
62+
63+
let small1 = new mojs.Shape({
64+
...SMALL_OPTS,
65+
x: { 0: -shift1 },
66+
y: { [y]: -shift2 + y }
67+
});
68+
69+
let small2 = new mojs.Shape({
70+
...SMALL_OPTS,
71+
x: { 0: shift1 },
72+
y: { [y]: -shift2 + y }
73+
});
74+
75+
let small3 = new mojs.Shape({
76+
...SMALL_OPTS,
77+
y: { [y]: 1.15*shift1 + y }
78+
});
79+
80+
// supporting large triangles
81+
82+
let SUPP_OPTS = {
83+
parent: '#demo-elegant-triangles',
84+
shape: 'polygon',
85+
duration: 1000,
86+
radius: { 40: 20 },
87+
angle: -60,
88+
fill: 'white',
89+
fillOpacity: { 0: 1 },
90+
stroke: COLORS.white,
91+
strokeWidth: { 7 : 0 },
92+
easing: 'cubic.out',
93+
delay: 60,
94+
y,
95+
// x: 1,
96+
isShowEnd: false
97+
}
98+
let support1 = new mojs.Shape(SUPP_OPTS);
99+
100+
let support2 = new mojs.Transit({
101+
...SUPP_OPTS,
102+
strokeWidth: { 4 : 0 },
103+
fill: 'none',
104+
// duration: 810,
105+
radius: { 85 : 95 }
106+
});
107+
108+
const timeline = new mojs.Timeline();
109+
timeline
110+
.add(
111+
staticTriangle,
112+
[ small1, small2, small3 ],
113+
[ support1, support2 ]
114+
);
115+
116+
117+
const parentDOM = document.getElementById('demo-elegant-triangles_controller');
118+
new MojsPlayer({
119+
add: timeline,
120+
isPlaying: false,
121+
isRepeat: false,
122+
parent: parentDOM,
123+
name: "demo-elegant-triangles_controller",
124+
className: 'controller',
125+
isSaveState: false,
126+
});
127+
128+
});
129+
130+
});
131+
132+
}
133+
134+
}
135+
</script>

‎docs/.vuepress/components/DemoExpandingCircles.vue‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
2+
<template>
3+
<div class="mojs-interactive">
4+
<slot></slot>
5+
<div class="mojs-interactive__result" id="demo-expanding-circle" style="background: rgb(241, 226, 215); height: 600px">
6+
<button class="button button--icon button--control" v-on:click="playPause" :aria-label="isPlaying ? 'Pause animation' : 'Play animation'">{{isPlaying ? '⇤' : '︎︎︎▶︎'}}</button>
7+
<div id="demo-expanding-circle_controller" class="mojs-interactive__controller"></div>
8+
</div>
9+
</div>
10+
</template>
11+
12+
<script>
13+
export default {
14+
data: function () {
15+
return {
16+
isPlaying: false,
17+
prefersReducedMotion: false,
18+
}
19+
},
20+
21+
methods: {
22+
playPause: function() {
23+
if (this.isPlaying) {
24+
this.timeline.replayBackward(
25+
this.prefersReducedMotion ? 1800 : 0
26+
);
27+
} else {
28+
this.timeline.play(
29+
this.prefersReducedMotion ? 1700 : 0
30+
);
31+
}
32+
this.isPlaying = !this.isPlaying;
33+
}
34+
},
35+
36+
mounted: function () {
37+
var motionQuery = matchMedia('(prefers-reduced-motion)');
38+
const handleReduceMotionChanged = () => {
39+
this.prefersReducedMotion = motionQuery.matches;
40+
}
41+
motionQuery.addListener(handleReduceMotionChanged);
42+
handleReduceMotionChanged(); // trigger once on load to check initial value
43+
44+
import("mo-js").then(module => {
45+
import('mojs-player').then(module => {
46+
47+
48+
const COLORS = {
49+
bg: 'rgb(241, 226, 215)',
50+
accent: '#3A0839',
51+
};
52+
53+
const _getWindowSize = () => {
54+
const w = window;
55+
return Math.max( (w.innerHeight || e.clientHeight || g.clientHeight), (w.innerWidth || e.clientWidth || g.clientWidth) )
56+
}
57+
58+
const _calcScale = (radius) => {
59+
return 1.4 * (_getWindowSize() / radius / 2);
60+
}
61+
62+
let circleSize = 500,
63+
scale = _calcScale( circleSize ),
64+
opts = {
65+
parent: '#demo-expanding-circle',
66+
radius: circleSize,
67+
fill: COLORS.accent,
68+
scale: { 0.05 : 0.2 },
69+
duration: 465,
70+
easing: 'cubic.out',
71+
isShowEnd: false,
72+
isForce3d: true,
73+
};
74+
75+
const circle1 = new mojs.Shape(opts)
76+
.then({
77+
easing: 'cubic.inout',
78+
scale: .125,
79+
duration: 350
80+
}).then({
81+
easing: 'cubic.inout',
82+
scale: scale,
83+
duration: 465
84+
});
85+
86+
const circle2 = new mojs.Shape({
87+
...opts,
88+
fill: COLORS.bg,
89+
scale: { 0 : .1125 },
90+
duration: 407,
91+
delay: 580
92+
}).then({
93+
easing: 'cubic.inout',
94+
scale: scale,
95+
duration: 350
96+
});
97+
98+
const circle3 = new mojs.Shape({
99+
...opts,
100+
scale: { 0: scale },
101+
duration: 580,
102+
delay: 1160,
103+
isShowStart: false,
104+
isShowEnd: true
105+
});
106+
107+
const smallCircle = new mojs.Shape({
108+
parent: '#demo-expanding-circle',
109+
radius: { 5: 25 },
110+
fill: 'none',
111+
stroke: COLORS.accent,
112+
strokeWidth: { 20: 0 },
113+
isShowEnd: false,
114+
delay: 700,
115+
duration: 290,
116+
});
117+
118+
const triangleOpts = {
119+
parent: '#demo-expanding-circle',
120+
shape: 'polygon',
121+
radius: 15,
122+
duration: 407,
123+
fill: COLORS.bg,
124+
y: { 80 : -15 },
125+
scale: { 1 : 0 },
126+
delay: 495,
127+
isForce3d: true,
128+
easing: 'cubic.out'
129+
}
130+
const triangle1 = new mojs.Shape( triangleOpts );
131+
132+
const triangle2 = new mojs.Shape({
133+
...triangleOpts,
134+
y: { [-80] : 15 },
135+
angle: 180
136+
});
137+
138+
const lineOpts = {
139+
parent: '#demo-expanding-circle',
140+
shape: 'line',
141+
x: -180,
142+
radius: 50,
143+
radiusY: 0,
144+
stroke: COLORS.accent,
145+
strokeWidth: {15 : 0},
146+
duration: 580,
147+
isShowEnd: false,
148+
strokeDasharray: '100% 100%',
149+
strokeDashoffset: { '-100%': '100%' },
150+
easing: 'cubic.out',
151+
}
152+
const line1 = new mojs.Shape(lineOpts);
153+
154+
const line2 = new mojs.Shape({
155+
...lineOpts,
156+
angle: 180,
157+
x: -lineOpts.x
158+
});
159+
160+
this.timeline = new mojs.Timeline();
161+
this.timeline
162+
.add(
163+
circle1, circle2, circle3, smallCircle,
164+
triangle1, triangle2,
165+
line1, line2
166+
);
167+
168+
const parentDOM = document.getElementById('demo-expanding-circle_controller');
169+
new MojsPlayer({
170+
add: this.timeline,
171+
isPlaying: false,
172+
isRepeat: false,
173+
parent: parentDOM,
174+
name: "demo-expanding-circle_controller",
175+
className: 'controller',
176+
isSaveState: false,
177+
isHidden: true,
178+
});
179+
180+
});
181+
182+
});
183+
184+
},
185+
}
186+
</script>

0 commit comments

Comments
 (0)