What's new

Updates and improvements to Jitter.

Subscribe to updates · Follow us on Twitter

Customer portal

With an increasing number of agencies, startups and companies among our customers, we are bringing a big improvement to all our Pro users. With our new customer portal, you can now manage all your subscription, billing and invoice details in one place.

More specifically, here is what you can do with the customer portal:

Update your payment method

You can now change the payment method of your Jitter Pro subscription at anytime. To do so:

  1. Click Manage billing from your account page.
  2. Click the Add payment method setting
  3. Enter the new credit or debit card details in the fields provided and confirm
  4. Optionally, you can delete the older payment method Jitter will use these payment details for your next subscription payment and onward. You can only pay for a Jitter Pro subscription with a credit card or a debit card that supports online transactions.

Change your billing email

You can now change the email we automatically send your invoices to. To do so:

  1. Click Manage billing from your account page.
  2. Click the Update information setting in the Billing information section
  3. Enter the email in the corresponding field and confirm Jitter will use this email to send your following invoices and receipts.

Change your billing information

You can now change the billing information and enter your company name, address, tax ID, VAT numer and more. To do so:

  1. Click Manage billing from your account page.
  2. Click the Update information setting in the Billing information section
  3. Enter the information in the fields provided and confirm Jitter will use these elements while generating your following invoices.

Download your past invoices

You can now access all your past invoices. To do so:

  1. Click Manage billing from your account page.
  2. Click on the desired invoice in the Invoice history section
  3. Download the invoice

Cancel your subscription

Cancelling your subscription is also available through the customer portal. To do so:

  1. Click Manage billing from your account page.
  2. Click the Cancel plan button
  3. Confirm your choice

Other improvements

  • Allowed the export of super slim/narrow artboards (for instance 80×2 or 4×80)
  • Fixed an bug that changed masked group positions unexpectedly
  • Fixed a crash occurring when pasting invalid data into Jitter
  • Fixed an issue with Intercom's start screen, where we would display messages instead of the home screen
  • Improved the performance of the selection rectangle in environments with many layers

Rich text editing

You can now compose beautifully formatted text, directly in the canvas.

Previously, if you wanted to highlight a word in bold or in a different color, you had to manually split the text in multiple words. You had to create a text layer for each word you wanted to highlight, and style that word independently. While you could achieve the desired result, it was not flexible: if you wanted to edit your text you had to manually reposition each of these highlighted words so they fit in the new sentence.

This is a thing of the past, as we now support rich text editing. Jitter now provides a WYSIWYG editor to add rich formatting to your texts directly on screen. Rich text editing works on these properties:

  • Font family
  • Font weight
  • Font size
  • Line height
  • Letter spacing
  • Letter case (normal, uppercase, lowercase)
  • Color

Other text properties like horizontal alignment, vertical alignment, or box resizing can only be applied to the entire text layer.

Other improvements

  • Improved canvas drawing performance

SVG to Lottie

We are improving our Lottie export: SVGs are now exported as native Lottie shapes.

Previously, SVGs were converted as rasterized images in the Lottie export. In some animations, they could appear pixelated, and we were losing one of the biggest advantages of Scalable Vector Graphics (being able to scale any preferred size without compromising on quality).

This is now fixed, as we are now converting SVGs to the native Lottie shape format. As a result, you get a crisp rendering of all your vector images in your animations. This improvement is compatible with all platforms.

Pro tip: you can now use Jitter to convert your SVGs to Lottie. This is particularly handy if you need to animate your SVG icons or illustrations and turn them into Lottie animations.

Other improvements

  • Improved Lottie export for emojis in texts (Apple Emojis are now supported)
  • Fixed a bug preventing SVGs to be edited the second time a file was opened
  • Fixed a bug where inspector values could propagate from 1 object to another when the selection changed

Show distance between objects

We just added one of the most requested usability features: you can now measure the distance between layers on the canvas. To show distance between layers, you can:

  1. Select an object
  2. Hold (or alt on Windows)
  3. Hover the other objects for which you want to know the distance to Jitter will display a red line between the objects, as well as a measurement.

Measuring the distances between layers works with any kind of element:

  • Artboard / scene
  • Texts
  • Vector shapes (rectangles, ellipses, stars)
  • Media shapes (images, videos, GIFs, SVGs)

We measure the distances between the bounding boxes of each object. There are some cases where the behavior may differ from what you expect:

  • Shapes with a center or outer stroke: Jitter will measure the distance to the object's bounds, and not the outer limit of the stroke
  • Stars: if you have stars with an odd number of spikes, the layer bounding box is slightly bigger than the shape's dimensions

Other improvements

  • Improved the display of scaled up images in the "Lottie - Others" profile
  • Ellipses with a “Resize” animation are now supported in the Lottie export
  • Fixed a display bug with flipped images
  • Fixed a bug with Undo / Redo in the inspector

Selection rectangle

We dramatically improved the way you can select layers on the canvas. Previously, it was only possible to select multiple layers by manually clicking on each of them. We are now adding a new way to select multiple layers on the canvas in a single gesture, with a selection rectangle.

To select multiple layers with the selection rectangle, you can click on the canvas and drag your mouse. All the layers that intersect that rectangle will be added to the selection.

If you want to add other elements to your existing selection, you can hold and draw another rectangle. If the rectangle interesects elements that were already in the selection, they will be removed from the selection.

Other improvements

  • Fixed a bug where texts with custom fonts imported from Figma could crash the file
  • Fixed a bug where creating a group could change the order of the layers inside it
  • Fixed a bug where artboard background animations didn't work in Lottie exports

Inline text editing

All texts in Jitter are now editable inline: you can now write and edit your content directly in the canvas. Double click on any text field to trigger the editing mode. Then, everything works as you expect: you can place the cursor anywhere you want with your mouse or using keyboard arrows, and start typing.

We also added many handy shortcuts. For instance, here is what you can do to speed up your workflow with your keyboard:

  • A: select all the text in the text box
  • + : move the cursor by word
  • + : move the cursor by paragraph
  • + : move the cursor at the beginning / end of the current line
  • + : move the cursor at the beginning / end of the text field

Finally, you can hold while using the keyboard arrows to manipulate the selection – this is compatible with the previous shortcuts (like holding to navigate by word)

We also support some useful mouse shortcuts:

  • Double-click to select the word under your cursor
  • Triple-click to select the entire paragraph
  • Quadruple click to select the entire text And the magic part? Try dragging the mouse after one of these multi-clicks and see what happens!

Other improvements

  • Increased the maximum scene duration to 120 seconds
  • Updated the Dribbble size preset to 1600 × 1200 px
  • Fixed a bug for line SVGs (open paths)
  • Fixed a bug in the mask text effects

Figma plugin: Dark mode, Auto Layout and more

We released a new version of our Figma plugin, which increases compatibility with the features Figma released at Config 2022. We now support the Dark Mode 🌙, and all the new capabilities of Auto Layout:

  • Negative spacing
  • Reverse order of the children layers
  • Individual paddings
  • Stroke included / excluded

We are still missing a few properties (Variable fonts, Truncate mode, Individual strokes). We'll add support for these as soon as Figma grants access to these parameters in the plugin API.

Other improvements

  • We fixed a bug where some soft line breaks were not exported correctly

Better text support in Lottie

We're improving our Lottie export: texts are now exported as real vector shapes, which gives a crisp rendering of your letters and words in your animations.

This improvement is compatible with all the fonts: the default fonts available in Jitter (Google Fonts), your custom fonts, and even emojis. 💫

Thanks to this, text layers in Lottie now also support basic animations, like resize, rotate, opacity, color or stroke.

Other improvements

  • Fixed a bug that would prevent to move layers with keyboard arrows
  • Fixed a bug that would prevent the display of the "New Animation" menu for masks

Figma to Lottie

We are releasing a new version of our plugin that lets you export your Figma designs to Lottie. It is as simple as before:

  1. Import your Figma artboard to Jitter in 1 click with the plugin
  2. Add animations in a few clicks in Jitter
  3. Export your animation in the Lottie format Then you can include your Lottie animations to your interfaces, apps, websites, Webflow projects or LottieFiles account seamlessly.

Figma plugin: export custom shapes as SVGs

We're releasing a new version of our Figma plugin that exports most custom shapes as SVGs. The assets imported in Jitter are crisp at any scale, and you can iterate on some properties (color, stroke) directly in Jitter.

Other improvements

  • Fixed a bug that would not set default values when adding a shadow or a stroke

Lottie export – Public beta

We just added one of the most requested features: you can now export your creations in Lottie format.

Lottie is a lightweight and interactive format that lets your embed high-quality, vector animations in your websites or apps.

The Lottie export is currently in beta. Here are the features that are not supported yet:

  • Text animations (we use a fade-in / fade-out instead)
  • Mask animations (we use a fade-in / fade-out instead)
  • Donuts and pies

We are currently working on adding support for these features.

Other improvements

  • Added the APNG export format
  • Prevented a crash when resizing artboards to a size of 0
  • Improved the handling of GIF layers
  • Improved the export page
  • Improved the sign-up flow
  • Added support for texts without background fill

Transparent GIF export

We dramatically improved the quality of transparent GIF exports. Due to the limitations of the GIF format, some exports could display a colorful drop shadow on the edges of the exported layers. We optimised the transparent GIF export parameters: transparent GIFs are now as sharp as they should be!

Optional fill for shapes

You can now remove the Fill of the shapes in Jitter: you can now style an element with just a stroke, and an optional shadow. For this, you just have to select the shape, and disable the "Background" field in the property panel (in Design mode).

This feature will be supported on texts soon.

Figma plugin improvements

We published a new version of the Figma plugin. In this version:

  • Hidden layers are now exported to Jitter
  • Shapes with no fill are now exported natively
  • We fixed a bug where some masked layers could make the plugin crash

Import GIFs to your projects

You can now import GIFs in your Jitter projects! GIFs work like any other media in Jitter: for instance you can add corner radius, strokes or shadows easily in the Design mode, and you can animate the GIF in the Animate mode.

Adding a GIF to your scene will also add a segment in the timeline (like videos). Adjusting the size of the segment will trim the GIF, just like a regular video. And if you go beyond the duration of the GIF, it will just loop.

⚠️ This feature is only available in Chrome for now, it will be released in other browsers later on.

Other improvements & fixes

  • Added more templates to the Gallery
  • Added the 3x export size when relevant
  • Improved how we display video frames in the Animate mode
  • Improved the Export process to make it work on more browsers
  • Fixed a bug when resizing a group would not resize its rotated children properly
  • Fixed an export bug where the last frame of the video was not taken into account
  • Fixed the corner radius property on some videos
  • Fixed a bug with easing functions what would result in invalid colors

Masks

Masks are now available in Jitter! To create a mask, just select multiple layers, and press M: the last layer of the selection will be used as a mask for the other layers of the selection. Then, to create your best effects, you can animate:

  • The mask group (all the layers)
  • The masked layers (all the layers of the group except the last one)
  • The mask (only the last layer of the group)

To remove the mask, you can simply select the masked group, and hit M.

All of these options are also available from the right-click menu.

Other improvements & fixes

  • The minimum scene duration is now 100ms
  • Launched the Jitter blog at blog.jitter.video
  • Improved the export flow
  • Fixed a bug that could prevent to import some SVGs
  • Fixed a bug when resizing a rotated group

Edit SVGs natively

When you import a SVG, you can now edit some basic properties directly in Jitter, like the fill color, the stroke color, and the stroke width. It is now also easier to resize a SVG: instead of cropping the SVG, we now rescale it.

Other improvements & fixes

  • The font style menu now displays human-readable values (“Light”, “Regular”, “Bold”…)
  • Removed the corner radius property for SVG media
  • Fixed a contrast issue on warning messages
  • Improved the labels in the Export Format menu
  • Added transparent background templates in the gallery
  • Added a “NEW” badge for new templates in the gallery
  • Improved the progress bar accuracy during the export

Transparent background export

You can now export your GIF and videos with a transparent background. To do this, you can simply remove the background of your artboard in the editor, or choose a transparent export format from the export page.

We support 2 video formats with transparency: .webm and .mov (ProRes 4444) so that you can use your transparent videos on a maximum number of platforms, like the web or video editing apps.

GIFs with a transparent background are also supported.

New export options (file format, fps, GIF loop)

We added more export options in the export page. You can change the frame rate (15fps, 30fps, 60fps), decide if you want your GIFs to loop, and change the file format.

We now support the following file formats:

  • .mp4
  • .webm (with optional transparency)
  • .mov (with optional transparency – ProRes4444)
  • .gif (with optional transparency)
  • .png (exports all the frames as PNGs)

Other improvements & fixes

  • Improved how the editor is displayed on mobile
  • Fixed a bug when looping playback on very short animations

Loop playback preview

We just added a much requested feature: you can now loop the playback when previewing your animation. It works both on the whole scene, or on the selected animations.

Other improvements & fixes

  • Added new templates to the gallery
  • Improved the video encoder
  • Fixed a bug that would make the application crash when deleting groups with animations

Animation snapping

Timeline animations now snap with each other: if you drag a segment near the edge of another segment, you'll feel some magnetism between segments, just like when you move objects on the canvas. And of course, the same thing happens when resizing a timeline segment.

Other improvements & fixes

  • You can now trigger the Hand tool by clicking on your mouse wheel
  • You can now sign in and login with Google in 1 click – no need for passwords or magic links anymore!
  • You can now set a text to UPPERCASE or lowercase in the text inspector
  • Improved the styling of forms on all the website
  • Improved video encoding quality
  • Added more fonts to the default font list
  • Added tooltips to the main actions buttons in the editor
  • Fixed a bug that occured while hovering the layers in the layer list

Rename layers inline

It is now possible to rename your layers by double-clicking on the layer name in the layer list. This also works for most animations in the timeline (except the elementary actions such as “Move”, “Scale”, etc.).

Hide & show layers

We added the possibility to hide a layer from the layer list. That's particularly handy if you want to concentrate on one part of the animation. To do so, just hover the layer in the layer list, and click on the “Eye” icon.

Actions on files

It is now possible to rename, duplicate or delete a file from the editor. To do so, you can click on the chevron next to the file name (in the top bar), and pick one of these actions from the menu. It is also possible to rename the file by clicking directly on the file name.

Other improvements & fixes

  • Playback now stops when switching to the Design tab
  • Display a warning message when opening Jitter from an unsupported browser (Jitter is currently optimized to run on the latest version of Google Chrome for Desktop)
  • Improved the export page
  • Improved stability when opening an existing project
  • Fixed an issue with texts when importing Figma projects
  • Fixed a bug that occured when ungrouping an empty group

Video support

You can now import videos in your Jitter projects. Once imported, the videos are represented by a segment in the timeline. You can crop the video by resizing the segment. We currently support the .mp4 and .mov formats.

Other improvements & fixes

  • It is now possible to reset your password and update your email in your account
  • It is now possible to zoom the canvas by pressing ctrl or meta key while scrolling
  • We now handle custom fonts with no name in their metas
  • The playback now stops when switching to the Design tab
  • Added more fonts to the list of available fonts
  • Added an alternate export method
  • Added strokes on groups
  • Added more animations on groups (color, resize…)
  • Improved the export flow
  • Improved the loading of custom fonts
  • Improved the video and GIF encoder
  • Improved font and asset uploads
  • Fixed some import warnings

Stroke

We now support stroke natively in Jitter. You can adjust the following parameters, the width, color and position (inside, outside, center). Strokes are currently supported on all layer types, except groups.

Stroke animation

It is also possible to animate the stroke properties, just like any other property. You can change the weight and color of the stroke, and apply an easing function.

Other improvements & fixes

  • Improved the video encoder performance
  • Fixed layout problem that would hide the shadow field in the design inspector
  • Fixed a bug where empty groups in the timeline would make the application crash
  • Fixed a bug that would prevent opening some files
  • Fixed a bug when ungrouping layers
  • Fixed a bug for timeline groups with a duration of 0

Duplicate layers by holding alt while dragging

We just released a much requested productivity improvement: you can now duplicate a layer by holding alt while dragging it on the canvas. All the layer properties are duplicated, including its animations: you can design an animated layer once, and duplicate it in one click. Huge time saver!

Other improvements & fixes

  • Added the GIF 2x export option
  • Improved the preview of animation presets for images
  • Improved layout of pricing page
  • Improved performance of the video encoder
  • Fixed a bug when ungrouping layers
  • Fixed a layout bug where the Intercom bubble would hide some sections of the inspector
  • Fixed a bug when deleting multiple groups at once
  • Fixed a bug where the Hide and Show actions could have a duration
  • Fixed a display bug on the timeline time ruler

Hide / Show animations

We just added 2 new types of animations: Hide and Show.

  • The “Hide” animation lets you hide an item instantly
  • The “Show” animation lets you display an item instantly

To add these animations, you can click on the “New animation” button, head to the “Custom” tab, and select the “Hide / Show” item.

Other improvements & fixes

  • It is now possible to drag & drop images from your computer files to your Jitter window
  • It is now possible to import multiple images at once from the file picker
  • It is now possible to duplicate a layer with D – this action is also available from the right-click menu
  • Fixed a bug where animations with a duration of 0 would disappear from the timeline
  • Fixed a bug when copying a text effect to another type of layer
  • Fixed a bug that would not update the size of the text box when changing the font
  • Improved behavior when adding multiple animations of the same type to the same object

Edit multiple layers or animations simultaneously

We are thrilled to introduce a huge productivity improvement: it is now possible to edit multiple items simulatenously!

You can select multiple layers by holding while clicking on them in the canvas or the layer list. Once they are selected, the inspector shows the property fields shared across all the layers. You can edit one value there, and all the selected layers will get this new value.

It is the same for animations: if you select multiple animations in the timeline with the key, you can then update their properties all at once. This works with all kinds of animations: presets, text animations, and custom animations

Other improvements & fixes

  • New export page UI
  • Added more items to the gallery
  • Improved the way Jitter handles encoding errors (if any)

Letter spacing support

We greatly improved the way we handle text layers: you can now adust the letter spacing. The letter spacing unit is percents of the font size.

Other improvements & fixes

  • Converted line height unit to percents
  • Added examples to the gallery
  • Improved performance to display examples from the gallery
  • UI improvements on the Figma plugin
  • Text can now be imported natively from Figma
  • Text with missing fonts can now be converted to native text by replacing or uploading the font

New text effect menu

Adding text effects is now easier than ever: when a text is selected and you click on the “New animation” button, we'll display a list of text animations sorted by effect. Once a text animation is applied, you can easily change the effect to test other possibilities. And of course, it is still possible to apply the effect to letters, words or lines, just like before.

Other improvements & fixes

  • Updated landing page
  • Added YouTube tutorials to My Files page

Timeline zoom

You can now zoom in and zoom out in the timeline. If you use a trackpad, you can use the sinple “pinch to zoom” gesture. If you use a mouse, you can hover the timeline with your mouse cursor, and scoll while holding the ctrl key.

Other improvements & fixes

  • Right click menu: it is now possible to access the contextual menu for layers and animations with a right click.
  • Improved Subscription flow
  • Updated Pricing page

Sync Figma projects

It is now possible to sync your Figma exports with your Jitter projects using our Figma plugin. If the frame you want to export has already been exported to Jitter, you can choose to resync it with the corresponding Jitter project(s): all the animations you started to make remain untouched. This allows you to design with the power of Figma, and animate with the power of Jitter.

Other improvements & fixes

  • Updated landing page & My Files page
  • Fixed UI overlay bug for color picker

Animations with initial value

Custom animations now support initial values. This is very handy to make your layers appear in the scene, while leaving their design untouched.

To activate the “Initial value” field, you just have to click on the + button at the top of the custom action inspector. Then, you can enter a value for the “From” field and / or for the “To” field.

Here is an example, to make a simple “Fade in” animation:

  • Add a new custom animation (Opacity)
  • Activate the “Initial value” field by clicking on the + button
  • In the “From” field, enter the value 0
  • In the “To” field, press to remove the value: you'll see the opacity value of the layer in its Design state

Other improvements & fixes

  • Added “Zoom to fit” option (also accessible with the 1 keyboard shortcut)
  • Users can now choose between a password or magic link login
  • Projects imported from Figma are now opened by default on the Animate tab
  • Users are now automatically redirected to the editor after sign up / login
  • Fixed a bug for videos with opacity < 100%
  • Fixed a bug for groups with no children
  • Updated landing page

Figma plugin

Our Figma plugin just got published on Figma Community: you can install it here! This plugin allows you in import a Figma project into Jitter, which means that you don't need to recreate the design from scratch in Jitter anymore. This is a huge time saver.

Here is how the plugin works:

  • Open the plugin
  • Select a Figma frame, and click the “Export” button
  • Open the project in Jitter and create some magic! ✨

Other improvements & fixes

  • Added an “Import from Figma” button in the file list
  • Display the file name in the top bar of the editor

Clipping groups

Groups just got a big upgrade! They now support:

  • A “Clip content” option (this will clip the content outside of the group boundaries)
  • A Corner Radius property
  • A Color Fill property
  • A Shadow property

Other improvements & fixes

  • Fixed a rendering bug for groups with opacity < 100% or with shadows
  • Improved the rendering engine to make the editing experience more fluid
  • Added default values for Shadow and Background fields
  • The timeline now crolls horizontally to show the animation selected last
  • Improved the font rendering for a more consistent experience in the editor and in the exported files

Super fast video export ⚡️

The export just got a big upgrade: exporting a GIF is now on average 4 times faster, and exporting a video is now on average 7 times faster (!!). To benefit from this upgrade, you just have to upgrade to the latest version of Chrome (89 and upwards) and reload the page.

Mac M1 computers will support this feature later.

Other improvements & fixes

  • It is now possible to fold / unfold a layer group without selecting it
  • Selecting a layer in the canvas now displays it in the layer list (auto unfold its parent groups, and auto scroll)
  • Added more examples to the Gallery
  • Added a Pricing page in the top bar
  • Updated the Subscribe page
  • Enabled HD export for up to 2160×2160px resolution
  • Fixed a bug to resize text boxes inside a group
  • Fixed a bug for resizing text boxes with the key pressed

Free trial and yearly plan

For our early supporters, we are really happy to introduce our yearly plan! From now on, the yearly and monthly plans also come with a free trial period of 7 days.

Other improvements & fixes

  • Improved how to grab handles of the layer selection box
  • Improved text box auto-resizing when the text is being typed
  • It is now possible to move multiple animations (in the timeline) with keyboard arrows
  • It is now possible to move animation groups (in the timeline) with keyboard arrows
  • Fixed a bug that would prevent to drag the selected layer if it was under another layer
  • Fixed a display bug for rectangles with rounded corners
  • Fixed a bug that would prevent to edit a “Move” operation graphically
  • Fixed a bug that would trigger the autocomplete menu when editing a value in the inspector
  • Fixed a bug that could cause the export to crash

Grouping layers

You can now select multiple layers and create a group with them! To do this, you can simply select the layers you want to group, and press G (or ctrlG on Windows). If you want to ungroup them, you can simply select the group, and press G (or ctrlG on Windows).

Groups in Jitter work like frames in Figma: their size and position is determined when they are created. After a group is created, changing the size or position of the children will not automatically change the group's bounding box.

By default, when you resize a group, it will resize all the children proportionally. However, if you press the ctrl key while resizing, it will simply resize the group boundaries and leave the children untouched.

Hand tool

You can now move the canvas with the Hand tool. To do this:

  • Press H and keep the key pressed – the cursor will change to a hand
  • Click an drag your mouse to move navigate in the work zone

Other improvements & fixes

  • Added more keyboard shortcuts (press R to create a rectangle, press O to create an ellipse, press T to create a text)
  • Fixed a bug that would prevent the drag of the selected element if it was under another element
  • Swap the export button and zoom menu in the top bar
  • Updated the login page

Cloud file synchronization

All your files now automatically sync to the cloud: as soon as you are logged in, you can access them from any browser, and they are always up to date. This is a first step towards a seamless real-time collaboration experience, and we can't wait to push this further!

Zoom menu

We added a menu in the top bar that lets you adjust the canvas zoom level. We also added some keyboard shortcuts for this:

  • Zoom in by pressing the + key
  • Zoom out by pressing the - key
  • Zoom to 100% by pressing the 0 key combination

Other improvements & fixes

  • Fixed a bug that would cause the canvas to zoom out instantly on Windows
  • Increased the max GIF export size
  • Updated our Terms & Conditions and Privacy Policy

Improvements & fixes

This week is mostly about bug fixes and stabilization:

  • Increased the draggable area around objects
  • Fixed cursor conflicts for small or narrow objects
  • Fixed a bug that would make the Typewriter effect crash with texts of only 1 letter
  • We now automatically redirect logged users to their file list
  • Fixed a bug for ellipse animations (negative ratio, negative width)

Scrollable timeline

You can now scroll the timeline horizontally. This makes it easier to animate longer projects and focus on one part of the animation.

Other improvements & fixes

  • It is now possible to edit the artboard duration graphically in the timeline
  • We now display the artboard duration next to the artboard name in the canvas
  • We now use the project name to name the exported file (.mp4 or .gif)
  • Fixed a bug in the timeline when there were no animations
  • Fixed a bug that would make the application crash on some text effects
  • Fixed the layer header styling

Jitter is now in public beta!

We are really excited to open the beta to the public, and to launch Jitter on Product Hunt!

Jitter is still in early stage so some things might not work as expected, but it is really important we get more feedback from our users. In particular, we really want to learn about your use cases and how we can improve the tool for you. So please reach out to us to give us honest feedback, we really want to hear the truth (even if it hurts sometimes).

Our goal is to make a simple and modern tool for motion design, and we need you for this :) Can't wait to see what you create!

Other improvements & fixes

  • The design tab is now selected by default when you open a project with no animations
  • When opening a project, we now set the zoom level so the arboard is entirely visible
  • The default font size is now proportional to the artboard size
  • Updated the “Join the beta” form
  • Added hover effect on gallery items
  • Added a subscribe link to My Account page

Export menu

The export menu now proposes multiple options, with:

  • Standard video sizes: 480p, 720p, 1080p
  • Design-ready video sizes: 0.5x, 1x, 2x
  • Design-ready GIF sizes: 0.5x, 1x.

The standard video sizes will scale up or scale down your artboard size for the export, in order to match the 480p, 720p or 1080p resolution. The design-ready video & GIF sizes will export at the artboard size, with the multiplicating factor.

Free video exports under 480p

We also introduce a Free vs. PRO plan. In the free plan, you can export any video size up to 480p, and any GIF size up to 360p. HD video export (artboard size > 480 px) and large GIF export (artboard size > 360 px) are available under the PRO plan.

Other improvements & fixes

  • It is now possible to move timeline segments with keyboard arrows
  • Made the example gallery page available to anyone
  • Users can now try the editor without being logged-in (but you still have to be looged in to save your files)

Text presets

Today we release text animation presets. Just like for regular presets, you can add a “In” preset to make your text appear, and a “Out” preset to make it disappear. Text presets enable you to animate texts:

  • Letter by letter,
  • Word by word,
  • or Line by line.

You can customize the animation of each node (letter, word, line), and the offset between each of these nodes.

Other improvements and fixes

  • It is now possible to move timeline segments with keyboard arrows
  • It is now possible to edit objects graphically between “in” and “out” animations
  • It is now possible to edit objects graphically when the time cursor is at the end of an operation
  • The scene size and duration are now available in both Design and Animate modes
  • Added more examples to the gallery
  • Changed the playback behavior of actions in “in” mode
  • Updated the text effects inspector
  • Fixed a bug on the slide direction of text effects
  • Fixed a display bug that would display a small part of the object before a masking animation
  • Changed how you can define initial values for actions
  • Renamed items in the inspector menu

Animation presets

Today we release animation presets: they allow to add rich animations to your objects in just one click. We reorganised the main animation menu, which has now 3 tabs:

  • In: lists the presets to make an object appear in the scene
  • Out: lists the presets to make an object disappear from the scene
  • Custom: lists all the elementary actions, if you want to build a custom animation from scratch

You can also break down the presets into their individual actions, if you want to fully customize them. You can find this option in the contextual menu, in the top right of the inspector. This feature is not yet available on mask presets.

Other improvements and fixes

  • Fixed a problem with the URLs to share projects
  • Fixed a display bug for groups of layers when the opacity was <100%
  • Updated default parameters when adding a new shape
  • Updated the animation menu style from dark to light mode

Contextual menu

We added a menu at the top right of the inspector. For layers and animations, you can now access contextual commands such as rename, delete, group, ungroup…

Other improvements and fixes

  • Fixed a display bug for a group of objects with opacity < 100%
  • Fixed a bug when resizing text boxes
  • Added more examples to the gallery

Group animations in the timeline

You can now group animations in the timeline. It works like for grouping layers in regular design tools: select the animations you want to group and press G. To ungroup, selected the element and press G. Grouping animations together is particularly useful to organize the timeline in a more logical way.

Rename animation groups

To go even further, it is now possible to rename the animation groups. For instance, you can make a group of “Move” + “Opacity” and name it “Slide in”. Or, you can group all the animations of the beginning of your scene, and name it “Intro”. This is particularly useful to organize the timeline in a more readable way.

Other improvements and fixes

  • Added a 5px security margin before starting to drag elements
  • Added an empty state to the file list
  • Fixed a bug that would reorder items in the layer list and the timeline when dragging them
  • Improved the experience while reordering items
  • Updated UI of the timeline and the layer list

Copy & Paste animations

It is now possible to copy and paste animations. For this:

  • Step 1: Select the animation you want to copy and press C
  • Step 2: Select the object you want to paste it on, and press V

That's it! And of course, it also works with ctrlC and ctrlV on Windows and Linux.

Copy & Paste layers (with their animations)

It is also now possible to copy and paste layers: the duplicated layer will come with all its animations. This is super helful when you have similar elements in your creations: you can design the animation once on the first object, and then make copies to speed up your workflow.

Other improvements and fixes

  • Added new examples to the gallery
  • It is now possible to move a multi-selection of layers with the keyboard arrows

Example gallery

We are really excited to release the gallery of examples. In this gallery, you can click on any example to explore how it was done, and duplicate the file to remix it.

This is the first step towards our vision of:

  • Enabling users to build on top of each other's work,
  • Enabling users to learn motion design through the tool.

We can't wait to add more examples to the gallery, and see what you create. Happy remixing!

Other improvements and fixes

  • Improved the navigation between the app sections
  • Enable to remix projects
  • The file list is now accessible at the jitter.video/files URL
  • Stop playback when leaving the editor
  • Decreased timeline grid to 10ms for more precision
  • Updated the interface of the Move action with handles
  • Fixed multiple display bugs (multi-selection, Move action…)
  • Cancel native trackpad gestures on the editor
  • Fix “pinch to zoom out” behavior on Safari
  • Stop auto-creating a file when the file list is empty

Improvements and fixes

This release is mostly about consolidating what we shipped in the previous weeks.

  • Improved the graphical editing of Move action
  • Added an arrow head to represent the direction of the Move actions
  • Display the size and angle information near the mouse cursor when editing graphically
  • Improve responsiveness when dragging the time cursor in the timeline
  • Fixed a bug on the Resize action, where the object would sometimes jump
  • Shortened the export page URLs

Ellipse & Arc Tool

We just added the ellipse shape. It is great for making perfect circles, but we also added a few extra cursors you can play with:

  • Donut: this creates a hole in the ellipse, with a number between 0% (no hole) and 100% (as big as the ellipse)
  • Sweep: this creates a pie, with a number between 0% and 100%
  • Start angle: this represents the angle where the pie starts

These 3 parameters can be combined together – and of course, you can animate them with the Arc action.

Resize animation

It is now possible to resize any shape during the animation. This is particularly useful for rectangles or media containers. For example, you can design a nice intro animation by making a rectangle grow until it takes up all the surface of the scene.

The Resize action lets you choose an anchor point: this is the point that remains in the same place while the object is resizing. For instance, if you make a rectangle grow from a width of 100px to a width of 200px, you can choose the anchor point:

  • On the left edge: the rectangle will expand by pushing its right edge further right,
  • On the right edge: the rectangle will expand by pushing its left edge further left,
  • In the center: the rectangle will expand by pushing both edges equally.

Other improvements and fixes

  • Added sections labels to the Animation menu, and reordered the actions
  • Display the Text Content section in Animate mode when a text is selected
  • Fixed the input fields of the Text effect inspector
  • Removed the From / To toggle of the Text effect inspector
  • Removed the Scale property from the Design inspector for all objects
  • The width and height of the Star shape can now be different
  • Restored graphical editing of actions
  • Improved the ghost display when the object does not change position
  • Allow to resize the timeline vertically
  • Added 50ms steps on the timeline
  • Added autoplay when switching the From / To modes
  • Keep the UI hidden for 500ms at the end of an auto-preview

Animate & Design modes

We introduce a toggle in the top bar that allows you to switch easily between a mode when you can design your objects, and a mode where you can animate them.

In Design mode, you can focus on the design of your objects before any animation is applied to it. We display the design inspector with all the object properties.

In Animate mode, you can focus on adding animations to your objects, and customize them in the inspector.

Other improvements and fixes

  • When an action is selected, adding a new action now uses the same timing parameters as the selected action
  • Clicking on the timeline now unselects any selected action, but keeps the focus on the selected object
  • Actions now preview automatically when updating the easing function
  • Removed the Scale property from the design inspector
  • Converted Scale values to percents
  • Input fields now display units even when they are being edited
  • Input fields now support optional min and max thresholds when editing the value with keyboard arrows
  • Action input fields now support an optional “ - ” value to indicate the property is not animated
  • When an input field is in focus, hitting the space bar now previews the animation
  • Added an icon to represent the artboard
  • Improved the default values when adding a new action
  • Improved display performance for invisible shadows
  • Fixed the display of the Animation menu that could sometimes be partially off-screen
  • experimental Resize action

Animate elements into view

All the actions (Move, Scale, Rotate…) now support two modes:

  • The To → mode: the action starts from the current state of the object and brings it to a new value,
  • The → From mode: the action brings the object into its current state.

The → From mode is particularly useful to make objects appear into the scene. Before that, you had to add an action, update the design to reflect the initial state of the object, and go back to the action to make sure it transformed the object into its main state. Now, you can simply add an action to the object and toggle the → From mode.

Other improvements and fixes

  • Fixed a bug that could cause the hover box to remain displayed after the mouse left
  • Fixed the highlight of actions applied on the same layer
  • Simplified the inspector of actions that handle multiple properties

Improvements and fixes

This release is mostly about consolidating what we shipped in the previous weeks.

  • Improved the way fonts, images and videos are uploaded to the server
  • Improved the file duplication process
  • Improved the file synchronization process
  • Fixed a bug that could make the application crash on a page reload

Project sharing

It is now possible to share a project with the URL. For the user who opens the URL, it will create a copy of the project in her own library. The original project and the duplicated one will keep living their separate lives in each other's browsers.

This is a first important step towards our vision of a fully collaborative experience. This milestones makes it possible for experienced designers to share their projects on the Internet, and for more novice users to duplicate these projects and learn from their peers.

Other improvements and fixes

  • experimental Trigger animations in cascade with a fixed offset between them

Grouping layers

It is now possible to create groups of layers:

  • When multiple layers are selected, press G when multiple layers are selected to group them (use ctrlG on Windows / Linux)
  • When a group is selected, press G to ungroup (or ctrlG on Windows / Linux)

Groups work very much like layers: in particular, you can move, resize, scale and rotate them. Please note that resizing a group will not resize its content – they works very much like frames in Figma.

But the best part of it is that you can also add animations to the group itself! This is really powerful: you can for instance animate 2 objects, group them, and add another animation to the group itself.

Other improvements and fixes

  • It is now possible to reorder multiple animations in the timeline at once
  • It is now possible to reorder multiple layers at once
  • Improved the selection of animations in the timeline on a mouse click
  • Improved the time cursor behavior when clicking in the timeline
  • Fixed a bug that would not display the handles of a rotated object
  • Fixed a bug on the Move animation that would conflict with overlapping animations
  • Fixed a bug that would display the snap lines of an artboard incorrectly after the artboard was moved
  • Fixed a bug that would display the snap lines of a ghost incorrectly after the artboard was moved
  • Fixed a bug on the Undo / Redo commands

Proof-of-concept: Masks

We are really excited to share some work-in-progress about masking. This will be really powerful: you can mask a group of animated layers with any animated mask. We have a working prototype of this, and we can't wait to share it publicly with you!

Other improvements and fixes

  • Improved the behavior of clicks on the timeline
  • Animations now keep the same order in the timeline when grouping / ungrouping them
  • Layers now keep the same order in the timeline when grouping / ungrouping them
  • Fixed a bug that would cause a conflict between a Move and other overlapping animations

Snapping layers

When you move a layer on the canvas, we now automatically snap it to the other layers of the artboard. We use a few useful anchor points: the corners, and the center of the layers.

This also works with animation ghosts. For instance, if you add a Move animation to a layer, you can snap the final position of the layer to its initial position.

Text box auto resize

You can now choose how the text box behaves:

  • Auto-width: the box always fits the content, and grows / shrinks with it
  • Auto-height: the box has a fixed width, and the height grows / shrinks to fit the content
  • Fixed size: the box size is fixed, and does not adapt to the text

In the inspector, these options are available in the Auto resize field of the Text section.

Other improvements and fixes

  • Fixed a bug that would prevent to move layers with keyboard arrows

Rename and duplicate files

Good news for users who need to reuse the same template multiple times: it is now possible to duplicate a file. And to make sure you don't get lost with all your files, you can also rename them.

Other improvements and fixes

  • Improved the time cursor and playback behavior
  • It is now possible to rotate an object by more than 360°, to spin several times

Create & edit animations graphically

We simplified the creation of an animation. After you add a Move, Rotate or Scale animation, you can manipulate your object directly on the canvas, and it will create the corresponding animations automatically.

Additionally, it is now possible to edit the Rotate and Scale animations graphically: after you create these animations, you can grab the handles of the object and edit the rotation angle or scale factor directly on the canvas.

Other improvements and fixes

  • It is now possible to select multiple layers by holding
  • We display the multiple states of an animated object with semi-transparent copies (“ghosts”)
20200911-custom-fonts

Use your own fonts

You can now use your own fonts for your animations! To do so, we added an “Upload your font” option at the top of the font list menu: it triggers a panel where you can drag and drop your font file (or use the system file browser).

We currently support the following file types:

  • TrueType (*.ttf)
  • OpenType (*.otf)

💡 Note: at the moment, it is not possible to delete a custom font.

Other improvements and fixes

  • Added the possibility to edit the duration and easing of multiple animations at once
  • Improved the visibility of the 📣 Feedback button
20200904-animation-presets

Animation presets

It is now possible to add complex animations in 1 click. We added 6 presets to make elements appear and disappear easily. It is also possible to customize parameters of the presets, like the direction of a translation, or the easing function of the animation.

Group animations in the timeline

As projects are getting bigger, the timeline can become more complex to read. We just added the possibility to tidy up the timeline by grouping animations together: when multiple animations are selected, hitting G folds them under a group. You can ungroup the animations by hitting G.

Groups work like you expect: moving a group in the timeline moves all the enclosed animations by the same offset; and stretching a group's duration stretches the enclosed animations proportionally.

20200828-timeline-multiselect

Select multiple animations in the timeline

It is now possible to select multiple animations in the timeline by holding and clicking on the desired animations. Once multiple segments are selected, you can move and resize them all together.

Other improvements and fixes

  • Resizing animations in the timeline now rounds the values to the nearest millisecond
  • Added a “Feedback” button in the interface
  • Improved the Intercom prompt to start a conversation

Magic Motion proof-of-concept

This week, we worked on ways to simplify the creation of an animation. What if we could design the initial and final states of an element, and let the app magically create an animation between those 2 states? This is what we are testing at the moment: reach out to us if you want to give it a try!

Other improvements and fixes

  • The labels in the Text Effect inspector are more explicit
  • Fixed a bug that would prevent to drag Text Effect animation in the timeline

Checkout process

This week we release an important feature for the future developments of our product: we introduce a checkout process to export the GIFs and videos. We want to move fast towards the best possible product, and we think this is what will help us the most for that goal. In particular, having paying users:

  • sets high expectations about what we deliver, and holds us accountable
  • provides high quality feedback, and helps us focus on the most pressing problems
  • provides a great measurement of the value we provide

Intercom

We want to keep a constant bond with our users to make sure we focus on the right things, so we just added Intercom to our website. Please reach out to us anytime, whether you have a question, a comment or just want to say hi: we are always really, really happy to talk to you! 🙂

Other improvements and fixes

  • We now communicate on our progress with a public changelog – there you are!
  • Users can now access their “My Account” page
  • Fixed a bug that would make possible to edit an animation without seeing the result in the canvas
20200807-ui-revamp

UI revamp

The interface just got a big upgrade: it is cleaner, more lightweight, and more understandable. The color code of the layers is blue, the color code of the animations is red: it is now easier to understand if you are editing the layer or the animation.

Other improvements and fixes

  • All operations now have a From / To toggle
  • The timeline now indicates what to do to add the first animation
  • Reordered and improved the Text Effect inspector sections
  • For text effects, you can now split texts in letters
  • You can now resize a text effect segment in the timeline
  • You can now select an operation segment by clicking anywhere on the timeline
  • Operation segments now display handles on hover
  • Removed the size in the Artboard preset selector
  • Improved the separation of the timeline and the canvas

Text Effect easing

Text effects now support easing functions. You can select a prebuilt effect (for instance “Slide and Fade”) and decide how the word (or line) comes in. For instance, you can select “Slow down” for a classic look, or “Elastic” for a more playful ambience.

Other improvements and fixes

  • Shadow animations and Star animation inspectors now have a From / To toggle
  • Texts now support shadows
  • You can now animate the text color
  • You can now animate the text shadow
  • experimental Add Timeline empty state
  • experimental Add Animate / Design tabs to the inspector

Star shape

We added the Star object, with 2 specific controls to help you shape it exactly like you want: number of spikes, and thickness. For instance, you can set the thickness to 38.2% to get a straight star, or to 50% if you want to get a more friendly star.

Star animation

Like any other object, you can animate all of the star's basic properties. But we also made it easy to animate the star's specific properties (number of spikes, thickness). Animating the thickness property is particularly useful if you want to make a cool apparition effect.

Other improvements and fixes

  • The Animation menu is now more consistent across all objects
  • We added the corner radius property to Rectangles, Images and Videos
  • You can now animate the corner radius
  • Shadow animations now have better default values
20200717-file-library

File library

This week, we introduce the possibility to save your files and come back to them later. The home screen now lists all your files. You can create a new file with the “New file” button, and delete old ones with the Trash icon.

Shadow support

All shapes, images and videos now support shadows. Like in traditional design tools, you can express a shadow with a color, an opacity, a blur radius, and a position offset.

Color & Shadow animation

It is now possible to animate the shadow of an object, as well as its color. All the properties of the shadow are grouped under the same animation, because it is more common to animate them synchronously. If you need to desynchronize shadow properties, you can simply add two Shadow animations and set custom parameters for each of them.

Other improvements and fixes

  • Buttons to add images & videos are now merged into a single “Add media” icon
20200710-text-inspector

Undo / Redo

We're excited to add a much requested feature: you can now undo / redo all your actions with Z and Z (ctrl Z and ctrl Z on Windows & Linux). This is definitely a big improvement for productivity and creativity, as it lets you be in the flow without the fear of making mistakes.

Font styles & line height

Text just got a big upgrade with the support of all the font styles proposed by Google Fonts (font weight and italics). We also added a control for the line height: using a small line height is particularly useful to make bold statements with fonts fonts like Montserrat 900, Oswald, or Fjalla One (in all caps).

Move objects along guides, resize from center

We added 2 other much requested features: you can now move an object along horizontal or vertical guides by holding while dragging, and resize an object from its center by holding while resizing (alt on Windows and Linux).

Other improvements and fixes

  • We replaced the ⚡️ icon by a ⚡️ Animate button on the canvas
  • The timeline now scrolls automatically to the selected operation
  • Fixed a bug that would make the export crash in some cases
  • Fixed an issue that would not display alignment guides in some cases
  • Fixed a display bug in the text effect inspector
20200703-opacity-inspector

More control over the animations

The 4 basic animations (move, rotate, scale, opacity) just got an upgrade: you can now control all the parameters, including the start value, from their inspector. Being able to customize the animation from the same place makes it much easier to create what you want in a shorter amount of time.

Other improvements and fixes

  • The Rotate animation now supports negative angle values
  • The Animation menu now has icons to illustrate the animations
  • We updated the UI of the inspector
  • We simplified the animation inspector a lot, removing options that were too complicated or not ready yet (enforce initial value, build in / build out toggle)
  • We temporarily removed the presets as they made the interface more cluttered
  • Fixed a bug about video upload

Video support

We now support video as a media. Just like images, you can import a video in your project and animate its basic properties. We currently support the MP4 format, and videos under 100MB.

Other improvements and fixes

  • We added some animation presets to simplify the creation of classic animations
  • Animation parameters are now expressed in terms of absolute values (instead of relative)
  • We now use the original file name to identify an image in the layer list
  • Selecting an element in the layer list now highlights its animations in the timeline, and vice versa
  • The timeline height is now capped to leave more space for the canvas
  • You can now reorder animations in the timeline
  • New animations are now added at the bottom of the timeline
  • The UI elements displayed on the canvas are now hidden while playing an animation
  • Fixed a bug about the selection box that would not fit the object
  • Fixed a bug about resizing objects with a Move animation