Popmotion / popmotion

Simple animation libraries for delightful user interfaces
https://popmotion.io
20k stars 662 forks source link

question: popmotion works with meteor? #68

Closed tinchox5 closed 9 years ago

tinchox5 commented 9 years ago

Hi, popmotion looks amazing! Are you planning to integrate popmotion with meteor?

mattgperry commented 9 years ago

Hey man thanks! No plans for explicit Meteor support, but I've tried to design Popmotion to support any framework by using custom callbacks. Is there a specific use case you had in mind?

tinchox5 commented 9 years ago

I'm building a contact app using meteor because it make easy many things and I think popmotion could be an excellent choice to animate the ui. BTW, will you implement collision detecction? El sept. 13, 2015 4:20 PM, "Matt Perry" notifications@github.com escribió:

Hey man thanks! No plans for explicit Meteor support, but I've tried to design Popmotion to support any framework by using custom callbacks. Is there a specific use case you had in mind?

— Reply to this email directly or view it on GitHub https://github.com/InventingWithMonster/popmotion/issues/68#issuecomment-139914370 .

mattgperry commented 9 years ago

You shouldn't have any problem using Popmotion in that app then, there's native DOM support or if you have other view objects you can use the onChange callback to set those.

Collision detection has been in the back of my mind but I've got some bigger issues to tackle first. On Sun, 13 Sep 2015 at 23:26, Juan Martin notifications@github.com wrote:

I'm building a contact app using meteor because it make easy many things and I think popmotion could be an excellent choice to animate the ui. BTW, will you implement collision detecction? El sept. 13, 2015 4:20 PM, "Matt Perry" notifications@github.com escribió:

Hey man thanks! No plans for explicit Meteor support, but I've tried to design Popmotion to support any framework by using custom callbacks. Is there a specific use case you had in mind?

— Reply to this email directly or view it on GitHub < https://github.com/InventingWithMonster/popmotion/issues/68#issuecomment-139914370

.

— Reply to this email directly or view it on GitHub https://github.com/InventingWithMonster/popmotion/issues/68#issuecomment-139923898 .

tinchox5 commented 9 years ago

Thank you ,I tested popmotion with meteor and works fine!

mattgperry commented 9 years ago

Hey man just to let you know, I'm doing a little overhaul of the API at the moment for 3.0. I think you're the only person actually using it at the moment so I'm gonna change the documentation, but I'll be happy to outline the changes for you over the weekend and actually get your opinion on them if that's okay? On Fri, 18 Sep 2015 at 21:23, Juan Martin notifications@github.com wrote:

Thank you ,I tested popmotion with meteor and works fine!

— Reply to this email directly or view it on GitHub https://github.com/Popmotion/popmotion/issues/68#issuecomment-141556751.

tinchox5 commented 9 years ago

Thank you! It's just matter of time I'm sure that your engine shortly will grow in popularity because it's very useful.

2015-09-19 6:17 GMT-04:00 Matt Perry notifications@github.com:

Closed #68 https://github.com/Popmotion/popmotion/issues/68.

— Reply to this email directly or view it on GitHub https://github.com/Popmotion/popmotion/issues/68#event-413861565.

tinchox5 commented 9 years ago

​Matt, I'll be happy to give an opinion on the new changes of popmotion. Martin

2015-09-19 9:31 GMT-04:00 Juan Martín Muda martinmuda@gmail.com:

Thank you! It's just matter of time I'm sure that your engine shortly will grow in popularity because it's very useful.

2015-09-19 6:17 GMT-04:00 Matt Perry notifications@github.com:

Closed #68 https://github.com/Popmotion/popmotion/issues/68.

— Reply to this email directly or view it on GitHub https://github.com/Popmotion/popmotion/issues/68#event-413861565.

mattgperry commented 9 years ago

@tinchox5 Thanks man -

The main changes are apparent here: http://codepen.io/popmotion/pen/WvaRGK?editors=001

I'm trying to cut out mutation of the core Popmotion object. So now actions are generated via class instantiation ie ui.Tween, ui.Track and ui.Simulate and these instances are passed to start and then to chain.

They can still be overridden using an extend method.

Under-the-hood these classes are still just providing properties to the Actor, but the long term idea is that the Actor would stop caring about what actions are currently happening and the Tween/Simulate/Track action classes would track the actual transitions. It'd be easier at that point to apply multiple actions at the same time (so you could rotate an object via a Tween/Simulate while it also follows your pointer with a Track).

The other major change is you can see all the action definitions are using values rather than path - elements are being auto-detected now and are being given the appropriate Role. These can be manually overridden, for instance to change something's attributes instead of its css you could do:

new ui.Actor({
    element: document.getElementById('foo'),
    as: ui.attrRole
});

I've left play track and run in there possibly as deprecated, they're quite nice shorthands for small stuff, so rather than actor.start(new Tween(yourProps)) it can be actor.play(yourProps)

tinchox5 commented 9 years ago

Hi Matt, I think the new changes are pretty good! Specially, they are useful to keep the code clean with complex animations! On the other side, many of the copeden animations are not working , surely because you are making changes right now. I dont know if play, track and run should be "alive".. I mean your new proposal is still easy to implement. But maybe you are right and its good to keep them working.

2015-09-20 4:14 GMT-04:00 Matt Perry notifications@github.com:

@tinchox5 https://github.com/tinchox5 Thanks man -

The main changes are apparent here: http://codepen.io/popmotion/pen/WvaRGK?editors=001

I'm trying to cut out mutation of the core Popmotion object. So now actions are generated via class instantiation ie ui.Tween, ui.Track and ui.Simulate and these instances are passed to start and then to chain.

They can still be overridden using an extend method.

Under-the-hood these classes are still just providing properties to the Actor, but the long term idea is that the Actor would stop caring about what actions are currently happening and the Tween/Simulate/Track action classes would track the actual transitions. It'd be easier at that point to apply multiple actions at the same time (so you could rotate an object via a Tween/Simulate while it also follows your pointer with a Track).

The other major change is you can see all the action definitions are using values rather than path - elements are being auto-detected now and are being given the appropriate Role. These can be manually overridden, for instance to change something's attributes instead of its css you could do:

new ui.Actor({ element: document.getElementById('foo'), as: ui.attrRole });


I've left play track and run in there possibly as deprecated, they're quite nice shorthands for small stuff, so rather than actor.start(new Tween(yourProps)) it can be actor.play(yourProps)

— Reply to this email directly or view it on GitHub https://github.com/Popmotion/popmotion/issues/68#issuecomment-141757396.

mattgperry commented 9 years ago

Hey man - could you point to a couple of CodePens you've found that aren't working? You're right, I'm currently going through the guides and CodePens and rewriting them, but they should only point to the new version when I've rewritten it so I shouldn't have left many broken. So I might have to go through and recheck.

Thanks for your feedback!

tinchox5 commented 9 years ago

Matt, the thing is that por example, http://codepen.io/popmotion/pen/WvaRGK, is working in Chrome, but not in Firefox (vs 40.0.3). The color change to red but isn´t drawing the final shape. Earlier I tested all your codepens in firefox.,

2015-09-21 13:01 GMT-04:00 Matt Perry notifications@github.com:

Hey man - could you point to a couple of CodePens you've found that aren't working? You're right, I'm currently going through the guides and CodePens and rewriting them, but they should only point to the new version when I've rewritten it so I shouldn't have left many broken. So I might have to go through and recheck.

Thanks for your feedback!

— Reply to this email directly or view it on GitHub https://github.com/Popmotion/popmotion/issues/68#issuecomment-142043205.

mattgperry commented 9 years ago

Thanks for that Juan! I've made a fix in 3.0 - it's not up yet so the pen will still be broke for a few days - but that issue will be fixed in Firefox now for release. On Mon, 21 Sep 2015 at 19:05, Juan Martin notifications@github.com wrote:

Matt, the thing is that por example, http://codepen.io/popmotion/pen/WvaRGK, is working in Chrome, but not in Firefox (vs 40.0.3). The color change to red but isn´t drawing the final shape. Earlier I tested all your codepens in firefox.,

2015-09-21 13:01 GMT-04:00 Matt Perry notifications@github.com:

Hey man - could you point to a couple of CodePens you've found that aren't working? You're right, I'm currently going through the guides and CodePens and rewriting them, but they should only point to the new version when I've rewritten it so I shouldn't have left many broken. So I might have to go through and recheck.

Thanks for your feedback!

— Reply to this email directly or view it on GitHub <https://github.com/Popmotion/popmotion/issues/68#issuecomment-142043205 .

— Reply to this email directly or view it on GitHub https://github.com/Popmotion/popmotion/issues/68#issuecomment-142063215.

mattgperry commented 9 years ago

@tinchox5 I'm pretty close to releasing 3.0 and because I know you've been using ActorCollections I thought I'd let you know I've removed them in 3.0 in favour of a new Iterator class.

An Iterator has the same each and stagger commands but none of the Actor-specific methods. It also has a new eachIntoNew method which collects the return value of every method call and returns them as a new Iterator.

This opens up the Iterator class to be used with any Popmotion class, or even classes of another framework, or your own stuff. It also makes it clearer when you're working with multiple Actors vs just one, while at the moment there's weirdness like calling 'yourActorCollection.elements[0].element` for instance, to get the raw element of an Actor created as part of an ActorCollection.

I've updated all the CodePen examples but the accompanying documentation and guides will have to be updated over the next couple weeks.

tinchox5 commented 9 years ago

Thank you Matt I'll try your new popmotion asap! For my little experience with it I think it is very easy to understand and powerful to do animations.

2015-09-28 10:51 GMT-04:00 Matt Perry notifications@github.com:

@tinchox5 https://github.com/tinchox5 I'm pretty close to releasing 3.0 and because I know you've been using ActorCollections I thought I'd let you know I've removed them in 3.0 in favour of a new Iterator class.

An Iterator has the same each and stagger commands but none of the Actor-specific methods. It also has a new eachIntoNew method which collects the return value of every method call and returns them as a new Iterator.

This opens up the Iterator class to be used with any Popmotion class, or even classes of another framework. It also makes it clearer when you're working with multiple Actors vs just one, while at the moment there's weirdness like calling 'yourActorCollection.elements[0].element` for instance, to get the raw element of an Actor.

I've updated all the CodePen examples but the accompanying documentation and guides will have to be updated over the next couple weeks.

— Reply to this email directly or view it on GitHub https://github.com/Popmotion/popmotion/issues/68#issuecomment-143765674.

tinchox5 commented 9 years ago

Matt, I'm on holidays, so I couldn't view the new api in deep yet . Just one thing, I think that would be good to show the current version number of popmotion in the website in order to help final users to know if the documentation match with the api. Also, could be useful to give access to old documentation if they use an old version.

2015-09-28 12:41 GMT-03:00 Juan Martín Muda martinmuda@gmail.com:

Thank you Matt I'll try your new popmotion asap! For my little experience with it I think it is very easy to understand and powerful to do animations.

2015-09-28 10:51 GMT-04:00 Matt Perry notifications@github.com:

@tinchox5 https://github.com/tinchox5 I'm pretty close to releasing 3.0 and because I know you've been using ActorCollections I thought I'd let you know I've removed them in 3.0 in favour of a new Iterator class.

An Iterator has the same each and stagger commands but none of the Actor-specific methods. It also has a new eachIntoNew method which collects the return value of every method call and returns them as a new Iterator.

This opens up the Iterator class to be used with any Popmotion class, or even classes of another framework. It also makes it clearer when you're working with multiple Actors vs just one, while at the moment there's weirdness like calling 'yourActorCollection.elements[0].element` for instance, to get the raw element of an Actor.

I've updated all the CodePen examples but the accompanying documentation and guides will have to be updated over the next couple weeks.

— Reply to this email directly or view it on GitHub https://github.com/Popmotion/popmotion/issues/68#issuecomment-143765674 .

mattgperry commented 9 years ago

Yeah I'd like to keep the old docs alive but I'm not sure how to do that with ExpressionEngine. I can definitely look into putting the current version on the site though, thanks for pointing that out.

MichaelFBA commented 9 years ago

Great library @InventingWithMonster

I'm using famous for some physics engine dom manipulation. But would be interested to see how your progresses. Looking forward to it!