mojs / mojs-timeline-editor Goto Github PK
View Code? Open in Web Editor NEWGUI for interactive `html`/`custom points`/`timeline` editing while crafting your animations
License: MIT License
GUI for interactive `html`/`custom points`/`timeline` editing while crafting your animations
License: MIT License
We need this for the timeline editor: mojs/mojs-player#2
We need this for the timeline-editor
since the curve-editor
will be a part of it.
Please read the help wanted guide before start.
Create react
(preact
) component of the timeline panel. It should take 100%
of parent width
.
The precise sizes in pixels:
Colors:
#AE9BAE
white
#512750
Shadow of the panel: 0 2px 4px black
All time labels are exactly in the middle of the large dash.
As you can notice from size illustration, gap between dashes is 4px
, it should be defined in em
units. So if you set font-size
on the root of the component to 10px
, the gap should be set to 0.4em
so the result will be equal to 4px
.
Having that component will receive scale
property and the timeline will be scaled accordingly, simply by setting root's font-size
to appropriate value. For instance, if scale
property is 1.5
the font-size
should be set to 10
* 1.5
= 15px
. This will allow to scale
the timeline by means of em
units. All other sizes must not use em
s, only the size of dash gap should scale.
The timeline should cover at least 20 seconds
or 20 000 milliseconds
.
Entire sketch mockup could be found here: link and here link.
Cheers! ~
Please read the help wanted guide before start.
Create react
(preact
) component of the main panel. It should have position: fixed
, be at the bottom and take all width of the window.
It will have child panels - left
and right
:
left
panel is fixed size of 165px
.right
panel is fluid width of totalWidth - left panel width
And two buttons:
right
child panel.Please note that the panel can have optional MojsPlayer
at the bottom, so be sure that the panel doesn't go less than 40px
while hide
and resize
happens. Component will receive player
property that will define if player is present. Illustration with MojsPlayer
at the bottom:
hide
and resize
buttons are separate components. Those have been used in mojs-player and mojs-curve-editor repos so you can copy them.
The sketch mockup - main-panel.zip
Cheers!
Need to add eslint-loader
to webpack.config
and linting rules file. The file could be a airbnb's eslint config or this one.
Can we please add in readme how to initialise this and pass in a timeline?
I seem to be getting that "is not a constructor"
Please read the help wanted guide before start.
Illustration:
Task:
Create react
(preact
) component of the timeline handle. It should take 100%
of parent height
and should be shifted -10px top
:
#3D1B3C
#FF4F02
white
It should receive shift
prop and set that shift
as translateX
for the component.
Also it should receive scale
prop that will affect the translateX
value, regarding the simple formular: translateX({shift * scale}px)
.
Component will have horizontal drag/pan
event handler but that's not relevant right now.
Entire sketch mockup could be found here: link and here link.
Cheers! ~
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.