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

What is Framer? Join the Community
Return to index
Matthew Joseph Kulp
Posted Sep 12 - Read on Facebook

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?

23 Comments

Justin Mariano

Well, you could use framer on the web. You can get the framework from their github! Framer Studio (the program) is just a realtime coffeescript compiler that packages your animations in a neat little container. You could take the framework apart and just use what you need. Framer Studio is just using JavaScript and HTML/CSS to make the prototypes you create.

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.

Matthew Joseph Kulp

So helpful! Taking the Framer framework is a great idea but maybe too involved for me at the moment.

Checking out Greensock now.

Justin Mariano

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!

Jordan Robert Dobson

The thing is most times you want to define your CSS animations in css.

Jordan Robert Dobson

Velocity.js is pretty nice though.

Matthew Joseph Kulp

Checking it out! Thank you thank you

Anatoliy Gorskiy

Check out Greensock's TweenLite library, it's very fast and easy to use for animation

Matthew Joseph Kulp

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.

Matthew Joseph Kulp

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. :)

Jordan Robert Dobson

Should look into what Framer uses.

Matthew Joseph Kulp

Definitely a good thing to do!

Rory Smyth

Second gsap. When you start using timelines you'll never go back

Harold Kim

+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.

Harold Kim

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.

Cole Townsend

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.

Jordan Robert Dobson

Harold Kim... Can't you just do layer.x += 50? Or layer.x -= 50?

Sergio Majluf

why not use framerjs directly on your web page?

Josef Richter

React and React Native have now solid Animation APIs..

Harold Kim

Jordan if that works, it must be a new addition. i'm excited! i'll give it a try tomorrow.

Callil Capuozzo

Justin Mariano hey can you share any more details how you setup your phonegap project?

Justin Mariano

sure! I built out the proto using the framerJS JavaScript framework (in plain js, not in framer studio), and had the container of the project stripped to just the content (no device framing). You can then drag and drop the package of project files (all the html, css, and js) right into phonegap and push it to iOS.

Jordan Robert Dobson

Ooooh.

Irwansyah

Well, this kind of thing is the reason I built my SimpleLayer.

Read the entire post on Facebook