UX Hacker & Sketch TV's video: FramerJS Auto Code Animation new Feature that brings the ease of drag and drop to Animation Design

FramerJS Auto Code Animation a new feature that brings the ease of drag and drop to animation design. ---- 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. ou’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. This opens up high-fidelity prototyping to everyone, even those with no coding background. 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.