This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Isaac Weinhausen
Posted Aug 16 - Read on Facebook

Hi Frameristas!

I've been really excited watching this community share their ideas, experiments, and work with Framer. It's a great tool, and this community is even better. That's why I'm really excited to offer my first contribution, Animation Collections for Framer.js.

Here's the basic idea: Animations are core to Framer, and beautiful interactions usually involve more than a handful of animations. Managing and chaining these to play in sequence can become manual and laborious, especially when we're talking about 10 or 20 or more. Want to tweak the timing or change the order? Forget about it. That's why I wrote the Animation Collections library. These classes make chaining animations together painless. It'll give you more control over your scenes & transitions with less spaghetti code. Objects can be used with each other (think nesting) for even more control and flexibility. Click here to see it work in action:

This is the first of hopefully a handful of Animation utilities. Try and it out and let me know what you think. And if you're a seasoned developer, I'd love to have your eyes on my code for any major gotchas. All feedback and bugs are welcome! Cheers.



Jordan Robert Dobson

I saw this in person at Seattle FramerJS meet up and it's pretty spectacular in simplifying and working to create animations without much friction. Great work!

Koen Bok

This is cool! I have a challenge!

Call it Timeline and make the api like this, or better:

t = new Timeline layerA, [
{x:500, y:20},
{x:200, y:100},
{x:20, y: 200}


Koen Bok

Oh, and then put it in a pull request with some tests :-)

Bonus points for: .reverse(), stop(), pause() etc.

Jordan Robert Dobson

That's great for a single Layer Koen... not sure it addresses what he's doing exactly however.

Jordan Robert Dobson

But I do like the passing of the properties insead of creating an animation object for each change in the "timeline".

I think the thing lacking in his example that I saw in the demo he did was sequencing multiple layers together. The Grid was pretty impressive Isaac. Maybe you should include that example as well.

Tisho Georgiev

I'm curious to hear what people's needs are when it comes to a timeline API. From my own experience, you get very quickly to the point where you want to overlap an animation with another one, but still don't want to deal in absolute time. A plain English example is "start fading in layerA 100ms before layerB's animation ends". That way I can play around with layerB's animation without having to change the timing on layerA. Greensock has a pretty powerful API for timelines that can do just that, so it's worth a look:

Otherwise good work Isaac. Just FYI, there's a pretty big bug your AnimationSequence API. You pass in animations as an object ("key: value" pairs), and objects are not meant to be ordered. So in your example, the animations labeled "first, second, third" could be executed as "second, third, first" depending on the browser. You could fix this by changing the "animations" parameter to be an array, which guarantees that animations will be added in the order you intended: new AnimationSequence(animations: [animA, animB, animC, ...]).

Jordan Robert Dobson

I asked about this Tisho and he mentioned he was doing something behind the scenes. I was also wondering why not an array. That was my first concern as well. :)

Tisho Georgiev

Jordan, nope, this is the underlying code:

@add(animation) for k, animation of options.animations

For-of gets transpiled into your good old for-in loop, which makes no guarantees about order. Most (if not all) browsers happen to enumerate properties in insertion order (as intended), but they 1) don't guarantee that this will always be the case, and 2) have an exception about property names which could be parsed as integers.

Consider this:

var a = {
first: 1,
"2": 2,
third: 3

for (var k in a) {

You'd expect the output to be 1, 2, 3, but the value with a numerical index automatically gets bumped up to the top.

Jordan Robert Dobson

Yep. I understand how it works. That's why I asked. Good call. An array would be a much better choice.

Isaac Weinhausen

Tisho Georgiev Great points! I actually experienced this myself when I was trying out integers for keys. The results always came back in the order of the integer keys, not in the order in which they were added.

At first I was alarmed, but after considering this, I decided to stick with key/values, mostly for the sake of 'convenience'. These reason I wrote this library in the first place was because of convenience. At the end of the day, most of us are using Framer for communicating ideas and specifications, not for creating production-ready code. If I can specify the order of my animations by the order it's been added, as well as by the value of the keys themselves, then the more power to me/you! Does it feel dirty? YES! But that's okay for me given my goals and objectives with a tool like this.

As Jordan Robert Dobson mentioned, I also have future plans for the keys, namely being able to uniquely reference animations within collections. That should help me in the future with removing animations from the sequence/set, or modifying them dynamically as needed. Originally I had hoped to use something like a Dictionary to accomplish this, but unfortunately JS doesn't allow for using object references as key values in an array. The closest we can get to something like this is an associative array, which has limitations.

Keep the feedback coming though! I'm by no means a professional developer, so I need all the help I can get.

Isaac Weinhausen

Tisho Georgiev btw– Greensocks is awesome. I use to use it in ActionScript before its JS days. That said, I spent enough years in Flash having to think about absolute time, this time I want to do things differently. =P

Read the entire post on Facebook