I'm trying to create animations on a canvas.
They are similar to animating top on an element.
I want the simplest possible library for animations.
Ideally I would like to send in duration, easing and a function which gets called with a percent.
I've tried Animator.js which does what I want but it is unmaintained and is quite laggy.
Most libraries I've seen are over 10k minified and do pretty much everything except what I want.
Are there any good, small and efficient libraries for this out there or am I going to have to write one myself?
http://coderepos.org/share/wiki/JSTweener
This is a very light one I use. The only thing I would like added to it is removeTweens(...).
Related
Example
Video Example
The lack of selection styling in paperjs makes you improvise and one way to style them, is to create them yourself ( recommended on this post).
But the huge con with this is the performance! Where canvas quickly goes from usable 60fps to terrible 20 within seconds. Now the only method I thought would work to style your handles/points, is now useless.
Now I'm out of ideas as to how style them and I'm trying to seek the help of stackoverflow... The main thing that I want to achieve is the hover effect on handles/points . At this point I coded the most of the stuff in paperjs, and I really wouldn't want to switch everything to something else like PixiJs.
P.S Any help is appreciated!
In your video, the frame rate goes down because you draw a lot of paths and this would also happen at some point even with the native Paper.js selection.
So your only chance is to try to have as few as possible shapes in your scene.
Maybe you can take advantage of the less known features of Paper.js to reduce them a bit:
item.selectedColor
paper.settings.handleSize
Then, there is also the possibility of using SymbolItem for repeted shapes (like your circles) that should have better performances than regular paths.
Finally, if you're out of solutions, you could also fork the library and hook into the selection drawing code to adapt to your needs :).
I have been spending about 7 hours today, trying to:
a) Create my own carousel using intensive javascript and CSS3 features (see this pastebin)
b) Setup and integrate the Roundabout plugin from FredHQ
c) Setup and integrate the Cloud Carousel plugin from Professor Cloud
Both third party solutions were tried because i failed in accomplishing what i wanted by myself. Unfortunately, both solutions do not work the way i would require them to. Both are amazing for displaying images, but i need to show more complex content, a heavily styled DIV with multiple encapsulated DIVs inside, PNGs with transparency, and so forth.
FredHQ's version did not work as it did not scale the content inside my DIVs. Not even the text was scaled, until i removed the font-size parameter, but that is something i need for a proper layout. Cloud's version works with images only.
I have hit a wall and i cannot seem to find any other solution. It seems the word "carousel" is used for slideshows and sliders, so i find hundreds of such solutions, but not one that works like i need it to.
What i need is decreasing opacity on further objects, while the center one is at full opacity. Also further objects should be scaled down by certain scale factors. It does not have to be 3D (not desired, even), but due to the scaling it would look 3d-like.
It does not have to be jQuery, although its probably a good idea if it is.
Does anybody know or can anyone point me to a proper solution?
Have you looked at monete(git), http://www.jacklmoore.com/monte? 184 line. Not sure you'll find something easier to dig into and make it work your way. Hundreds of solutions? So I'll take it you looked at the cycle plugin as well. That's probably one of the most mature and robust ones out there. You're asking for a lot in your question and these kind of question just wear people out after a while. That's all.
You probably won't find anything that fits your needs EXACTLY and you'll have to roll it yourself or hire someone. If you get something going and come back for specific help, you'll fair much better.
http://www.html5canvastutorials.com/webgl/html5-canvas-webgl-plane-with-three-js/
In this example its just a rotating plane.
I'm an html 5 beginner :)
However, look at how many calculation does the JS code.
I dont have any trouble with it.
but this is how its gonna be ? ( while learning html5)
for every animation I should look for the js code ? ( and try to custom it to my needs) ??
and if so , is there any centrelized place of general scripts for html 5 animations ?
Depends.
Using canvas and JS, probably. The code is just a raw drawing board, so it is subject to the same drawing code you would using in most similar scenarios. three.js (as used in that example) is used to make things easier, and having a 3d drawing context for canvas will help, but it will be pretty much the same thing as three.js (it may be even using it, I don't know. Haven't used it before).
However, that said, for simple things like that, CSS 3 3D animations will make things possible. You can modify things like perspective and rotation and get effects like that. So it depends on what you will be using it for.
If you can get away with CSS and elements, than it can be pretty easy (keyframes and CSS styles). But if you're looking for more complicated 3d effects, than yes, it will be more complicated.
I'm searching for a plugin, library or just a custom JS function that will enable the manipulation of images so that they look like they're winding around a roll of paper.
If it's hard to imagine, think of a paper towel roll standing up spinning. I already know of jQuery Roundabout but that only moves the images. I need them to actually be distorted as they roll around. I can't seem to find anything of the sort.
Thanks!
I'm not sure of any plugin that does that, but I'd recommend learning about the canvas element and its JavaScript API.
I'm considering attempting a redesign of a flash website with jquery effects and transitions in place. I just wanted to reach out to the community to maybe see how feasible this really is considering the particular transitions and effects this website has.
Here's the link:
http://antonynicoli.com/english.html
The gallery I guess can be recreated by carousel plugin, but there are so many out there so maybe could suggest a stable one that would be be best suited to this job. The other items that really caught my attention in which I wouldn't really know where to start is the navbar and the effect that looks like a book opening when you click on a link on the navbar. Any and all input would be appreciated. Thanks.
This is probably doable, but I'm wondering about the motivations behind changing to an HTML/jQuery solution when it looks pretty good right now (as Brad pointed out above, it would require a total rework). I see a couple of things going on:
Carousel: jCarousel (http://sorgalla.com/jcarousel/) (never used it but it is popular)
Animations: jQuery Animate (http://api.jquery.com/animate/)
Other widgets/interactions: jQueryUI: (http://www.jqueryui.com)
Not sure how you would go about the open-book animation, but I suspect you could accomplish it with some clever jQuery animations.
The best way to see if it could be done is: start doing it! jQuery has tons of resources and you'll get good help here on StackOverflow.
After looking at the site i do believe most of the effects can be recreated fairly well using jQuery. Of course, your end-result might not be as smooth as the flash implementation but i think it can be done.
If you look at using HTML 5 i believe a lot of animations such as page transition with the opening book can be simulated with the canvas element. Same with the navigation elements.
https://developer.mozilla.org/en/canvas_tutorial
http://diveintohtml5.ep.io/canvas.html#divingin
As you mentioned some of the effects such as the carousel can be recycled from existing plugins. The only holdback really is how much time do you want to invest in porting a design to a language not as well suited to do the job. jQuery is an excellent framework but it is far from a drop-in replacement to create effects that are trivial to create in Flash/Actionscript.
the whole site can be done with jquery. all you have to do is map out all the animation done on the site and write it on paper. then look for the jquery alternatives online and check them off one by one. some things might not be exact but it will do the job.