Repository files navigation

GUI player to control your animations.

Player controls formojs. Intended to help you to craftmojs animation sequences. To be clear, this player is not needed to playmojs animations. It is just a debug tool that gives you the ability to:

• control your sequences withGUI while working on them
• it saves the current progress of your animation thus you don't loose thefocus
• it gives youbounds to constrainfocus point of your animation
• it gives you the control over the speed of animation
• it gives you the ability to seek animations freely
• it saves player's state and settings thus they not get lost when page reloaded

TheMojsPlayer depends onmojs >= 0.225.2 so make sure you link it first.

#cdn<script src="https://cdn.jsdelivr.net/npm/@mojs/player"></script>#npmnpm i @mojs/player

ImportMojsPlayer constructor to your code, depending on your environment:

constMojsPlayer=require('mojs-player').default;// orimportMojsPlayerfrom'@mojs/player';

If you installed it with script link — you should haveMojsPlayer global

ConstructMojsPlayer and pass your mainTween/Timeline to theadd option:

// create the timelineconstmainTimeline=newmojs.Timeline({});// add the timeline to the playerconstmojsPlayer=newMojsPlayer({add:mainTimeline});

Theadd option is theonly required option to launch: player's controls should appear at the bottom of the page when ready

You can also set other player initial state:

constmojsPlayer=newMojsPlayer({// requiredadd:mainTimeline,// optionallyclassName:'',// class name to add to main HTMLElementisSaveState:true,// determines if should preserve state on page reloadisPlaying:false,// playback stateprogress:0,// initial progressisRepeat:false,// determines if it should repeat after completionisBounds:false,// determines if it should have boundsleftBound:0,// left bound position  [0...1]rightBound:1,// right bound position [0...1]isSpeed:false,// determines if speed control should be openspeed:1,// `speed` valueisHidden:false,// determines if the player should be hiddenprecision:0.1,// step size for player handle - for instance, after page reload - player should restore timeline progress - the whole timeline will be updated incrementally with the `precision` step size until the progress will be met.name:'mojs-player',// name for the player - mainly used for localstorage identifier, use to distinguish between multiple local playersonToggleHide(isHidden){// should be called after user taps on the hide-button (isHidden is a boolean, indicating the visibility state of the player)if(isHidden){// do something when player is invisible}else{// do something when player is visible}}});

• alt + p - toggleplay/pause playback state
• alt + - - decrease progress by1/100
• alt + + - increase progress by1/100
• shift + alt + - - decrease progress by1/10
• shift + alt + + - increase progress by1/10
• alt + s -stop playback
• alt + r - togglerepeat state
• alt + b - togglebounds state
• alt + h - toggleshow/hide player state
• alt + q - resetspeed to1x
• alt + 2 - decreasespeed by1/50
• alt + 3 - increasespeed by1/50
• shift + alt + 2 - decreasespeed by1/10
• shift + alt + 3 - increasespeed by1/10

Installwebpack globally:

[sudo] npm install webpack -g

Install dependencies withnpm:

[sudo] npm install

Runwebpack:

webpack

Please make sure you are on thedev branch before making changes.