I love building animations in Framer. I hate implementing them in jQuery and CSS transforms...
Does anyone know of a good library, framework, etc? ...something to make animating on the web a little less painful and more like Framer?
using framerjs in html js css is EXACTLY the kind of info i was looking for.. im new to framer and envision that i would have the same concerns as the op
Depending on your restrictions, framerJS may not be able to get the job done for a functional product, however. Building animations with it could present itself as a nightmare in QA (can't speak to it, I've only used it for prototyping). I've had great success with Greensock, which is a HTML5 animation framework. It's very powerful, lightweight, and easily implementable.
So helpful! Taking the Framer framework is a great idea but maybe too involved for me at the moment.
Checking out Greensock now.
Cool! I've done quite a bit with the framerJS framework myself. I was even able to produce a natively functioning iPad app prototype with framerJS and phonegap, so the sky's the limit really. It's just a new framework so it may not be a good solution for implementation.
Back in the web banner days we used greensock a ton. It started out as an actionscript library but was ported to HTML5 after the death of the SWF. Have at it!
The thing is most times you want to define your CSS animations in css.
Velocity.js is pretty nice though.
Checking it out! Thank you thank you
Check out Greensock's TweenLite library, it's very fast and easy to use for animation
hey all- I haven't tried Greensock's yet. I am using velocity.js right now and it's quite nice. What I like best is their documentation, oddly. It's all on one page so I can quickly CMD+F around.. and every part of the documentation has a code pen demo where you can mess with the example in action. It's made it extremely comfortable to get up and running with i.
One thing that is painful.. velocity.js handles it's springs differently than Framer. It's a long game of guess and check - fuggin' blows. :)
Should look into what Framer uses.
Definitely a good thing to do!
+100 for greensock. Being able to sequence, pause, rewind, chain, etc animations is extremely powerful. You get the simple framer-esque syntax, but you can also tween CSS properties like color and 3d transforms.
Unrelated, but another nice touch in greensock (ahem, would love this in framer!): being able to use relative values. eg. move this horizontally 50 pixels from its current location. Very nice if you're applying an animation to multiple items, and don't want to calculate the x/y position for each animation.
I love using velocityJS, it's performs as well as FramerJS in most production environments. Often I'll use a mix of pngs and html that I will animate depending on the elements being animated.
Harold Kim... Can't you just do layer.x += 50? Or layer.x -= 50?
why not use framerjs directly on your web page?
React and React Native have now solid Animation APIs..
Jordan if that works, it must be a new addition. i'm excited! i'll give it a try tomorrow.
Well, this kind of thing is the reason I built my SimpleLayer.