mamoworld - news (de)

Happy Birthday mamoworld!

admin — Mon, 17 Apr 2023 09:22:08 +0000

mamoworld has been around for over eleven years and we’ve experienced, programmed and worked on a lot of things. Thanks to you, we´ve grown into a large, experimental community and we look forward to many more years to come. Thank you for your support and for being with us!

Win a free license for you - and for a friend!

For our 11th birthday you´ve got the chance to win a free mamoworld product of your choice - and an additional one for a friend! To join the raffle, follow the instructions in the caption of our instagram post:

Win on Instagram

Sale

Our big birthday sale starts on April 24th.

BeatEdit for DaVinci Resolve

admin — Wed, 07 Dec 2022 16:38:56 +0000

The BeatEdit family has a new member: BeatEdit for DaVinci Resolve

Download BeatEdit for Resolve

Automation Blocks for Ae - Public Beta

admin — Wed, 01 Jun 2022 18:06:02 +0000

During the next two month everybody can use our new tool Automation Blocks for After Effects for free. Finally, automating and scripting in After Effects is not only accessible to programmers, but to any creative person.

Download Automation Blocks

Tags:

Automation Blocks

#MotionForPeace

admin — Mon, 28 Feb 2022 19:00:33 +0000

Dear Motion Design Community,

We are experts in communication - Today our voices are needed loud and clear: We stand against violence. We stand for peace for all people.

What can we do?

Create a video that raises awareness of the situation in Ukraine. Share it with the hashtag #MotionForPeace
Share and like #MotionForPeace videos

Let’s be as open and creative as possible, but here are some (optional) ideas for videos:

Keep it short and sweet
Loopable gifs often work well
Include a quote from an activist / politician
Express how you feel about this war
Encourage donations

Peace throughout the world is at risk. Let’s act together now!

an initiative by mamoworld and aescripts

Watch and Like #MotionForPeace Videos

Tags:

MotionForPeace

Mathias live at Creativity Hive - Ask Your Questions!

admin — Mon, 20 Sep 2021 12:22:39 +0000

This week Mathias is invited to the live show of Creativity Hive to talk about upcoming mamoworld tools but also his personal life behind the scenes of mamoworld. Join us and ask questions during the live show!

Date

Wednesday , September 22, 11:00am PDT

(no registration needed)

Watch the Recording

Tags:

live

interview

iExpressions 3.2.003 released!

admin — Tue, 02 Mar 2021 08:45:00 +0000

We just released iExpressions 3.2.003. The free update includes a great Auto-Resizing Background Shape iExpression and and improved version of the Mirror Shape iExpression which gives you better control over the mirror direction. The update also includes various bug fixes - in particular for the Spring iExpressions.

Auto Resizing Background Shapes

Mirror iExpression

Automatic Creation of Sliders

Many iExpressions have "connect" buttons that allow to connect a parameter of the iExpression to other properties in your After Effects project. With this update, whenever you click on a connect button, but have only a layer and no property selected, iExpressions asks if it should create a slider for you. This makes connecting to slider controls much more convenient, since you don't need to worry about creating the sliders yourself anymore.

Bug Fixes

The Spring iExpressions had some issues when the layer didn't start at the beginning of the comp. This problem is fixed in this update. Also, on a few systems there where issues with saving expressions to your custom expressions library. That is fixed now, too.

Mathias at Adobe Live (German Event)

admin — Mon, 08 Feb 2021 14:44:16 +0000

Note: Usually, all our content is English, but since this event is in German, the following text is German, too.

Diese Woche Mittwoch ist Mathias Möhl von mamoworld beim deutschen Kanal von Adobe Live zu Gast. In dem 90-minütigen Live-Stream “Video und Motion Masterclass” spricht er mit dem Gastgeber Robert Hranitzky über sein kostenloses Motion Graphics eBook und natürlich seine After Effects-Extensions.

Wir planen einen lockeren Mix aus handfesten Praxis-Tipps für Eure Motion-Graphics-Projekte und unterhaltsamen Hintergrundinfos - etwa, wie Mathias vom Wissenschaftler in der Bioinformatik zum Mitgründer von mamoworld wurde. Dank Live-Chat könnt Ihr uns auch direkt während des Events Fragen stellen.

Adobe Live
Video und Motion Masterclass
Mittwoch, 10. Februar, 16 Uhr

Aufzeichnung ansehen

Tags:

event

adobe live

Top 11 Plugins for Adobe After Effects in 2021

admin — Mon, 25 Jan 2021 10:52:34 +0000

Learning a program like After Effects is hard – it’s a complex beast with hundreds of features and many distinct styles, and it takes time. The good news is that we live in a golden age of creativity where there are literally thousands of plugins that can help you to achieve whatever you’d like, developed by dedicated programmers across the world. But which ones should you choose?

Before we get into the list, a few pieces of essential advice:

There’s no best plugin, only the best plugin for you. Focus on what you want to create – if you’re doing purely 2D motion design, you’re not going to be interested in plugins like Element 3D or Mocha, whereas if you’re a busy agency designer you probably don’t want to go frame by frame on Squash and Stretch animations (in which case this might be what you’re looking for…) Find what you’re passionate about.

Focus on one or two plugins at a time. It can be tempting to get all the latest and greatest plugins and learn them all right now, but trust me – you’ll end up feeling swamped by everything you have to do, and won’t learn anything properly. Learn one, then move on to the next.

So with all that said, what are some of the most useful After Effects plugins in 2021 to help with your workflow?

Motion 3

Motion 3 by Mt Mograph is a tool I use almost every time I’m in After Effects. It's basically an easing tool at heart, making it really easy to change your ease in/out movements without going into the graph editor (which I still hate, no matter how many times it’s explained to me…). What really sets Motion apart is that it that it’s basically a Swiss army knife of useful tools, all of which are neatly explained in this video.

more

If you want a simpler, cheaper option, Ease and Wizz is the classic for easing.
Squash & Stretch

Squash & Stretch - I’m not a ‘traditional animator’, so creating fluid squash and stretch animations – essential for lifelike characters – would be almost impossible for me. Squash and Stretch takes your logo / text / image and with a couple of clicks gives you bouncing, hopping, spinning goodness that looks like you’ve spent hours on it.

more
Boombox

Boombox also from the Mt Mograph guys, is a really good, custom-made library of sound effects. While it’s not as comprehensive as some collections, it has some really interesting stuff, grouped in imaginatively named collections. You get free updates, too – normally one pack a month.

more
Easy Bounce

Easy Bounce from mamoworld is another of those tools you wont know how you lived without. Give it a basic idea of the path you want something to bounce along, click one button, and you’ve got a professional looking bounce animation. Animation doesn’t get much quicker, or easier.

more
Universal Audio is great if you’re timing your animation to music and have lots of subcomps - it'll ‘universalise’ the music track so there's a copy of it in each subcomp, wherever those comps start and end in your main timeline.

more
BeatEdit

BeatEdit – is another seriously cool tool. It uses an algorithm to create beat markers for your track (in After Effects, Premiere Pro or Audition) – markers you can then snap to, meaning you can precisely edit your track to be longer, shorter, or change the mood of a section by shuffling bits around. If you’re in After Effects, it can also use these markers to stagger layers and repeat keyframes, and also features the rather impressive BeatWiggle.

more
Rift

Rift – do you have a gajillion layers that you need to make appear in sequence? Or randomly? Rift does this with one click, and it's 'pay what you like', too. Will save you lots and lots of time.

more
Stardust - if you're ever tempted into shiny particles territory, I'd recommend Stardust above the Trapcode suite (Particular, Form etc.). It's not cheap ($250), but a damn site cheaper than Trapcode (who are really pushing their yearly subscription model now), and does a great deal of the same things. Shiny, pretty goodness.

more
Newton 3

Newton 3 - I got kind of obsessed with physics animations for a while, and it's all Newton's fault - it does bouncy, springy, spongy, soft body physics, and much more cool stuff. Again a little on the expensive side, but sooo fun to play around with.

more
Pastiche

Pastiche is another from the Newton folks, and a huge amount of fun to play with. It takes a bunch of layers and forms them into a shape of your choosing (png, shape layer, text etc.). It can be fun to animate between different shapes (I used it here to morph the different words, for example).

more
SF-Subtitles

SF-Subtitles – it feels a little weird to rave about something so simple, but subtitles are a serious pain in the bottom, and this makes them super easy. Get your text into separate lines, click on Create, adjust your keyframes and you’re done.

more

UX with Spring Animations in Adobe After Effects

admin — Wed, 13 Jan 2021 09:15:27 +0000

A workflow for Animation in User Experience Design in Adobe After Effects for Android, iOS or Web Apps.

The Workflow

So, you’ve designed the user interface of your app in Adobe Xd, Sketch or Figma and now you want to implement it in Android, iOS or a web app. But before you start coding, there’s one little thing missing in your design: animation. How does the loader spin, exactly? When a message is deleted, does it just disappear abruptly, fade out, scale out, or perhaps fly into a trash can icon? And what’s the exact timing for that move?

You’ll need to answer these questions before the app is actually implemented. But here’s the problem: you can’t just ask a motion designer to create some videos with the behavior you want, because a developer won’t be able to implement these animations based only on a sample video. The programmer will need the exact motion path and timing details to recreate the same animation in your app. And to make matters worse, those details are very different for Android, iOS and web apps.

In this article, I propose a workflow to first import your designs from Xd, Figma or Sketch into Adobe After Effects (Ae), then create animations there using the spring tools in iExpressions. When it comes to interactivity, spring animations have some big advantages over traditional keyframes, which we’ll discuss in more detail later. But more importantly, it’s not only easy to create spring animations in After Effects, they can also be easily implemented in Google’s Android, Apple’s UIKit (or SwiftUI), and Facebook’s React. One major potential hassle is that the parameters for spring animations are different for each platform - Google, Apple and Facebook all cook their soup a little differently. Fortunately, the After Effects extension iExpressions comes to the rescue. It allows you to not only easily create a spring animation in After Effects, it also calculates all the parameters you need to recreate the exact same behavior with Android Spring Physics, UIKit’s UISpringTimingParameters, or SwiftUI’s interpolatingSpring and react-spring. So even though all these spring animation systems are very different, once you’ve designed the animation in After Effects, you’ll have an easy recipe to precisely implement the same animation across all major platforms. In this way, your app will have a consistent look and feel throughout all these platforms.

From Static Designs to Animation

With Adobe XD, Sketch or Figma, there are plenty of solutions for designing user interfaces for mobile apps, web apps etc. Naturally, these tools focus on static designs. You draw an artboard for each screen of your app - say the login screen, the main chat screen and the address book of your new messaging app. Next, you connect those static designs with actions to create mockups. You could specify, for example, that the mockup should start by showing the login screen and when the login button is pressed, it should transition to the main chat screen. This way you effectively create interactive slideshows that give the user a pretty good idea of how to navigate the app.

These mockups are very useful for communicating how an app is supposed to work long before it’s been implemented, but in terms of animation, they are very limited: you only have a handful of presets to transition from one screen to the next. So if you want to visualize exactly how a loader symbol spins after the login button is clicked, or how fast (and with what kind of easing) a document flies to the trash icon, you’ll need some dedicated animation software. Adobe After Effects (Ae) is the de facto standard for motion design, so it’s no surprise that Xd (which is also developed by Adobe) can export a design to Ae with a single click. If you’re using Figma or Sketch, there’s also a free tool (AEUX) to bring designs from these applications into After Effects in no time.

Keyframes - so obvious, but such a bad idea

As with almost any other animation software, After Effects is based on keyframes. To move an object from A to B, you specify what time it starts at A (the first keyframe) and what time is gets to B (the second keyframe). In addition to these times, each keyframe has easing information attached to it that describes the timing of the move, for example whether it travels at a constant speed, or starts slow and accelerates over time. In After Effects, the easing is described by terms like linear keyframes, easy ease keyframes and a speed graph – for a comprehensive explanation of these, see the Keyframing in After Effects Chapter of our free eBook Motion Graphics in After Effects that Speaks to Your Brain. In the web development world, easing is expressed differently, in the form of CSS easing functions.

While keyframes are great for most animation jobs, for user interface design they have some serious drawbacks. A key difference between an animation for a video clip and one for an interactive interface is that the latter changes depending on the user’s input. Take a look at this simple animation, which moves the content back in place after the user has dragged it downwards. Depending on how far the user drags it down, the move back up is longer or shorter. Of course, all these variants can be easily keyframed; however, the app developer doesn’t need three or ten examples, he needs one recipe for how to move the content back, no matter how far it was dragged.

Since keyframes have a fixed time, the move between two keyframes consists of a fixed duration and some easing details. Keyframed moves can be explained to an app developer with words like “Move back in place in 0.3s with a constant speed” or “Move back in place in 0.5s and ease in at the end of the move”. But while it might seem obvious that a motion is described by a duration, this doesn’t work well for interactive animations. For our example, if both have the exact same timing it means that short moves (where the user drags down just a little) appear too slow, while long moves (where the user drags a lot) appear too fast. Essentially, the movements don’t feel natural. We want the move to feel the same, no matter how far the element was dragged. This means that shorter moves need to be finished in less time than longer ones.

So, if it’s not the duration, what else is it that we want to be consistent across all variants of the move? It’s not the absolute speed – it doesn’t help to say “move back in place with a speed of 100px per second” instead of “move back in place in 0.5 seconds”. If the user drags down 100px we don’t want this move to last ten times as long as a little 10px move, as this would be way too long. Longer moves need more time than short moves, but they should still be quite a bit faster. The natural solution seems to be a middle ground between the two extremes of fixed duration and fixed speed.

Spring Physics - better and even easier!

If you want animations to feel natural, think about how things move in the real world – after all, that’s what users are used to and perceive as natural. In the real world, things don’t move with keyframes and easing curves - they move based on physics. Forces push and pull objects around, friction or damping makes them slow down, etc. But you don’t need a full-blown physics simulation like in a computer game to create a natural user interface; in fact, you can achieve this with a very simple concept. Welcome to the world of spring animations.

Like keyframes, spring animations are a general concept to move things from point A to point B, but they are a very different approach to animation. To move an object from position A to position B, you just specify that it is attracted by B, as if the object were connected to point B with an invisible spring. You specify the physics parameters that describe exactly how the spring pulls, and then the object moves to B. So if A and B are very close, the duration, speed etc. of the move is very different than if A and B were far apart. What you specify with the spring parameters is not just how fast and how far it moves, but rather how the move should feel. Is it a heavy object, or does it slide easily? Does it overshoot? These aspects can be controlled with the spring parameters.

There are different ways to describe a spring (more on that in the section about implementation), but for now let’s see how Android describes springs: with stiffness and damping ratio, just two parameters! Instead of dealing with a ton of different keyframe types, easings and durations, you describe each move with just two numbers! Android has four default values for both damping and stiffness, and the following chart demonstrates what all combinations of these values look like.

As you can see, the animations in the first row move slowly, while those in the last row move very fast. So, the stiffness essentially corresponds to the speed of the animation – the stiffer the spring, the faster it pulls an object to its target position. The damping ratio controls how much the move overshoots and/or swings. You can see that in the first column (DAMPING_RATIO_HIGH_BOUNCY) the move swings a lot, whereas in the rightmost column (DAMPING_RATIO_NO_BOUNCY) there is no overshoot at all. Of course, when designing spring animations, you aren’t limited to the four constants shown here – you can adjust the stiffness and damping ratio however you choose.

If we think about the drawbacks of keyframes that we discussed above, spring animations solve them easily. A spring “feels” the same, no matter how far it’s stretched. For long moves, the spring is stretched a lot and so pulls more strongly than for short moves. With the same spring parameters, long moves are faster that short ones (exactly how we want them to be), but still feel very consistent.

It’s also worth noting that springs don’t need to be springy! For most motions, you won’t want overshoot (i.e. you’ll want to choose DAMPING_RATIO_NO_BOUNCY). Using spring animations isn’t about being springy, it’s about creating smooth animations that feel natural and fluid.

Design: Spring Animations in After Effects

Spring animations aren’t natively supported by After Effects, but as we mentioned above, they’re very easy to create with the extension iExpressions.

First, keyframe your moves as usual, without worrying about the easing. You then apply the Android Spring iExpression to the keyframed properties to add spring-based easing. The Android Spring expression has exactly the same spring parameters as Android, so you can be sure the animation will behave exactly the same. If you’re used to using Apple’s spring parameters, you can use the UIKit Spring iExpression instead. Note that you can choose the Android or UIKit expression based on personal preference – it’s no problem to design an animation with the Android Spring iExpression then later implement the animation in UIKit, or vice versa. If you’ve never worked with spring animations before, I highly recommend using the Android expression, since Android has one less parameter to worry about, comes with intuitive default values, and is just as powerful as Apple’s variant.

When you’re done with your design, how do you tell your Apple, Android or React developers how to actually implement the animations? It couldn’t be easier: just load the spring expression you used into iExpressions and apply it to the source text of a text layer. When applied to a source text, the expression converts the spring parameters into the corresponding parameters for all the different spring implementations (Android, UIKit/SwiftUI and react-spring), and outputs these onto the text layer. This makes it super easy to bake all the information your developers need right into the videos that you export from After Effects.

Here’s a little tutorial to demonstrate this process:

So far we’ve only talked about movement, but spring animations can also be used for any kind of animations, like scaling or rotating objects. To imagine what a spring animation on the scale property looks like, for example, think of the scale property as a slider, with the spring pulling the slider handle from one value to another.

Implementation: Springs in iOS, Android and React

Here are some links to get you started on implementing spring animations

Apple with SwiftUI : here’s an example, and here’s the documentation for SwiftUI
Apple with UIKit: you’ll need to create a UIViewPropertyAnimator and provide it with a UISpringTimingParameters object.
Android: use the SpringAnimation class and specify the parameters of the spring with the SpringForce class. Here’s an example.
React: take a look at the react-spring documentation for details.

As we mentioned before, the parameters for describing a spring are very different for Android, SwiftUI or UIKit and React:

Android’s SpringForce is described by stiffness and damping ratio.
Apple’s SwiftUI, UIKit describe springs by mass, stiffness and damping
react-spring describes springs by mass, tension, friction and a clamp option

This is not just like one car describing the speed with kilometers per hour and another with miles per hour. Instead, it’s one car working with kph and the other with the traveling time, wheel diameter and the number of wheel rotations – it’s a very different way of looking at things, and going from one to the other is cumbersome. For example, if you’ve designed your animation for Android and now want to implement the exact same behavior in iOS, you’ll need to somehow convert Android’s stiffness and damping Ratio into Apple’s corresponding mass, stiffness and damping.

But as we mentioned in the previous chapter, our After Effects extension iExpressions has an easy solution for this: when you use the Android Spring iExpression (or the UIKit Spring iExpression), it calculates all the different parameters for these systems for you. So, whether you’re designing in the Google or Apple world, you’ll get the parameters you need for all other worlds, too.

Summary

Spring animations make a whole lot of sense for user interface design, but the spring systems available for Android, Apple or the web are so different that it’s hard to create consistent animations for all those platforms. But with iExpressions, not only can you design spring animations directly in Adobe After Effects, you can also easily implement them across all platforms so they always feel the same, whether your user is in a web app, or using an Android or Apple phone.

Download iExpressions for Ae

Tags:

BeatEdit for Audition released!

admin — Mon, 19 Oct 2020 09:13:20 +0000

We just released BeatEdit for Adobe Audition! Just like its siblings, BeatEdit for After Effects and BeatEdit for Premiere Pro, it detects beats in your music and generates markers for them. This means you can easily match the tempo of two songs, edit your music, and seamlessly loop tracks – all with just a few clicks.

Free for Bundle Owners!

Good news if you already own the BeatEdit bundle (which until now just contained BeatEdit for After Effects and BeatEdit for Premiere) - you can get a free license of BeatEdit for Adobe Audition. Just place BeatEdit for Audition in the shopping cart here – making sure you’re logged in with the customer account you used to purchase the bundle – and the price should automatically update to $0.

Download Now

Tags:

BeatEdit

Audition

mamoworld - news (de)

Happy Birthday mamoworld!

Win a free license for you - and for a friend!

Sale

BeatEdit for DaVinci Resolve

Automation Blocks for Ae - Public Beta

#MotionForPeace

Watch and Like #MotionForPeace Videos

Mathias live at Creativity Hive - Ask Your Questions!

Date

iExpressions 3.2.003 released!

Auto Resizing Background Shapes

Mirror iExpression

Automatic Creation of Sliders

Bug Fixes

Mathias at Adobe Live (German Event)

Top 11 Plugins for Adobe After Effects in 2021

Motion 3

Squash & Stretch

Boombox

Easy Bounce

BeatEdit

Rift

Newton 3

Pastiche

SF-Subtitles

UX with Spring Animations in Adobe After Effects

The Workflow

From Static Designs to Animation

Keyframes - so obvious, but such a bad idea

Spring Physics - better and even easier!

Design: Spring Animations in After Effects

Implementation: Springs in iOS, Android and React

Summary

BeatEdit for Audition released!

Free for Bundle Owners!