When we released version 1.0 we made a commitment to all the lovely people who paid for during it’s pre-release phase that we would keep updating the Beta until we released new features. And so, the version we released today will be the last update to the Beta version. Those users will still be able to work with the Beta indefinitely, we just won’t be adding new fixes to it.

We ❤︎ you all for supporting Flow!

That said…

1.0.4

Over the last few weeks we’ve addressed many concerns from people who got our free trial and ran into issues. In particular, we updated HTML and SVG export, trying in desperate measure to get it up to speed with iOS / Swift.

We fixed a few things.

Anchor Points

Creating rotations and transformations around anchor points works like butter in Safari and in Chrome.

Anchor point X at 1, 2, and 4 for the large, medium and small rects.

Multi-keyvalue Animations in CSS

There are many ways to create animations in CSS. In the latest release we shifted to an approach that allows for multiple keyvalue animations.

Pink has 1 target keyvalue, blue has 3.

Here’s what our css looks like:

@keyframes pinkAnimation {
0% {
left: 40px;
}
100% {
left: 630px;
}
}
@keyframes blueAnimation {
0% {
left: 40px;
}
33% {
left: 630px;
}
66% {
left: 40px;
}
100% {
left: 630px;
}
}

Steps!

Here’s a subtle touch that we needed to bring to HTML. In Flow we have a concept called a step curve. This allows us to switch between easing, and snapping into position – it also helps us properly reverse complex timelines.

There are 3 types of step:

  • Left (immediately after the first keyvalue),
  • Middle (at the mid point between two values), and
  • Right (a fraction of a second before the second keyvalue).
Three step curves compared to linear animations of the dots and purple elements.

SVG Scaling

In our last release SVGs would preserve their aspect ratio and fit to the height or width of the containing box. We’ve done away with that.

Scaling works with complex SVGs too…

Butter.

A few other things.

Here are a few other things included in this update:

  • We don’t include empty css animation blocks for non-animated layers
  • Border width animations are tuned up
  • Exporting flipped vertical and flipped horizontal properties
  • Separating SVG into their <divs> (helps with svg anims in Safari)

The Flow File

Here’s a link to the Flow file we created for the animations in this article:

FILES FOR THIS ARTICLE

What’s Next?

Since our V1.0 release we have caught up quite a bit with exporting issues, and we’re quite happy with where Flow is sitting in this regard. No doubt it will need to be improved with edge cases and new techniques as more and more users push the limits, but as of right now the basics are in place. So we won’t be updating the beta any more.

As for 1.1, we’re working on improving the UX for:

  • Launching new projects,
  • Creating new timelines,
  • Adding a bit of onboarding goodness,
  • Artboard resizing, and
  • New tutorials.





Source link https://blog..io/flow-1-0-4-5293d2a77037?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here