|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<link rel="preconnect" href="https://fonts.gstatic.com"> |
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> |
|
<link rel="stylesheet" href="nice-select.css"> |
|
<link ref="stylesheet" href="range-slider.min.css"> |
|
<link rel="stylesheet" href="magic-check.min.css"> |
|
<link rel="stylesheet" href="styles.css"> |
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css"/> |
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> |
|
<link rel="icon" type="image/x-icon" href="/favicon.ico"> |
|
|
|
<title>Motionity - The web-based motion graphics editor for everyone</title> |
|
<meta name="title" content="Motionity - The web-based motion graphics editor for everyone"> |
|
<meta name="description" content="Create animated videos for free with Motionity, an open source motion graphics editor with keyframing, masking, filters, text animations, and more. "> |
|
|
|
|
|
<meta property="og:type" content="website"> |
|
<meta property="og:url" content="https://www.motionity.app/"> |
|
<meta property="og:title" content="Motionity - The web-based motion graphics editor for everyone"> |
|
<meta property="og:description" content="Create animated videos for free with Motionity, an open source motion graphics editor with keyframing, masking, filters, text animations, and more. "> |
|
<meta property="og:image" content="https://motionity.app/meta.png"> |
|
|
|
|
|
<meta property="twitter:card" content="summary_large_image"> |
|
<meta property="twitter:url" content="https://www.motionity.app/"> |
|
<meta property="twitter:title" content="Motionity - The web-based motion graphics editor for everyone"> |
|
<meta property="twitter:description" content="Create animated videos for free with Motionity, an open source motion graphics editor with keyframing, masking, filters, text animations, and more. "> |
|
<meta property="twitter:image" content="https://motionity.app/meta.png"> |
|
</head> |
|
<body draggable="false"> |
|
<div id="disclaimer"> |
|
<div id="optimized"> |
|
<div id="emoji">🤔</div> |
|
<div id="opt-title">Motionity isn't optimized for mobile</div> |
|
<div id="opt-desc">You need to use a computer to be able to create animations with Motionity.</div> |
|
<a href="https://twitter.com/alyssaxuu" target="_blank" id="opt-button">Other products by the maker</a> |
|
</div> |
|
<div id="disc-overlay"></div> |
|
</div> |
|
<audio controls id="audio-thing"> |
|
<source src="assets/audio.wav" type="audio/wav"> |
|
</audio> |
|
<input type="file" id="filepick" accept="image/*,video/*,audio/*" multiple> |
|
<input type="file" id="filepick2" accept="audio/*"> |
|
<input type="file" id="filepick3" accept="application/json"> |
|
<input type="file" id="import" style="display:none" accept='.json' aria-hidden="true" > |
|
<div id="upload-popup"> |
|
<div id="upload-popup-container"> |
|
<div id="upload-popup-header"> |
|
<div id="upload-popup-title">Upload media</div> |
|
<img id="upload-popup-close" src="assets/close.svg"> |
|
</div> |
|
<div id="upload-drop-area"> |
|
<div id="upload-drop-group"> |
|
<img src="assets/upload.svg"> |
|
<div id="upload-drop-title">Click to upload</div> |
|
<div id="upload-drop-subtitle">Or drag and drop a file</div> |
|
</div> |
|
</div> |
|
<div id="upload-link"> |
|
<input id="upload-link-input" placeholder="Paste an image of video URL"> |
|
<div id="upload-link-add">Add</div> |
|
</div> |
|
</div> |
|
<div id="upload-overlay"></div> |
|
</div> |
|
<div id="download-modal"> |
|
<p class="header">Download settings</p> |
|
<p class="subheader">Formats</p> |
|
<div id="radio"> |
|
<input class="magic-radio" type="radio" name="radio" id="webm-format" value="webm" checked> |
|
<label for="webm-format">WEBM video <span>(fastest)</span></label> |
|
<input class="magic-radio" type="radio" name="radio" value="mp4" id="mp4-format"> |
|
<label for="mp4-format">MP4 video</label> |
|
<input class="magic-radio" type="radio" name="radio" value="gif" id="gif-format"> |
|
<label for="gif-format">Animated GIF</label> |
|
<input class="magic-radio" type="radio" name="radio" value="image" id="image-format"> |
|
<label for="image-format">Image</label> |
|
</div> |
|
<div id="download-real">Download</div> |
|
</div> |
|
<div id="import-export-modal"> |
|
<p class="header">Import & export</p> |
|
<p class="subtitle">Save this project locally, or load an existing one.</p> |
|
<p class="header-2">Import a project</p> |
|
<div id="import-project"><img src="assets/import.svg"> <span>Import</span></div> |
|
<p class="header-2">Export this project</p> |
|
<div id="export-project"><img src="assets/download-icon.svg"> <span>Export</span></div> |
|
</div> |
|
<div id="background-overlay"></div> |
|
<div id="color-picker"></div> |
|
<div id="color-picker-fill"></div> |
|
<div id="toolbar" class="noselect"> |
|
<div id="logo"><img src="assets/logo.svg"></div> |
|
<div id="tool-wrap"> |
|
<div class="tool" id="upload-tool"><img src="assets/uploads.svg"><p>Uploads</p></div> |
|
<div class="tool tool-active" id="shape-tool"><img src="assets/shape-active.svg"><p>Objects</p></div> |
|
<div class="tool" id="image-tool"><img src="assets/image.svg"><p>Images</p></div> |
|
<div class="tool" id="text-tool"><img src="assets/text.svg"><p>Text</p></div> |
|
<div class="tool" id="video-tool"><img src="assets/video.svg"><p>Videos</p></div> |
|
<div class="tool" id="audio-tool"><img src="assets/audio.svg"><p>Audio</p></div> |
|
<div class="tool" id="more-tool"><img src="assets/more-hoz.svg"><p>More</p></div> |
|
</div> |
|
</div> |
|
<div id="more-over"> |
|
<div id="upload-lottie"> |
|
<img src="assets/upload-grey.svg"> Upload Lottie |
|
</div> |
|
<div id="clear-project"> |
|
<img src="assets/clear.svg"> Clear project |
|
</div> |
|
</div> |
|
<div id="behind-browser"></div> |
|
<div id="browser"> |
|
<div id="browser-container"> |
|
<div id="search-fixed"><p class="property-title">Objects</p><img id="collapse" src="assets/collapse.svg"><div id="browser-search"><input placeholder="Search..."><img src="assets/search.svg" id="search-icon"><img src="assets/delete.svg" id="delete-search"><div id="search-button">Go</div></div></div><div id="shapes-cont"><p class="row-title">Shapes</p><div class="gallery-row" id="shapes-row"></div><p class="row-title">Emojis</p><div class="gallery-row" id="emojis-row"></div></div> |
|
</div> |
|
</div> |
|
<div id="properties"> |
|
<div id="properties-overlay"></div> |
|
<div id="align" class="align-off"> |
|
<div id="align-v"> |
|
<img class="align" id="align-top" src="assets/align-top.svg" title="Align to the top"> |
|
<img class="align" id="align-center-v" src="assets/align-center-v.svg" title="Align to the center"> |
|
<img class="align" id="align-bottom" src="assets/align-bottom.svg" title="Align to the bottom"> |
|
</div> |
|
<div id="align-h"> |
|
<img class="align" id="align-left" src="assets/align-left.svg" title="Align to the left"> |
|
<img class="align" id="align-center-h" src="assets/align-center-h.svg" title="Align to the center"> |
|
<img class="align" id="align-right" src="assets/align-right.svg" title="Align to the right"> |
|
</div> |
|
</div> |
|
<hr> |
|
<div id="object-specific"> |
|
<div id="canvas-properties" class="panel-section"> |
|
<p class="property-title">Canvas settings</p> |
|
<table> |
|
<tr> |
|
<th class="name-col">Preset</th> |
|
<th class="value-col"><select id="preset"><option>Dribbble shot</option><option>Facebook post</option></select></th> |
|
</tr> |
|
<tr> |
|
<th class="name-col">Size</th> |
|
<th class="value-col"><div id="canvas-w" class="property-input" data-label='W'><input min=1 type="number" value=1000></div><div id="canvas-h" class="property-input" data-label='H'><input type="number" value=1000 min=1></div></th> |
|
</tr> |
|
<tr> |
|
<th class="name-col">Color</th> |
|
<th class="value-col"> |
|
<div id="canvas-color"> |
|
<div id="color-side" class="color-picker"></div> |
|
<input value="#FFFFFF" disabled="disabled"> |
|
</div> |
|
<div id="canvas-color-opacity" class="property-input" data-label='%'><input type="number" value=100></div> |
|
</th> |
|
</tr> |
|
<tr> |
|
<th class="name-col">Duration</th> |
|
<th class="value-col" id="duration-cell"><div id="canvas-duration" class="property-input" data-label='s'><input type="number" value=15.00></div></th> |
|
</tr> |
|
</table> |
|
</div> |
|
</div> |
|
</div> |
|
<div id="canvas-area"> |
|
<div id="filters-parent"> |
|
<div id="filters"> |
|
<div id="filters-container"> |
|
<div id="filters-header"> |
|
<div id="filters-title">Filters</div> |
|
<img src="assets/close.svg" id="filters-close"> |
|
</div> |
|
<select id="filters-list"> |
|
<option value="none">No filter</option> |
|
<option value="Invert">Invert</option> |
|
<option value="Sepia">Sepia</option> |
|
<option value="BlackWhite">Black & white</option> |
|
<option value="Brownie">Retro</option> |
|
<option value="Vintage">Vintage</option> |
|
<option value="Technicolor">Technicolor</option> |
|
<option value="Kodachrome">Kodachrome</option> |
|
<option value="Polaroid">Polaroid</option> |
|
</select> |
|
<hr> |
|
<div id="filters-title">Adjustments</div> |
|
<div id="reset-filters"><img src="assets/repeat.svg"> Reset</div> |
|
<div class="filter-row"> |
|
<th class="name-col">Brightness</th> |
|
<th class="value-col"> |
|
<div id="filter-brightness" class="select-filter"></div> |
|
</th> |
|
</div> |
|
<div class="filter-row"> |
|
<th class="name-col">Contrast</th> |
|
<th class="value-col"> |
|
<div id="filter-contrast" class="select-filter"></div> |
|
</th> |
|
</div> |
|
<div class="filter-row"> |
|
<th class="name-col">Saturation</th> |
|
<th class="value-col"> |
|
<div id="filter-saturation" class="select-filter"></div> |
|
</th> |
|
</div> |
|
<div class="filter-row"> |
|
<th class="name-col">Vibrance</th> |
|
<th class="value-col"> |
|
<div id="filter-vibrance" class="select-filter"></div> |
|
</th> |
|
</div> |
|
<div class="filter-row"> |
|
<th class="name-col">Hue</th> |
|
<th class="value-col"> |
|
<div id="filter-hue" class="select-filter"></div> |
|
</th> |
|
</div> |
|
<hr> |
|
<div id="filters-title">Chroma key</div> |
|
<div class="filter-row"> |
|
<th class="name-col">Status</th> |
|
<th class="value-col"> |
|
<div id="status-toggle"> |
|
<div id="status-on" class="status-trigger">On</div> |
|
<div id="status-off" class="status-trigger status-active">Off</div> |
|
</div> |
|
</th> |
|
</div> |
|
<div class="filter-row" id="filter-color"> |
|
<th class="name-col">Color</th> |
|
<th class="value-col"> |
|
<div id="chroma-color"> |
|
<div id="color-chroma-side" class="color-picker"></div> |
|
<input value="#FFFFFF" disabled="disabled"> |
|
</div> |
|
</th> |
|
</div> |
|
<div class="filter-row"> |
|
<th class="name-col">Distance</th> |
|
<th class="value-col"> |
|
<div id="chroma-distance" class="select-filter"></div> |
|
</th> |
|
</div> |
|
<hr> |
|
<div id="filters-title">Stylize</div> |
|
<div class="filter-row"> |
|
<th class="name-col">Noise</th> |
|
<th class="value-col"> |
|
<div id="filter-noise" class="select-filter"></div> |
|
</th> |
|
</div> |
|
<div class="filter-row" id="blur"> |
|
<th class="name-col">Blur</th> |
|
<th class="value-col"> |
|
<div id="filter-blur" class="select-filter"></div> |
|
</th> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div id="top-canvas"> |
|
<div id="undo"><img src="assets/undo.svg"> Undo</div> |
|
<div id="redo"><img src="assets/undo.svg"> Redo</div> |
|
<div id="other-controls"> |
|
<div title="Hand tool (Space bar)" id="hand-tool"> |
|
<img src="assets/hand-tool.svg"> |
|
</div> |
|
<div id="zoom-level" title="Canvas zoom level"><span>100%</span><img src="assets/arrow.svg"></div> |
|
<div id="zoom-options" class="zoom-hidden"> |
|
<div class="zoom-options-item" data-zoom="in">Zoom in</div> |
|
<div class="zoom-options-item" data-zoom="out">Zoom out</div> |
|
<div class="zoom-options-item" data-zoom="50">Zoom to 50%</div> |
|
<div class="zoom-options-item" data-zoom="100">Zoom to 100%</div> |
|
<div class="zoom-options-item" data-zoom="200">Zoom to 200%</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div id="bottom-canvas"> |
|
<a id="sponsor" href="https://github.com/sponsors/alyssaxuu" target="_blank"><img src="assets/sponsor.svg"> Sponsor</a> |
|
<a id="alyssa-credit" href="https://twitter.com/alyssaxuu" target="_blank">Made by <span>Alyssa X</span> <img src="assets/alyssaimg.jpeg"></a> |
|
</div> |
|
<img src="assets/replace-image.svg" id="replace-image"> |
|
<img src="assets/loading-image.svg" id="load-image" class="load-media"> |
|
<img src="assets/loading-video.svg" id="load-video" class="load-media"> |
|
<canvas id="canvas"></canvas> |
|
</div> |
|
<div id="timeline-handle"></div> |
|
<div id="bottom-area" class="noselect"> |
|
<div id="keyframe-properties"> |
|
<div id="easing"> |
|
<p class="property-title">Keyframe easing</p> |
|
<select id="easing"> |
|
<option value="linear">Linear</option> |
|
<option value="easeInQuad">Ease in</option> |
|
<option value="easeOutQuad">Ease out</option> |
|
<option value="easeinOutQuad">Ease in-out</option> |
|
<option value="easeOutInQuad">Ease out-in</option> |
|
<option value="easeInBounce">Ease in bounce</option> |
|
<option value="easeOutBounce">Ease out bounce</option> |
|
<option value="easeinOutBounce">Ease in-out bounce</option> |
|
<option value="easeOutInBouce">Ease out-in bounce</option> |
|
<option value="easeOutInBouce">Ease out-in bounce</option> |
|
<option value="easeInSine">Ease in sine</option> |
|
<option value="easeOutSine">Ease out sine</option> |
|
<option value="easeinOutSine">Ease in-out sine</option> |
|
<option value="easeOutInSine">Ease out-in sine</option> |
|
<option value="easeOutInSine">Ease out-in sine</option> |
|
<option value="easeInCubic">Ease in cubic</option> |
|
<option value="easeOutCubic">Ease out cubic</option> |
|
<option value="easeinOutCubic">Ease in-out cubic</option> |
|
<option value="easeOutInCubic">Ease out-in cubic</option> |
|
<option value="easeOutInCubic">Ease out-in cubic</option> |
|
</select> |
|
</div> |
|
</div> |
|
<div id="nothing"></div> |
|
<div id="layer-list"> |
|
<div id="layerhead">LAYERS</div> |
|
<div id="layer-inner-list"> |
|
<img src="assets/nolayers.svg" id="nolayers"> |
|
</div> |
|
</div> |
|
<div id="timearea"> |
|
<div id="timeline"> |
|
<div id="seekarea"><div id="inner-seekarea"><div id="seekevents"></div></div><div id="time-numbers" class="noselect"></div><div id="seek-hover"></div><div id="seekbar"></div></div> |
|
<div id="line-snap"></div> |
|
<div id="inner-timeline"></div> |
|
</div> |
|
</div> |
|
</div> |
|
<div style="display:none;""> |
|
<canvas id="canvasrecord"></canvas> |
|
</div> |
|
<div id="controls" class="noselect"> |
|
<img id="timeline-big" src="assets/timeline-big.svg"> |
|
<div id="timeline-zoom"></div> |
|
<img id="timeline-small" src="assets/timeline-small.svg"> |
|
<div id="speed"> |
|
<div id="speed-settings"> |
|
<div class="speed" data-speed="4">4.0x</div> |
|
<div class="speed" data-speed="3">3.0x</div> |
|
<div class="speed" data-speed="2">2.0x</div> |
|
<div class="speed" data-speed="1.5">1.5x</div> |
|
<div class="speed" data-speed="1">1.0x</div> |
|
<div class="speed" data-speed="0.5">0.5x</div> |
|
</div> |
|
<img src="assets/zap.svg"> <span>1.0x</span> <img id="speed-arrow" src="assets/arrow.svg"> |
|
</div> |
|
<div id="playback"> |
|
<div id="current-time"> |
|
<input value="00:00:00" readonly> |
|
</div> |
|
<img src="assets/skip.svg" id="skip-backward"> |
|
<img src="assets/play-button.svg" id="play-button"> |
|
<img src="assets/skip.svg" id="skip-forward"> |
|
<div id="total-time"> |
|
<input value="00:00:00" readonly> |
|
</div> |
|
</div> |
|
<div id="controls-right"> |
|
<div id="share"><img src="assets/importexport.svg"> Import & export</div> |
|
<div id="download"><img src="assets/download-icon.svg"> Download</div> |
|
</div> |
|
</div> |
|
|
|
<video id="test-video"></video> |
|
<input id="emptyInput" value=" " style="opacity:0"> |
|
<script src="js/libraries/localbase.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/@simonwep/selection-js/lib/selection.min.js"></script> |
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> |
|
<script src="js/libraries/sortable.min.js"></script> |
|
<script src="js/libraries/range-slider.min.js"></script> |
|
<script src="js/libraries/jquery.nice-select.min.js"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/460/fabric.min.js"></script> |
|
<script src="js/libraries/anime.min.js"></script> |
|
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script> |
|
<script src="js/init.js"></script> |
|
<script src="js/ui.js"></script> |
|
<script src="js/align.js"></script> |
|
<script src="js/converter.js"></script> |
|
<script src="js/database.js"></script> |
|
<script src="js/lottie.js"></script> |
|
<script src="js/text.js"></script> |
|
<script src="js/recorder.js"></script> |
|
<script src="js/functions.js"></script> |
|
<script src="js/events.js"></script> |
|
</body> |
|
</html> |
