Giter VIP home page Giter VIP logo

mojs-timeline-editor's Introduction

mo · js – npm ci Coverage Status Slack

The motion graphics toolbelt for the web.

mo · js

Intro

mo · js is a javascript motion graphics library that is a fast, retina ready, modular and open source. In comparison to other libraries, it has a different syntax and code animation structure approach. The declarative API provides you a complete control over the animation, making it customizable with ease.

The library provides built-in components to start animating from scratch like html, shape, swirl, burst and stagger, but also bring you tools to help craft your animation in a most natural way. Using mojs on your site will enhance the user experience, enrich your content visually and create delightful animations precisely.

Install

Use with a bundler

Mojs is published on the NPM registry, so you can install it through the command line interpreter using your favorite package manager. This is the best way to install the library if you are comfortable with javascript bundlers like webpack or rollup.

# npm
npm install @mojs/core

# yarn
yarn add @mojs/core

Then import it like any other module inside your build:

import mojs from '@mojs/core';

new mojs.Html({
  // ...
});

Using a bundler has many advantages like output compression, code splitting, tree shaking, etc., so we encourage you to use this kind of tool with mojs.

Use with a CDN

To rapidly include the minified production file in your web page, load the latest build from your favorite CDN using a generic script markup:

<!-- unpkg -->
<script src="https://unpkg.com/@mojs/core"></script>

<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/@mojs/core"></script>

Then instanciate using:

<script>
  new mojs.Html({
    // ...
  });
</script>

By default, if no one is specified, the CDN will automatically target the @latest version of mojs and load the UMD build from dist/mo.umd.js.

User guide

The base documentation you need to get started with mojs.

Learn

Discover the amazing things that mojs can do!

Developer

Get technical informations, open an issue/pull request or join the (amazing) community!

Showcase

Browser support

  • Chrome 49+
  • Firefox 70+
  • Opera 36+
  • Safari 8+
  • Edge 79+

Many other browsers may work, but are not extensively tested.

Maintainers

Since 2019, mojs ecosystem is maintained and developed by:

Contribute

If you want to report a bug or request a new feature/improvement, please read the project contributors guidelines before. Thanks for taking time to contribute.

mojs-timeline-editor's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mojs-timeline-editor's Issues

Usage

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"

Create timeline panel

⚠️ @eugenechu is currently working on this one ⚠️

Please read the help wanted guide before start.

timeline panel

Create react (preact) component of the timeline panel. It should take 100% of parent width.

The precise sizes in pixels:

image

Colors:

  • small dash: #AE9BAE
  • large dash and number label: white
  • purple background: #512750

Shadow of the panel: 0 2px 4px black

All time labels are exactly in the middle of the large dash.

Requirements for the component

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 ems, 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! ~

Cut Timeline Handle Into Component

Please read the help wanted guide before start.

Illustration:

timeline handle

Task:

Create react (preact) component of the timeline handle. It should take 100% of parent height and should be shifted -10px top :

cut timeline

Colors:

  • purple background: #3D1B3C
  • orange: #FF4F02
  • lines: white

Component Requirements

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! ~

Create Main Panel Component

⚠️ @eugenechu is currently working on this one ⚠️

Please read the help wanted guide before start.

main panel

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:

  • the left panel is fixed size of 165px.
  • the right panel is fluid width of totalWidth - left panel width

And two buttons:

  • resize button: you can drag and resize the panel vertically
  • hide button: you can switch the state of the panel by clicking on the button, just like mojs-player can.
  • both buttons are exact in the center of the 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:

timeline-editor 2x

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!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.