Flow now exports drivable animations.

This is massive for the future of Flow.

Drivers are a critical step towards integrating interaction and “prototyping” into Flow itself. Interaction has always been our goal, and this release really concretes that direction. Our approach to integrating interaction is code-first because it proves that components are possible using Flow’s unique approach to design, animation and production.

Enough said for now, here’s a “short” list of all the things we did since our previous 1.3 release.

Keyframe Animations
This is where drivers start, with a massive overhaul of how we handle the export of animations. Ulitmately, this feature gives us major performance improvements to exported projects, and much more elegant exported code.

  • Use CAKeyframeAnimations in iOS export (major overhaul of our code export template)
  • Fix synchronization issue with exported iOS animations (Using keyframes instead of timersl)
  • Use JS + web-animations api for HTML export (major overhaul away from CSS animations)
  • Use SVG keyframe animations (instead of multiple tags)

Flow now exports drivable animations. You can use sliders, progress updates, triggers or gestures to progress through your animations. On iOS and HTML!

  • Add iOS driver to exported template (drag or tap to move through the animation)
  • Add HTML driver to exported template (slider or buttons to move though the animation)
  • Sync SVG and Web-Animation API in control of driver
  • Make HTML timelines resuable and swappable

Exporting Code
A laundry list of the lovely things we update to make the previous two sections possible.

  • Add launch screen animation to iOS template
  • Add SVG animation easing
  • Add SVG keySplice, keyValues, keyTimes to export
  • Add gradient animations in HTML
  • Add fill image animations in iOS
  • Add SVG gradient end point animations
  • Fix image changes in HTML
  • Fix text alignment in HTML
  • Fix corner radius animations in HTML
  • Fix shape resizing animations in HTML
  • Fix exporting fill gradient in iOS
  • Fix shadow animations in HTML
  • Fix step easing curve implementation in HTML
  • Fix complex transform animations in HTML
  • Fix anchor point animations in HTML
  • Fix mask animations in HTML (Safari + Chrome, FF still has a little bug)
  • Export contents gravity for images (e.g. center, bottom-left, etc.) in HTML
  • Export only images, sounds and fonts for the current timeline
  • Overwrite old exports w/o sending previous versions to trash (saves a ton of disk space)

Exporting Media
We upped our game when it comes to media exports. Check it out…

  • Add APNG (animated png) export
  • Open GIFs and APNG in default browser after exporting
  • Add UI option for opening after export is complete
  • Add content scale option for media-based export (1x, 2x, 3x, 4x)
  • Add looping option for GIF and APNG export
  • Fix shadow scaling bug for scaled media export

A few things we updated in the interface.

  • Added a menu item and hot-key for inserting images into your projects
  • Added exit button to the welcome activation window for users to close the app
  • Created custom feedback controller that uploads tickets to Zendesk
  • Add select all timelines check box to code export panel
  • Fixed color well bugs
  • The color well will highlights to indicate if it is actively linked to the color picker
  • Calibrate zooming and scrolling the stage when using track pad and using mouse wheel
  • Display time pop up when dragging keyvalues
  • Right-clicking on a layer in the stage now displays a contextual menu
  • Added a reveal menu item to layers

NewsFeed (UI/UX)
We added a lovely in-app news feed to keep you apprised of the goings-on with Flow.

  • Added a new feed view with clickable links to news items
  • Added a top bar item to hide / reveal the news feed view
  • Highlight the top bar icon when there is news

Code Preview
A touchup.

  • Update code preview to use the new CAKeyframe animation code.

[Yes, CP is still only for iOS]

A slew of bugs were destroyed.

  • Fix ability to select pasted keyvalues after pasting
  • Fix layer pasting offset
  • Properly update “timeline from sketch” button on the stage when there are no timelines in the document
  • Fix timeline hierarchy row selection bug
  • Fix selection behaviour in Timeline Hierarchy outline view
  • Fix focusing issue for timelines only when selecting a new timeline that isn’t currently in focus
  • Fix font size and font panel selection / sync
  • Properly sets font coming from font panel
  • Fixes mask icon asset for light mode

Trial Licenses
We changed how many days you can use the trial license.

  • Trial licenses are now 15 TOTAL days, instead of 30 from the day you first get a license.
  • This should give users more time if they’re not opening the trial every other day, or if they get a license and forget about us for a month.

Crashes that Won't Happen Anymore
We crashed into a few things, but we’re better drivers now.

  • Prevent app from crashing when timeline duplication fails
  • If no layers in symbol master don’t create a layer
  • Fix a bunch of things that were crashing, but that don’t warrant a description because they were silly and you probably just don’t want to read any more in this list because it’s so long, and thanks for getting here if you read throrugh everything we wrote above… because we did a lot, and we cried a lot along the way… and we really appreciate your attention to detail.