Is it possible to recreate the explode animation from the jQuery UI plugin with only HTML and CSS3?
We would like to include this effect in a PhoneGap app built for iOS devices and prefer a pure CSS solution if possible.
Impossible. You need to have at least JavaScript support for these kind of effects.
Related
While using foundation's tabs what would be the best way to transition the content so it looked like it was sliding left or right? JQuery, MotionUI, or any other ideas?
Foundation Sites currently requires jQuery. So you can still use jQuery.
The best solution is to use MotionUI as it gives you all needed transitions and options and eases the development.
In general it is recommended to prefer CSS before JavaScript as CSS Transitions have a much better performance.
I'm currently trying out angular2's animation and I was wondering what specific advantage they bring over standard css animations/transitions.
e.g. a typical material designed card and hover effects with the box shadows. Most css frameworks use :hover and css-transitions. Is there a particular advantage in using angular 2 animations?
I read somewhere that some css animation properties don't invoke the GPU as much, hence there's somethings delays and lags. What about angular2 animations?
The question is actually more javascript animation vs css animation (because angular2's animations are based on javascript-animation).
The answer is that when you can - use CSS animation.
Modern browsers uses different thread for CSS animation, so the javascript-thread is not affected by the CSS animations.
You can use the HTML5 Animation Speed Test to check the preformance of different frameworks (javscript-based) VS CSS animation in your browser.
In general:
Browsers are able to optimize rendering flows. In summary, we should always try to create our animations using CSS transitions/animations where possible. If your animations are really complex, you can may have to rely on JavaScript-based animations instead.
If you want to know specifically regarding the Angular2 animations - just inspect the element in your browser and check if the animation there is a CSS(transition/animationFrame based or javascript (you will be able to see values in the style attribute change during the animation).
The answer is actually in the docs:
https://angular.io/guide/animations
Angular's animation system lets you build animations that run with the
same kind of native performance found in pure CSS animations. You can
also tightly integrate your animation logic with the rest of your
application code, for ease of control.
It also abstracts away the need to keep track of lengths of animations in order to stagger and avoid overloading the browser, or in chaining animations.
Generally, if you have a simple little thing, CSS is probably easier. But if you are consistently doing animation in your app you get a lot of power with little down-side from Angular Animations.
I want to dive into the wonderful world of .svg animation for the website I'm working for.
I'm looking to do an icon that animates on hover. I have found multiple tutorials that can all help me out, however, I noticed that there are a lot of different ways to achieve an svg animation.
I can find very little info on what is the most supported way to animate an svg. Is it with a js library? The animate tag? css animation?
A js library seems best to me, but I like the idea of using css as well. Can someone tell me more about the browser support of these methods?
There are lots plugins are available to animate svg.few are listed here
snapsvg
GSAP
segmentjs
you can checkout crossbrowser compatibility here.
I am looking for a way to produce the jQuery mobile horizontal page transition effect on a mobile site without using the full JQuery lib. Does anyone know of a solution using a much smaller stripped down specific JS script? We are trying to keep file sizes to a minimum.
I found a decent solution to this.
Check out 'Non-Jquery Page Transitions lightweight' by fasw.
Demo here:
http://www.fasw.ws/demos/transitions1/slide1.html
And source here:
http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/
This is 1.7k of JS producing transitions that are just like those produced by the whole mobile jQuery Lib.
I had the exact same question; take a look at the accepted answer by Jasper on my post here.
You could also look at the decoupled widgets here.
I want to produce a sort of select/resiz border when some on click on the div, and when i move mouse over that the cursor should change accordingly. I want the user to be able to drag the element border and the element re-size accordingly
thanks....
You cannot do that with pure CSS. You would have to use JavaScript. I suggest checking out a JavaScript library like jQuery.
Have a look to this jQuery plugin:
Resizable Plugin Demo
This is not something which CSS can do by itself. Javascript is needed to do this sort of behaviour.
If you want to implement this, take a look at the Resizeable function of the jQuery UI library. http://docs.jquery.com/UI/Resizable
This is not a job for CSS. CSS is (mostly) for styling only, not functionality.
Check for example the JQuery resizable plugin. It should be what you need.
As others have mentioned, this isn't something that can be accomplished by CSS, which is presentation only. Have a look at Yahoo's excellent YUI library and their Resize Utility, here is an example:
http://developer.yahoo.com/yui/examples/resize/simple_resize.html
There is a very nice demo of using jQuery to do what you are looking for. It uses the jQuery Resizing with images CSS and a few other things. Take a look at Layout