Skip to content

Commit 929df28

Browse files
legomushroomlegomushroom
committed
curve-editor: add onChange callback, minimize/maximize/toggleSize methods
1 parent 7d21599 commit 929df28

35 files changed

+1492
-399
lines changed

‎app/build/mojs-curve-editor.js‎

Lines changed: 161 additions & 100 deletions
Large diffs are not rendered by default.

‎app/build/mojs-curve-editor.min.js‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/css/blocks/curve-editor.postcss.css‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import '../assets/globals.postcss.css';
22

33
.curve-editor {
4+
/*border: calc( 2*$PX ) dotted transparent;*/
45
position: fixed;
56
left: 0;
67
top: 0;
@@ -9,10 +10,8 @@
910
border-radius: calc( 12 * $PX );
1011
background: $c-light-purple;
1112
z-index: 100;
12-
/*box-shadow: 2px 2px 2px rgba(0,0,0,.38);*/
1313
box-shadow: 0 0 calc( 3*$PX ) calc( 1*$PX ) rgba(0,0,0,.38);
14-
/*transition: border-radius .2s ease-out;*/
15-
14+
1615
& * {
1716
box-sizing: border-box;
1817
}
@@ -26,7 +25,7 @@
2625
bottom: 0;
2726
padding: calc($gap*$PX);
2827
cursor: move;
29-
28+
3029
[data-component="code-button"] {
3130
margin-top: calc(5*$PX);
3231
}
@@ -108,12 +107,6 @@
108107
display: none;
109108
}
110109

111-
/*&.is-minimize-transition {
112-
transition: width .15s ease-out,
113-
height .15s ease-out,
114-
border-radius .15s ease-out;
115-
}*/
116-
117110
&.is-inactive {
118111
.curve-editor__mojs-logo {
119112
& [data-component="icon"] {
@@ -124,9 +117,9 @@
124117

125118
&.is-minimized {
126119
width: calc(100*$PX) !important;
127-
height: calc(45*$PX) !important;
120+
height: calc(45*$PX) !important;
128121
border-radius: calc(7 * $PX);
129-
122+
130123
[data-component="resize-handle"],
131124
[data-component="point"],
132125
[data-component="icon-divider"],
@@ -149,4 +142,15 @@
149142
display: block;
150143
}
151144
}
145+
146+
/* all static on minimize classes */
147+
&.is-hidden-on-min.is-minimized {
148+
display: none;
149+
}
150+
151+
152+
/*&.is-highlighted {
153+
border-color: $c-orange;
154+
}*/
155+
152156
}

‎app/css/blocks/curve-editor.postcss.css.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"curve-editor":"_curve-editor_12556_3","curve-editor__left":"_curve-editor__left_12556_1","curve-editor__right":"_curve-editor__right_12556_140","curve-editor__resize-handle":"_curve-editor__resize-handle_12556_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_12556_135","curve-editor__mojs-logo":"_curve-editor__mojs-logo_12556_118","is-inactive":"_is-inactive_12556_117","is-minimized":"_is-minimized_12556_125","curve__svg-wrapper":"_curve__svg-wrapper_12556_144"}
1+
{"curve-editor":"_curve-editor_10g8s_3","curve-editor__left":"_curve-editor__left_10g8s_1","curve-editor__right":"_curve-editor__right_10g8s_133","curve-editor__resize-handle":"_curve-editor__resize-handle_10g8s_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_10g8s_128","curve-editor__mojs-logo":"_curve-editor__mojs-logo_10g8s_111","is-inactive":"_is-inactive_10g8s_110","is-minimized":"_is-minimized_10g8s_118","curve__svg-wrapper":"_curve__svg-wrapper_10g8s_137","is-hidden-on-min":"_is-hidden-on-min_10g8s_147"}

‎app/css/blocks/curve.postcss.css‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,9 @@ $gap: 10;
2222
top: 0;
2323
bottom: 0;
2424
width: calc( $size * $PX );
25-
/*height: calc( $size * $PX );*/
26-
/*left: 50%;*/
2725
left: 0;
28-
/*margin-left: calc( -$size/2 * $PX );*/
2926
opacity: 0.5;
3027
border-radius: inherit;
31-
/*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMzUwcHgiIGhlaWdodD0iMzUwcHgiIHZpZXdCb3g9IjAgMCAzNTAgMzUwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPiAgICAgICAgPHRpdGxlPlNsaWNlIDE8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEuMDAwMDAwLCAwLjAwMDAwMCkiIHN0cm9rZT0iI0ZGRkZGRiI+ICAgICAgICAgICAgPHBhdGggZD0iTTMzMy40OTc4MjEsMzUwLjUwMTA4OCBMMzMzLjQ5NzgyMSwwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTMxNS45OTc4MjEsMzUwLjUwMTA4OCBMMzE1Ljk5NzgyMSwwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTI5OC40OTc4MjEsMzUwLjUwMTA4OCBMMjk4LjQ5NzgyMSwwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTI4MC45OTc4MjEsMzUwLjUwMTA4OCBMMjgwLjk5NzgyMSwwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTI0NS45OTc4MjEsMzUwLjUwMTA4OCBMMjQ1Ljk5NzgyMSwwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTIyOC40OTc4MjEsMzUwLjUwMTA4OCBMMjI4LjQ5NzgyMSwwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTIxMC45OTc4MjEsMzUwLjUwMTA4OCBMMjEwLjk5NzgyMSwwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTE5My40OTc4MjEsMzUwLjUwMTA4OCBMMTkzLjQ5NzgyMSwwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTE1OS4zNzI4MjEsMzUwLjUwMTA4OCBMMTU5LjM3MjgyMSwwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTE0MS44NzI4MjEsMzUwLjUwMTA4OCBMMTQxLjg3MjgyMSwwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTEyNC4zNzI4MjEsMzUwLjUwMTA4OCBMMTI0LjM3MjgyMSwwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTEwNi44NzI4MjEsMzUwLjUwMTA4OCBMMTA2Ljg3MjgyMSwwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTcxLjg3MjgyMDcsMzUwLjUwMTA4OCBMNzEuODcyODIwNywwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTU0LjM3MjgyMDcsMzUwLjUwMTA4OCBMNTQuMzcyODIwNywwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTM2Ljg3MjgyMDcsMzUwLjUwMTA4OCBMMzYuODcyODIwNywwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTE5LjM3MjgyMDcsMzUwLjUwMTA4OCBMMTkuMzcyODIwNywwLjUwMTA4ODMwMiIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTM1MS4wMDEwODgsMTkuMDAyMTc5MyBMMS4wMDEwODgzLDE5LjAwMjE3OTMiIGlkPSJwYXRoMTg3MiIgb3BhY2l0eT0iMC4yNSI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNTEuMDAxMDg4LDM2LjUwMjE3OTMgTDEuMDAxMDg4MywzNi41MDIxNzkzIiBpZD0icGF0aDE4NzIiIG9wYWNpdHk9IjAuMjUiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNMzUxLjAwMTA4OCw1NC4wMDIxNzkzIEwxLjAwMTA4ODMsNTQuMDAyMTc5MyIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTM1MS4wMDEwODgsNzEuNTAyMTc5MyBMMS4wMDEwODgzLDcxLjUwMjE3OTMiIGlkPSJwYXRoMTg3MiIgb3BhY2l0eT0iMC4yNSI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNTEuMDAxMDg4LDEwNi41MDIxNzkgTDEuMDAxMDg4MywxMDYuNTAyMTc5IiBpZD0icGF0aDE4NzIiIG9wYWNpdHk9IjAuMjUiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNMzUxLjAwMTA4OCwxMjQuMDAyMTc5IEwxLjAwMTA4ODMsMTI0LjAwMjE3OSIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTM1MS4wMDEwODgsMTQxLjUwMjE3OSBMMS4wMDEwODgzLDE0MS41MDIxNzkiIGlkPSJwYXRoMTg3MiIgb3BhY2l0eT0iMC4yNSI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNTEuMDAxMDg4LDE1OS4wMDIxNzkgTDEuMDAxMDg4MywxNTkuMDAyMTc5IiBpZD0icGF0aDE4NzIiIG9wYWNpdHk9IjAuMjUiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNMzUxLjAwMTA4OCwxOTMuMTI3MTc5IEwxLjAwMTA4ODMsMTkzLjEyNzE3OSIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTM1MS4wMDEwODgsMjEwLjYyNzE3OSBMMS4wMDEwODgzLDIxMC42MjcxNzkiIGlkPSJwYXRoMTg3MiIgb3BhY2l0eT0iMC4yNSI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNTEuMDAxMDg4LDIyOC4xMjcxNzkgTDEuMDAxMDg4MywyMjguMTI3MTc5IiBpZD0icGF0aDE4NzIiIG9wYWNpdHk9IjAuMjUiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNMzUxLjAwMTA4OCwyNDUuNjI3MTc5IEwxLjAwMTA4ODMsMjQ1LjYyNzE3OSIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTM1MS4wMDEwODgsMjgwLjYyNzE3OSBMMS4wMDEwODgzLDI4MC42MjcxNzkiIGlkPSJwYXRoMTg3MiIgb3BhY2l0eT0iMC4yNSI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNTEuMDAxMDg4LDI5OC4xMjcxNzkgTDEuMDAxMDg4MywyOTguMTI3MTc5IiBpZD0icGF0aDE4NzIiIG9wYWNpdHk9IjAuMjUiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNMzUxLjAwMTA4OCwzMTUuNjI3MTc5IEwxLjAwMTA4ODMsMzE1LjYyNzE3OSIgaWQ9InBhdGgxODcyIiBvcGFjaXR5PSIwLjI1Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTM1MS4wMDEwODgsMzMzLjEyNzE3OSBMMS4wMDEwODgzLDMzMy4xMjcxNzkiIGlkPSJwYXRoMTg3MiIgb3BhY2l0eT0iMC4yNSI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik04OC4wNjQxMzUyLDEgTDg4LjA2NDEzNTIsMzUxIiBpZD0icGF0aDgyMTUiIG9wYWNpdHk9IjAuNSI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNzUuMTI4MjcsMSBMMTc1LjEyODI3LDM1MSIgaWQ9InBhdGg4MjE1IiBvcGFjaXR5PSIwLjUiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNMjYyLjE5MjQwNiwxIEwyNjIuMTkyNDA2LDM1MSIgaWQ9InBhdGg4MjE1IiBvcGFjaXR5PSIwLjUiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNMzUwLjU2MzU5MSw4OC4wNjQ2NzkzIEwwLjU2MzU5MTAyMiw4OC4wNjQ2NzkzIiBpZD0icGF0aDgyMTUiIG9wYWNpdHk9IjAuNSI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNTAuNTYzNTkxLDE3NS41NjQ2NzkgTDAuNTYzNTkxMDIyLDE3NS41NjQ2NzkiIGlkPSJwYXRoODIxNSIgb3BhY2l0eT0iMC41Ij48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTM1MC41NjM1OTEsMjYzLjA2NDY3OSBMMC41NjM1OTEwMjIsMjYzLjA2NDY3OSIgaWQ9InBhdGg4MjE1IiBvcGFjaXR5PSIwLjUiPjwvcGF0aD4gICAgICAgICAgICA8cmVjdCBpZD0icmVjdDEwMDc4IiBvcGFjaXR5PSIwLjc1IiB4PSIwLjg3MjgxNzk1NSIgeT0iMSIgd2lkdGg9IjM1MCIgaGVpZ2h0PSIzNTAiPjwvcmVjdD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);*/
3228

3329
& svg {
3430
width: 100%;
@@ -45,7 +41,7 @@ $gap: 10;
4541
left: calc( -1*$PX );
4642
right: calc( -1*$PX );
4743
}
48-
44+
4945
&__svg {
5046
display: block;
5147
overflow: visible;

‎app/css/blocks/curve.postcss.css.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"curve":"_curve_1k7gs_5","curve__background":"_curve__background_1k7gs_1","curve__svg-wrapper":"_curve__svg-wrapper_1k7gs_1","curve__svg":"_curve__svg_1k7gs_1","curve__svg-segment":"_curve__svg-segment_1k7gs_1"}
1+
{"curve":"_curve_1w89w_5","curve__background":"_curve__background_1w89w_1","curve__svg-wrapper":"_curve__svg-wrapper_1w89w_1","curve__svg":"_curve__svg_1w89w_1","curve__svg-segment":"_curve__svg-segment_1w89w_1"}

‎app/index.html‎

Lines changed: 8 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>Document</title>
5+
<title>Curve Editor</title>
66
</head>
77
<body>
88

@@ -61,159 +61,19 @@
6161
/*transform-origin: center bottom;*/
6262
}
6363
</style>
64-
64+
6565
<script src="../node_modules/mo-js/build/mo.js" charset="utf-8"></script>
6666
<script src="../node_modules/mojs-player/build/mojs-player.js" charset="utf-8"></script>
6767
<script src="build/mojs-curve-editor.js" charset="utf-8"></script>
6868

69-
<script type="text/javascript" src='https://code.jquery.com/jquery-3.1.1.min.js'></script>
70-
7169
<script>
72-
73-
// jQuery(function ($) { new MojsCurveEditor({ name: 'some name' }); });
74-
new MojsCurveEditor({ name: 'some name' });
75-
76-
77-
78-
// var scaleCurve = new window.MojsCurveEditor({ name: 'curve_scale' });
79-
// var rotateCurve = new window.MojsCurveEditor({ name: 'curve_rotate' });
80-
// var originCurve = new window.MojsCurveEditor({ name: 'curve_origin' });
81-
// var curveEditor = new window.MojsCurveEditor({ name: 'curve1' });
82-
// var curveEditorSmall = new window.MojsCurveEditor({ name: 'curve1_small' });
83-
84-
// var CUSTOM_PROPS = {
85-
// originY: 50,
86-
// draw (el, props) {
87-
// el.style.transformOrigin = `50% ${props.originY}%`;
88-
// }
89-
// }
90-
91-
// var CUSTOM_PROPS_2 = {
92-
// originY: 50,
93-
// draw (el, props) {
94-
// el.style.transformOrigin = `50% ${props.originY}%`;
95-
// }
96-
// }
97-
98-
// const timeline = new mojs.Timeline();
99-
100-
// var html = new mojs.Html({
101-
// el: '#js-el',
102-
// customProperties: CUSTOM_PROPS,
103-
// duration: 1000,
104-
// y: { [-200] : -200, curve: curveEditor.getEasing() },
105-
// scaleX: { 1:1, curve: scaleCurve.getEasing() },
106-
// scaleY: {
107-
// 1:1,
108-
// curve: scaleCurve.getEasing({
109-
// transform: (k) => { return 1 + ( 1-k )/1.5; }
110-
// })
111-
// },
112-
// angleZ: { 90: 90, curve: rotateCurve.getEasing() },
113-
// originY: { 100: 100, curve: originCurve.getEasing() }
114-
// });
115-
116-
// var html2 = new mojs.Html({
117-
// el: '#js-el2',
118-
// customProperties: CUSTOM_PROPS_2,
119-
// duration: 1000,
120-
// y: { [-300] : -300, curve: curveEditorSmall.getEasing() },
121-
// scaleX: { 1:1, curve: scaleCurve.getEasing() },
122-
// scaleY: {
123-
// 1:1,
124-
// curve: scaleCurve.getEasing({
125-
// transform: (k) => { return 1 + ( 1-k )/1.5; }
126-
// })
127-
// },
128-
// angleZ: { [-90]: -90, curve: rotateCurve.getEasing() },
129-
// originY: { 100: 100, curve: originCurve.getEasing() }
130-
// });
131-
132-
// const colors = [ '#7b7b7b', '#6b6b6b', '#5b5b5b', '#4A4A4A' ];
133-
134-
// const burst = new mojs.Burst({
135-
// // parent: '#js-el',
136-
// isShowStart: true,
137-
// degree: 10,
138-
// count: 5,
139-
// angle: {90: 10, easing: 'cubic.inout'},
140-
// left: '10%',
141-
// top: '90%',
142-
// x: { 0: 150, easing: 'cubic.in' },
143-
// // scale: { 0: 1, easing: 'expo.out' },
144-
// y: -5,
145-
// radius: {0:150},
146-
// timeline: { speed: .75 },
147-
// opacity: .65,
148-
// children: {
149-
// // fill: '#222',
150-
// fill: colors,
151-
// radius: 'rand(12,18)',
152-
// isSwirl: true,
153-
// direction: 1,
154-
// pathScale: 'rand(.5, .75)',
155-
// swirlFrequency: 'rand(2, 4)',
156-
// swirlSize: 'rand(10, 17)',
157-
// scale: { 1: 0, easing: 'cubic.inout' },
158-
// // delay: 'rand(300, 350)',
159-
// delay: 235,
160-
// // duration: 'rand(300, 500)'
161-
// duration: 'stagger(300, 35)'
162-
// }
163-
// });
164-
165-
// const burst2 = new mojs.Burst({
166-
// // parent: '#js-el',
167-
// isShowStart: true,
168-
// degree: 10,
169-
// count: 5,
170-
// angle: {[-90]: -10, easing: 'cubic.inout'},
171-
// left: '10%',
172-
// top: '90%',
173-
// x: { 0: -150, easing: 'cubic.in' },
174-
// // scale: { 0: 1, easing: 'expo.out' },
175-
// y: -5,
176-
// radius: {0:150},
177-
// timeline: { speed: .75 },
178-
// opacity: .65,
179-
// children: {
180-
// // fill: '#222',
181-
// fill: colors,
182-
// radius: 'rand(12,18)',
183-
// isSwirl: true,
184-
// direction: 1,
185-
// pathScale: 'rand(.5, .75)',
186-
// swirlFrequency: 'rand(2, 4)',
187-
// swirlSize: 'rand(10, 17)',
188-
// scale: { 1: 0, easing: 'cubic.inout' },
189-
// // delay: 'rand(300, 350)',
190-
// delay: 235,
191-
// // duration: 'rand(300, 500)'
192-
// duration: 'stagger(300, 35)'
193-
// }
194-
// });
195-
196-
// burst.el.style.zIndex = 3;
197-
// burst2.el.style.zIndex = 3;
198-
199-
// var shadow = new mojs.Html({
200-
// el: '#js-shadow',
201-
// duration: 1000,
202-
// opacity: { 1: 1, curve: scaleCurve.getEasing({
203-
// transform: (k) => {
204-
// return Math.max((k - 1)/4, .05);
205-
// }
206-
// }) },
207-
// scale: { 1:1, curve: scaleCurve.getEasing({
208-
// transform: (k) => { return 1.35*k; }
209-
// })}
210-
// });
211-
212-
// timeline.add(html, html2, burst, burst2, shadow);
213-
214-
// new MojsPlayer({ add: timeline });
70+
var curveEditor = new MojsCurveEditor({
71+
name: 'some name',
72+
// onChange(path) { console.log(path); },
73+
// isHiddenOnMin: true
74+
}).toggleSize();
21575

21676
</script>
21777

21878
</body>
219-
</html>
79+
</html>

0 commit comments

Comments
 (0)