Introducing Auto-Code for Animation Design

October 13, 2016

Earlier this year, we introduced Auto-Code, an all-new way to design with Framer. It combines the power of code with the ease of visual editing. Today we’re releasing the next part of this evolution, Auto-Code Animation. A new feature that allows you to visually manipulate and fine-tune animations.

The Framer mission has always appealed to the world’s top designers, those who have invested in code as the best way to express interactive ideas. But we’re committed to opening up high fidelity prototyping to all, by building features that lower the boundaries to programming. In April, we released Auto-Code, a pioneering feature that writes the code for you as you visually manipulate your designs.

Automate your animation design

Now we’re bringing this advanced technology to animation. Backed by a powerful physics engine, Auto-Code Animation expands on our April release, allowing you to express interactions between the visual layers of your design. There’s some heavy lifting happening under the hood, but we kept it simple for you. Just import a Sketch file and click on the icon next to the layer you want to animate. Then, using common WYSIWYG mechanisms like drag and drop, you can scale or position your layer and fine-tune transitions using simple slider controls.

You’ll find the new animations interface by toggling the icons in the properties panel. Perhaps the most notable advantage of this panel is the curve visualizer, a feature that allows anyone to easily play with the tension, friction and velocity of spring animations for immediate visual feedback. As you can see above, this is a very natural and intuitive way to explore and fine-tune animations, even if you are designing multiple animations simultaneously.

We believe even expert coders will prefer this simple mechanism over code-based experimentation. The ability to create native-level animations using simple sliders makes for a quick and effective way to explore new ideas.

Instant preview for rapid iteration

Every time you tweak the properties of your animations, the new animation automatically plays for you to preview. This allows for rapid iteration to happen in a natural manner. But that’s not all — we’ve also added in-canvas playback controls. Loop, play or slow-down your animations for even more precise control.

Design intuitively, learn code as you go

If you’re a current Framer user or have advanced programming skills, you’ll find some exciting new updates to your workflow. We’ve optimized the syntax for defining animations and unified it with how you transition between states. The goal of the new code syntax is twofold: to be easier to use but progressive in nature, so you can scale up to the desired complexity of the animation you’re building.

    x: 200
    y: 200
        time: 1
        curve: "ease"

Learn about the new syntax additions in our Get Started Animation and States sections, or check out the Docs. Depending on your skill set, you may want to start by writing code, and then switch to the Animation Panel for the fine-tuning part of your prototyping process. Beyond the obvious benefit of being able to explore more innovative interactions, Auto-Code Animation serves the added purpose of teaching you how to code, even as you build your prototype. As both a design tool and educational platform, Framer is now more intuitive than ever.

Whether you’re designing a full-scale VR prototype or need to demo a new animation to the product team, Framer is the perfect tool for the job.