Mask animations in Lottie

Our Lottie exporter just got a significant update, as it now supports all of our mask animations!

The Lottie format does not natively support some specifics of our mask animations, which meant we had to replace all our mask animation presets with a simple fade.

We've now done the hard work to ensure all our mask effects are fully supported when exported in Lottie.

We can’t wait to see all these new effects on your websites and apps!

Multi-select files

You can now perform batch actions on multiple files!

To select multiple files, go to your file list and:

  1. Press
  2. Click on each file you want to select

Afterwards, use the toolbar at the bottom of the screen to perform one of the following actions:

  • Move to folder to move selected files to a chosen folder
  • Duplicate to create copies of selected files in the same location
  • Delete to move selected files to Trash

You can also press A (or ctrl A on Windows) to select all files in a folder. And to deselect all files, press esc or click anywhere outside of a file thumbnail.

Gradient shortcuts

We just improved the way you can edit gradients with new options. First, we added a toolbar with 3 buttons:

  • Rotate. Make the gradient switch between the horizontal, diagonal, and vertical positions clockwise
  • Flip. Swap the colors of the gradient along its axis for a mirror effect
  • Space evenly. Make the color stops of the gradient evenly spaced

We also added a power move: hold (alt on Windows) to edit the end points of your gradient symmetrically. Instead of having to move the end points separately, you can now edit your gradients in one move!

Other improvements

  • A or ctrl A to select all your layers, or all your animations at once.
  • You can now create a group from just one selected layer (where previously a minimum of two layers was required).

File sharing

Collaboration in Jitter just got even easier: you can now share your files with anyone, anywhere!

Click the Share button at the top right of the Editor to quickly generate a shareable URL for your file: this link grants immediate, view-only access to your work.

Collaborators can now view your files even if they don't have a Jitter account, making it easier for them to see your creations and provide feedback.

And rest assured, your original work stays safe since the access is view-only for anyone outside your team.

Boomerang export

Right back at ya! Make your GIFs more fun with a boomerang effect. 🪃

You now have 3 types of GIF effects to choose from at the export:

  • Loop: will repeat your animation infinitely.
  • No loop: will play your animation once.
  • 🆕 Boomerang: will create an infinite loop of your animation playing forward and backward.

You can apply the Boomerang effect from the settings of the export page, and it is available for GIFs only.

Gradients

You can now create and edit gradients directly in Jitter!

We support two types of gradients:

  • Linear: This is a progressive transition between two or more colors along a straight line.
  • Radial: This is a circular gradient with a color stop at the center that transitions to other colors towards the edge.

You can apply these gradients to the scene and all native shapes, including rectangles, ellipses, and stars. Support for gradients on text layers will be available in a future update.

This update comes with a fully redesigned color picker:

  • To add a color stop to the gradient, click on the gradient slider in the picker
  • To remove a color stop, right-click on the stop and select “Delete” from the context menu

These interactions also work directly on the canvas.

Our Figma plugin has also been updated: now, the gradients in your Figma file are imported natively, and you can edit them in Jitter.

Jitter Community is live

We’re launching a new Discord server to bring our community together in one central location.

Join us to showcase your amazing animations, meet talented designers, and discover exclusive Community templates We can’t wait to see all your creations and ideas!

Join us 👉 https://discord.gg/FhZEmxZJ6e

Folders for teams

We've revamped the My Files page to let you create folders in your team workspaces! This makes it much easier to manage your files and to keep your workspaces neat and tidy.

To create a new folder in a team, you can head to your file list and:

  1. Locate the Team to which you want to add your folder, in the side bar on the left
  2. Click on the “New folder” button
  3. Give it a name and validate

To move a file in a folder, you can:

  1. Right-click on the file
  2. Select the “Move to…” option
  3. Select the new folder

Folders start rolling out for teams on a Team plan only.

Onboarding: invite teammates

Jitter is the first fully collaborative motion design tool, and team workspaces play a central part in it.

To improve the onboarding experience, we added a screen that lets new users invite their teammates.

This will automatically create a Jitter team, and ask your collaborators if they want to join.

The teams can always be joined, left or edited afterward as well.

Distance snapping

We just improved how you can position layers on the canvas: you can now easily space out layers with equal distance between them, with improved snapping!

When moving an item and the distance to its siblings matches, Jitter will display a guide between these items with a measurement of the gap between them.

Same-distance snapping between layers works with any kind of item:

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

New onboarding flow

We know the first impression is important, so we just made major improvements to the sign-up and first-time user experience: everyone in your team will now get a step-by-step introduction to Jitter, and get some insights on how to get setup their workspace effectively.

If you are an existing user, you can initiate this first-time introduction by typing jitter.video/onboarding in your address bar.

Other improvements

  • Fixed an issue that could prevent thumbnail updates to be displayed.
  • Fixed an issue that could crash the editor when editing a text layer.
  • Fixed an issue where the focus of a text layer could be lost when editing it.

Text animations in Lottie

We are releasing a major improvement to our Lottie exporter, as it now supports all our text animations!

The Lottie format does not support text animations natively: until now, we had to replace all the text animation presets by a simple fade when exported to Lottie.

But we did all the heavy lifting, and we're super excited to announce that all our text effects are now fully supported when exported in Lottie. ✨

We are sure this will bring app and website animations to the next level, and we can't wait to see what you create with it!

Keyboard shortcuts

You can now find shortcuts to speed up your workflow in most parts of the Editor, and we've added shortcut hints in all the dropdown menus. In case you need to find all of them, here they are:

General

  • C or ctrl C → Copy
  • X or ctrl X → Cut
  • V or ctrl V → Paste
  • delete or → Delete
  • Z or ctrl Z → Undo
  • Z or ctrl Z → Redo

Tools

  • R → Rectangle tool
  • O → Ellipse tool
  • T → Text tool

View

  • + or = → Zoom in
  • - → Zoom out
  • 1 or ) → Zoom to 100%
  • H or middle click → Pan

Timeline

  • space → Play / Pause
  • → Move animation by ±10ms
  • + → Move animation by ±100ms
  • , and . → Move time cursor by ±10ms
  • + , and . → Move time cursor by ±100ms
  • + , and . → Move time cursor to the previous or next animation
  • + , and . → Move to the beginning or end of the scene

Layers

  • → Move element by 1px
  • + → Move element by 10px
  • G or ctrl G → Group
  • G or ctrl G → Ungroup
  • M → Create mask

Other improvements

  • Unified dropdown menus behavior across the file list and the Editor.
  • Fixed a drag-and-drop bug that could corrupt a file.
  • Fixed a crash that could happen when editing a text.
  • Fixed a layout bug on the export page.

Custom easings

We are really excited to give more control over the easing curves, to help you craft your animations the way you want.

The easing determines the acceleration of the transition between the beginning and the end of an animation. It helps communicate movement and emotion, and makes your animation more natural or expressive. It is a core part of your brand identity, so it is important to give as much control as possible over it.

In this update, we introduce the easing intensity. This is a simple yet efficient way to control how the animation will look like:

  • At lower intensities, the easing will feel smoother and softer,
  • At higher intensities, the easing will feel steeper and stronger.

We did all the hard work to provide you with the best-looking easing curves, so that you can focus on the expressivity of your motion.

We also added more easing presets, and they all come with their intensity sliders:

Smooth

This is the default easing preset. It starts the animation slowly, accelerates in the middle, and makes the object land in its final position smoothly. This is how objects usually behave in the physical world: when in doubt, this is the preset you should use.

Natural

This preset is a variation of the Smooth easing preset. Similarly, it starts and ends the animation slowly, in a symmetrical manner. This is a perfect preset for objects that stay on screen.

Slow down

This preset makes the animation start fast, and slow down as it reaches the end of the transition. It works well for making objects appear into view.

Accelerate

This preset is the opposite of the Slow down easing preset. It makes the object start slowly, and accelerate as it reaches the end of its transition. It works well for transitioning objects out of view.

Elastic

This easing preset adds a dynamic and bouncy effect to transitions, mimicking the behavior of a physical spring being stretched and released. It makes the transitions look playful and natural. It is widely used in iOS interface design, and to put emphasis on your content.

Bounce

This easing preset mimics what happens when you drop something on the floor. It will first accelerate downwards, and then bounce back up after hitting the floor. It is a playful preset to make object appear with emphasis.

Overshoot

This preset is similar to the Slow down easing preset, but it starts faster and makes the animation go beyond the target value, before smoothly getting back to the end position. Similarly, it works well to make objects appear into view.

Impulse

Before starting the action, the object will move in the opposite direction. This is a technique commonly used in motion design to prepare the audience that something is about to happen, and reinforce the main motion. Much like the Accelerate easing preset, this preset works well to make objects transition out of view.

Swing

This preset is another very natural way of moving objects in your scene. It starts with an anticipation movement (like the Impulse easing preset), accelerates in the middle, and goes past the end position before slowing coming back (like the Overshoot preset).

None

When no easing is applied, the transition happens at a constant speed. This is often the way to go for opacity and color transitions. However, this is generally not recommended for other types of animations, as it makes the object look unnatural or robotic. It can work in some cases though – for instance when you want to add a perpetual motion to your scene. Think of a spinning object, or a scrolling banner.

We are really excited about these new customization capabilities, and can't wait to see how it will help you elevate your brand.

Other improvements

  • Reorganised the templates.
  • Improved quality of the .webm exports.
  • Improved the flow to create and delete a team.
  • Improved the styling of the side panel.
  • Fixed a bug preventing the change of FPS in an APNG export.
  • Fixed a bug where editing multiple Move actions in multiplayer would not work properly.
  • Fixed a bug where some fields of the inspector would take focus inappropriately.
  • Fixed a display issue in the pricing FAQ.
  • Fixed a bug that would export GIFs with another frame rate as the one selected.

Performance improvements

This release introduces several improvements in our renderer, that will make your editing experience smoother. This includes working with masks and other advance design and animation features, especially in large projects. Enjoy an even faster editing experience!

Other improvements

  • Added onboarding modal to help first-time users get started.
  • Improved styling of the onboarding modal.
  • Improved color precision in Lottie exports.
  • Improved the snapping rules when moving group children in the editor.
  • Restored the option to use a full-resolution image in the editor.
  • Fixed an issue where renaming a layer with a double-click would not work.
  • Fixed an issue where text layers could blink when entering the “edit” mode.

Live avatars

We are improving our collaboration capabilities to make people feel like they are in the same room: whenever you open a file, we now add your avatar to the toolbar. This allows everyone to see who is currently accessing the file. And if you hover over a person's avatar, you will see their name so that you know exactly who else on your team is collaborating with you!

Other improvements

  • The export menu is now compatible with keyboard navigation and typeahead.
  • Improved the display of the default profile pictures in the side bar.
  • Improved the descriptions in all the sections in the Settings to make them easier to understand.
  • Updated the color of the default profile pictures.
  • Unified styling of the text in all the Settings pages.
  • We now display the Team picture on the screen to accept the invitation to join a team.
  • Improved the role picker in the team member settings.
  • Improved keyboard shortcuts when editing a text.
  • We now handle special line break characters properly.
  • After ungrouping a selection, all the children elements remain selected.

Search fonts

We've updated the font picker to let you find your favorite fonts more easily. You can now use the search field at the top of the menu to search the font list by name.

The font menu is also now fully compatible with keyboard navigation, with:

  • The arrow keys and to navigate between fonts
  • The Escape key esc to close the menu
  • The Enter key to select the font that is currently highlighted

Other improvements

  • Increased the maximum export size available, up to 5760x1080.
  • Improved the automatic selection between transparent and non transparent export profiles.
  • Improved the fonts antialiasing in the Editor canvas.
  • Improved the crispiness of the Editor canvas when zooming in.
  • Improved the drawing performance of the Editor canvas for large artboards.
  • Improved the display of stroked ellipses in the Editor canvas.
  • Restored the display of color animations targeting the artboard in the Editor timeline.
  • Fixed an issue that could crash the app when a text layer using multiple fonts was edited.
  • Fixed an issue that could crash the app when a complex selection was duplicated.
  • Fixed an issue leading to the immediate close of the animation menu when opening it.

New animated device templates

This week, we are introducing 20+ new templates to help you showcase your design work in a more engaging way. Use these animated device mockups to create a showreel, showcase your designs on Dribbble, share your work in a presentation, or anything else you can think of!

These templates cover the most common devices you design for - smartphones, tablets, and computers, - and include a wide range of animations, such as screen transitions and scrolling effects.

The best part? You can mix and match several templates by simply copying and pasting the scenes you’d like to use in your file.

To access the new animated device templates in Jitter, simply navigate to the Templates section, click on the Devices category, and select the desired template that best suits your project's needs.

We hope these new additions can enhance your design presentations and provide you with exciting ways to showcase your work to clients and stakeholders.

Other improvements

  • Improved the loading performance of the Editor.
  • Fixed an issue preventing the edition of multiple layers at once.
  • Fixed an issue with useless alignment anchors being displayed when moving a group of layers.
  • Fixed an issue with non matching colors being exported in Lottie.

Keyboard navigation: dropdown menu

We added keyboard navigation to all the dropdown menus in the Editor and in other places of the Jitter app. This makes the app faster and easier to use for people who feel more productive using their keyboards.

You can now navigate the menus using:

  • The arrow keys and to navigate between items
  • The Escape key esc to close the menu
  • The Enter key to select the item that is currently highlighted

We even added support for typeahead: once a dropdown menu is opened, you can start typing a word (for instance “Copy” or “Duplicate”), and this will automatically highlight the closest-matching item in the menu.

We improved two types of dropdown menus:

  • Contextual menus, also known as "right click" or "pop up" menus, which provide quick access to options when you interact with Jitter
  • Select menus, that allow users to choose between multiple options in a field of the property panel (e.g. the menu to select fonts)

Export in 4K

You can now export your animations in 4K. This option is now available in the Export menu in the Editor, and on the Export page. It is compatible both for landscape and portrait formats. Your videos now look sharper and more detailed, allowing you to showcase your work in the highest quality possible.

Other improvements

  • Added a context menu on the side bar's team items to access settings and add members more easily.
  • Fixed an issue that could happen when deleting a layer being dragged by someone else.
  • Fixed a bitrate issue with transparent webm exports.
  • Fixed an issue with Chrome 114 preventing our GIF exporter to work properly.

Jitter for Teams

Introducing Jitter for Teams! You and your teammates can now collaborate seamlessly on your designs and animations. Jitter for Teams solves some of the biggest problems that designers, design teams, and stakeholders (like clients, marketers, and developers) face in the creation process.

Here are the main benefits:

  • Designers can co-create in real-time and iterate rapidly on the same files with their peers, in real-time
  • Everyone is now on the same page and teams get aligned faster (no more file version problems)
  • Review processes are 10x easier (no more exporting videos, sending them over Slack or email, and waiting for feedback), and designers get their work approved faster
  • Designers can hand off their work to marketers (who can iterate on the content) and developers (who can inspect animations) so that everyone focuses on what they do best

This will transform the way design teams and stakeholders create content – here are all the features that come with it:

Shared workspace

You and your team can now have all your files in the same workspace. And you always get the latest version: no more tedious file sharing, endless back-and-forth exchanges, or final_final_v2 versions. Everything is always in sync, and you are all on the same page.

Real-time collaboration

You can now edit your designs and animations together, in real-time:

  • Avatar stack → Whenever you open a file, we add your avatar to the toolbar at the top of the Editor, and you'll see everyone else that is currently editing the file.
  • Live cursors → If your teammates are editing the same file, you'll see their cursors move in real-time on the canvas.
  • Live selection → And whenever they select an object on the canvas or an animation in the timeline, you'll also see their selection in real-time.

And that's not all! Everything works seamlessly even if you don't have an internet connection: when you reconnect, we'll just sync your changes in your files.

Unlimited teams and collaborators

You can now create your team from the side bar in the File list. Just enter a name, invite your teammates with their emails, and you're ready to go! It's as simple as that.

Admin tools

You can now manage all your team in the same place: see who is on your team, add and remove members, change their permissions… You can do all of this from the new Team Settings page.

Centralized billing

When you upgrade your team to the Team plan, you now benefit from a centralized billing for all your team members. Enter your payment and billing info once, and we'll manage the rest for you.

And getting started with Jitter for Teams is easy:

  1. Create a team from the Files page
  2. Invite your teammates via email
  3. Collaborate!

This is a huge milestone for Jitter, and one big step towards making motion design accessible to anyone. We can't wait to see how these new collaboration features improve your workflows and unleash your creativity as a team.

Time to create together! ✨

Other improvements

  • Fixed a selection issue when double clicking on a text layer.
  • Fixed keyboard cut shortcuts not working in text layers.
  • Fixed move animation handles not working with text layers.
  • Greatly improved ProRes4444 export speed.

Improved GIF export

Improved GIF export

This update brings a significant improvement to the GIF exporting process, resulting in faster exports and significantly smaller file sizes.

On average, GIFs now export 2x faster on average (and up to 3x faster in some cases), allowing you to create and share your work in record time, even for complex and lengthy animations.

The new GIF exporter also significantly reduces the file size of exported GIFs: on average, the file sizes are now 2x smaller, making it easier to share your creations across various platforms. The exporter even achieves file size reductions of up to ten times for certain GIFs, optimizing storage and bandwidth usage without compromising on visual quality.

With these enhancements, Jitter ensures that your GIF creation process is more efficient, allowing you to produce stunning animations with less time and effort. If you are using GIFs in your email campaigns, these gains are absolute game-changers.

Other improvements

  • Fixed an issue that made some Lottie exports appear off-center.

Timeline selection rectangle

Timeline selection rectangle

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

To select multiple animations with the selection rectangle, you can click on the timeline and drag your mouse. All the animations 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 an issue that could prevent a GIF export to succeed.
  • Improved the loading experience while the GIF export is starting.
  • Improved the rendering of SVG in some configurations of the Lottie export.
  • Renaming a file in the editor is not in the Undo/Redo history anymore.
  • Improved the layout of the templates page.

Template categories

We are excited to announce the latest update to Jitter's template library: template categories!

With a growing number of templates available, it can be overwhelming to find the perfect one for your project. That's why we are now organizing our templates into categories. This makes it easier for you to find exactly what you're looking for.

Whether you're designing interfaces, apps, websites, or creating content for social media, videos, advertising, or something else entirely, our template categories will help you quickly narrow down your options and find the perfect starting point.

We hope this new feature will enhance your experience and make it even simpler to create outstanding content with Jitter.

Copy and paste from Figma

We are thrilled to announce the latest version of our Figma plugin.

Previously, exporting a Figma frame to Jitter was a simple one-click process, but it did have its limitations. You could only import top-level frames (and not individual layers), which made the workflow less efficient. Moreover, if you re-exported the same frame to an existing Jitter project and the layer hierarchy had changed, you could lose some of your animations without any way of retrieving them.

Today, we are introducing a new version of our Figma plugin that makes the import process much more efficient and secure.

Here's how it works:

  1. Open the plugin in Figma and select the frame you wish to import.
  2. Click on the plugin button to copy the frame.
  3. Go to your Jitter file and paste the element using V – on Windows, use ctrl V.

Pro tip: If you made changes in your Figma file and want to sync them in Jitter, use the Paste and replace feature by pressing V – on Windows, use shift ctrl V. This feature will preserve your animations in the timeline, provided that the hierarchy of your animated layers hasn't changed.

This new plugin is much more flexible and is designed to support exciting future updates. You can install the new plugin from Figma Community, and we can’t wait to see how it speeds up your workflow!

Other improvements

  • Allowed the editing of multiple operations simultaneously in the right side inspector.
  • Fixed an issue that could prevent a file rename from being saved.
  • Fixed an issue where a preset converted into operations had the wrong duration.

Timeline keyboard navigation

This week, we are introducing new ways to navigate in the timeline with your keyboard. Previously, you could only move the time cursor by using your mouse. And in some cases, this could lack precision.

Starting today, here are the shortcuts you can use to move the time cursor with your keyboard:

  • , and . to move by ±10ms
  • , and . to move by ±100ms
  • , and . to move to the previous or next animation
  • , and . to move to the beginning or end of the scene

These shortcuts not only make Jitter more accessible, but they also make it much easier to place the time cursor exactly where you need to.

Pro tip: on QWERTY keyboards, you can replace , and . by the < and > keys, making this shortcut even easier to remember.

Other improvements

  • You can now upload and update your profile picture in the Settings
  • You can now update your name in the Settings
  • Improved the animations of the information toasts in the Editor
  • Improved the way we load assets while opening a Jitter file – the Editor now launches faster

New templates

We are excited to announce the addition of new templates to our gallery! This week, we are introducing a variety of professionally designed templates that you can use as examples to start from. You'll find new templates in 3 main categories:

  • Animated stories – for Instagram and other social media,
  • Animated UI elements,
  • Templates to showcase your work in mobile device frames – for instance for Dribbble shots.

Templates can help you create faster by providing a starting point for your designs. Rather than creating a design from scratch, you can use one of our pre-designed templates as a foundation and customize it to fit your needs. This saves time and effort while still allowing you to create unique and effective designs. Additionally, templates can serve as inspiration if you struggle to come up with ideas or need help visualizing a concept.

We are continuously working on adding more relevant templates to the gallery, so please feel free to suggest new templates by reaching out to us!

Other improvements and fixes

  • Fixed an issue that could prevent assets and files from being uploaded correctly.
  • Restored the option to rename a file by clicking on its name from the editor.
  • Made the display and editing of large text layers smoother.
  • Allowed the editing of multiple layers simultaneously in the right side inspector.
  • Reduced the number of required clicks to select deep nested children within a group.
  • Added the option to replace a layer or operation when pasting, using V (ctrlshiftV on Windows).
  • Fixed an issue with mask groups that would change positions when adding or removing them from another group.
  • Allowed layers from different parents to be grouped together.

Select multiple objects

We just made it easier to select multiple layers at a time. In the Layer list on the left, you can now use the and the keys (ctrl on Windows) to select multiple layers more efficiently.

More specifically, if you want to select a range of layers, you can use the key:

  • Click on the first layer to select
  • Hold down the key
  • Click on the last layer of the range Jitter will select every layer between those two layers in the Layer list.

And if you want to select individual layers, you can use the key:

  • Click on the first layer to select
  • Hold down the key (or ctrl on Windows)
  • Click on any other layer you want to select

Selecting multiple layers is particularly handy when you want to:

  • Update a property across multiple layers at the same time
  • Move multiple objects at the same time
  • Create a group or a masked group from the selection

This productivity improvement also works in the timeline: you can select a range of animations by holding , and add individual animations to the selection by holding (or ctrl on Windows).

Note: while it is possible to select multiple objects that don't have the same level of hierarchy, it is not possible to have a parent group and its children in the same selection.

Other improvements and fixes

  • Improved the insertion order of duplicated layers
  • Restored the display of the artboard name on the canvas
  • Restored the correct behavior of the “Use full resolution image” option for images
  • Fixed an issue that could cause imported images to be clipped
  • Fixed an issue with extremely large ratio images that could cause the Editor to crash
  • Fixed a video frame synchronization issue that could occur when exporting video media

Hover objects in the canvas and the layer list

In Jitter, every object in the canvas has a corresponding layer in the Layer list (side panel on the left). If you hover over a layer in the Layer list, we now display a box to highlight that layer's location in the canvas. Similarly, when you hover over an object in the canvas, we also highlight the corresponding layer in the Layer list. This makes it much faster to find the layers you're working on.

Other improvements

  • You can now directly paste layers inside a group, when the group is selected
  • It is now possible to ungroup multiple groups at once
  • Improved accuracy for the progress of Lottie exports (0% → 100%)
  • Improved export quality for images in high resolution
  • Improved the export process, which is now compatible with more hardware configurations
  • Fixed an issue on the sidebar scroll position on Account pages
  • Fixed an issue in the inspector of some text layer imported from Figma
  • Fixed an issue that caused the browser to crash when exporting large Lottie files
  • Fixed an issue that caused some exports to be stuck at 100%
  • Fixed an issue that could make the app crash when replacing an image with a GIF
  • Fixed an issue that could prevent the export of some SVGs

Export files in background tabs

You can now export your files in background tabs!

Previously, the Export tab had to remain visible during the export process. Otherwise, the export process would pause after a few seconds, and even completely stop after some time.

With this update, it is now possible to launch an export, and go back to what you were doing before. The file will keep exporting in the tab, even if it is not currently active.

This is a huge productivity improvement, as you can now:

  • keep using other tabs of your browser while your file is exporting,
  • and launch multiple exports in parallel – for instance if you want to export the same file in multiple formats (video, GIF, Lottie…) and sizes.

This improvement is available for all export formats (video, GIF, Lottie). And the best part of it: you can keep track of the export progress in the tab title. ⏳

Other improvements

  • Fixed a display issue with the custom fonts inspector.
  • Fixed an "asset missing" issue that could appear with some particular media files.
  • Fixed an issue preventing the export of some particular SVGs in Lottie.
  • Fixed an issue where the natural order of layers was lost when reordering layers in bulk in the layer list.

Lock and unlock layers

You can now lock layers to protect them from accidental edits, or to prevent them from being edited in the canvas.

To lock or unlock a layer, you can:

  1. Hover over the layer in the layer list on the left
  2. Click on the padlock icon that appears

When a layer is locked, you can still select it from the layer list on the left, and adjust its property from the inspector on the right.

If you lock a group, all its children will also be locked. It is not possible to unlock child layers without unlocking the enclosing group.

Other improvements

  • Fixed a crash occurring when exporting some particular emojis in Lottie.
  • Fixed an issue with the selection rectangle not working when perfectly aligned on the edge of a shape.
  • Fixed an issue with donuts shapes that in some cases appeared at a wrong position when exported in Lottie.

Animated file thumbnails

We are excited to launch a new file browser with the new Jitter: all your files are now displayed in a grid, with a thumbnail.

The thumbnail lets you preview the contents of your files at a glance. Better yet, you can hover a file thumbnail and preview the full animation.

This makes it much easier to find the file you are looking for.

Other improvements

  • Hovering a layer in the layer list highlights it in the canvas, and vice-versa
  • Fixed a bug with the processing of ligatures in some fonts
  • Fixed a bug when draging a group over itself in the layer list

Introducing the all-new Jitter

We are excited to announce our biggest update to Jitter yet, with an entirely new version of the tool.

Over the past year, Jitter became the fastest and simplest tool to create animated content & interfaces for individuals. This year, we want to make Jitter the best animation tool for professionals (designers, teams and businesses).

When we started Jitter, we had one mission in mind: make motion design accessible to anyone. This update is just the first step towards that mission. We bringing a complete UI overhaul to make to make Jitter look more professional yet playful, and tons of new features to make you more productive.

We can’t wait to see what you create with this new version!

New website, loader and story templates

This week, we are adding a bunch of new professionally designed templates to the example gallery. You'll find 3 main categories:

  • Animated landing pages
  • Animated loaders (UI elements)
  • Animated stories

We are continuously working on adding more relevant templates to the gallery: you can suggest new templates by reaching out to us!

Other improvements

  • Improved the mask animations for texts, that could sometimes truncate some characters
  • Fixed a bug that would offset the positions of layers when dragging multiple layers at once
  • Fixed a bug that could make the application crash on a mutli-select

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 <kbd>alt</kbd> 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