🔬 In The Pocket Insight

A glimpse in our way of working

Rive Animations

Back in 2019, we began researching a new animation tool called Flare. It promised better animations for Flutter projects, prompting us to investigate further. At that time, we were already using Lottie as an animation framework for our projects. While Flare did offer a more user-friendly interface than After Effects, it wasn't production-ready at that time.

Fast forward to 2021, by then they had rebranded to Rive and implemented numerous updates. We felt more confident in using it, so we did a new test which turned out great. With the addition of the State Machine, Lottie had a serious contender. Rive enables us to implement more delight into the products we build without increasing development time. For example, in the ENGIE app, we incorporated Easter eggs (quite literally) that appear during holidays. Your profile icon animates when you switch between tabs. All animation logic is built in Rive, eliminating the need for additional development work.

Animation of 3 profile icons with a halloween, christmas and easter theme. A cursor is clicking each icon which animates from a grey to a colored version. The first profile icon is a person with a pumpkin as a head, the second a person wearing a christmas hat and the second one is an easter bunny with an easter egg.
Example from the ENGIE app

‍

We now use both Lottie and Rive in our projects, but here’s a quick guide how you can decide which tool to go for:

  • You already have Lottie or Rive animations: keep using the framework you already have
  • Add extra interactions without extra development time: Rive
  • Use different animation tools (Lottie Creator, After Effects, ...): Lottie
  • Adapt animations programmatically (e.g. Dark Mode colors): Lottie
  • More advanced animations (e.g. with bone rigging): Rive
  • Smaller file size: Rive
  • Figma support (import and animation): Lottie (with the help of plugins like LottieFiles or Aninix)

Good to know if you want to switch to Rive: You can import your existing Lottie animations in Rive.

‍

đź’ˇ Did you know?

Screenshot of an iPhone that shows "Add to Home Screen" this is a screen here you can choose a name for the web app and you see URL. This example uses In The Pocket Design as a website.

Web apps

Recently there was some news about web apps (PWA) as Apple was planning to remove them from iPhones in the EU with iOS 17.4 due to the Digital Markets Act (DMA). However, they have now come back on their decision and will keep supporting web apps.

So this is a great time to highlight what you can do with web apps, because they have improved quite a lot in the past few years.

First, a web app can be a great alternative for native apps if you want to reduce development costs and make it more widely available with cross platform support. By using web technology you can be quite certain your app can be used on any platform.

You can use many sensors and features that are also available for native apps, for example location services, notifications, app icon badges, upload files, access the device theme or even use the user’s camera and microphone for AR experiences. If you want to use more advanced features you will be better off building a native app, but for a lot of cases a web app might be a good alternative.

‍

‍

🛠️ Tooltips

Everything new in our favourite tools

Framer updates

Framer introduces quite some updates in February: custom cursors, localization 2.0, CMS updates and property overrides.

Localization is now more powerful with options like hiding CMS items or pages per locale, translating CMS item slugs and using Locale actions in components. The CMS also had its fair share of improvements. The most impressive one being choosing a focal point for images so they always show the most important part of the image, whatever size it is displayed at. With property overrides you can now easily see which properties you have changed.

View all framer updates

‍

Upcoming Rive updates

While Rive is preparing for some bigger features like Responsive Layout and Sound, they also released a few improvements this month. The most important one is the option to swap animations in your state machine without having to set up your logic again.

View all rive updates

‍

Webflow Design Systems & CSS properties

Webflow released 2 major updates: custom CSS properties and the Figma to Webflow app with Design System Sync.

Custom CSS properties allow you to expand upon what Webflow is already offering as properties. You can now use nearly any CSS property in your Webflow site, making it an even more powerful visual web development tool.

Next to that they also released a Figma to Webflow app that works together with the Figma plugin. You can now import design system variables and components. Mix that together with Dev Link and you have yourself a nearly automated component library from design to development.

On top of this they also redesigned of the style panel layout.

View all Webflow updates

‍

Some smaller updates

  • Spline released Spline Mirror app to preview your 3D scenes on Apple Vision Pro
  • Lottie Creator now supports trim path animations
  • Figma made quite a few updates to prototypes, sections can now be reviewed individually when working with branches and they added a new feature Multi-Edit
  • Mobbin created a plugin to import screens directly in Figma without having to download them

‍

‍

🆕 New at In The Pocket

Illustrator 3D and Adobe Dimension research

We’ve been experimenting with the next generation of 3D tools lately. We held a Spline workshop in January and this past month we researched how you can use Adobe Illustrator & Dimension to create 3D objects and scenes.

You can first create a 3D object from a 2D object in Illustrator, bring it to Dimension and apply textures, lighting and setup your scene. Here are some of the results from the experiments:

Collage of four digitally rendered objects with metallic surfaces, showcasing different angles and curves. Top left: A concentric design with rings around a central bolt. Top right: Perspective view of two interlocking curved shapes. Bottom left: Spiral structure viewed from above. Bottom right: Close-up of a curved object's edge, highlighting its sleek design.

Building for Apple Vision Pro

Our brand new Apple Vision Pro arrived a few weeks ago and got us excited to start building for it. Some of our XR developers got busy right away and shared their first thoughts about building for the Apple Vision Pro.

Read the article

‍

‍

đź“° What you might have missed

Updates on In The Pocket Design

‍

A visual overview of our discovery process Understand, Define, Shape, Validate, Plan. Illustration of five stylized, colorful panels each featuring geometric art. From left to right: the first panel is blue with an eye design; the second is pink with concentric circles; the third is yellow with a triangular formation and a sphere; the fourth is teal with a sphere resting on an L-shaped form; the fifth is orange with a layered square and a sphere.

Discovery Toolbox

We launched our Discovery toolbox which is a collection of tools to help our steam and clients improve their discovery process. Whether it's gathering more context about users or business, defining challenges and goals, shaping solutions or validating on usability, desirability, viability or feasibility. Our toolbox has it all complete with examples of previous projects.

Discover our toolbox