I ran into this beautiful UI mockup on Behance and am very curious about the best way to implement this.
https://www.behance.net/gallery/25264659/Google-transitions
Essentially, I would like my search bar and logo to animate up to the top exactly like this after the form (aka the text input) has been submitted.
My app is an Angular app, so would it be more practical to create an Angular directive? Or implement this with pure CSS or JQuery (independent from Angular)?
Your animation will be independent of AngularJS. In regards to performance of the animation JQuery is by far the absolute slowest. The standard would be to use CSS transitions / animations. If you are not comfortable with CSS then user something like velocity.js. It has a syntax similar to JQuery but used window.requestAnimationFrame making it potentially even faster then CSS.
All Angular would be used for would be used for would be to call the animation or add / remove a class to cause the CSS transition to animation when the search is underway.
As for the animation itself I unfortunately cannot help much with, those things tend to take a lot of effort to get looking good.
Related
I am trying to add svg animations to a react application, the type of animations that I would like to create is similar to the ones seen on discord.com
specifically Im talking about the animation of the black characters here
https://discordapp.com/gamebridge
I tried to read the code, obviously its done using something like gsap or react-motion since they use react.
But my question is how could they have precise control and timing on the svg?
I also noticed that the animations stop if they are not into view, is this an optimization technique used by the web developers or is it a browser specific feature?
Thanks.
While I understand that Angular 2's animate is primarily used to animate the transition between states in a fixed time, this is not always what is most convenient.
In my case, I have a slide-able element, that I wish to animate based on how far I have moved it from its default position. That is, I want to provide the handler dynamically with, for example a float number between 0 and 1 representing how far along the animation I should be. Can the angular 2 framework handle this? Can I perhaps, somehow, bypass the default animate(time) property, and directly call the underlying function that changes the css?
I'm not 100% clear on your problem, but I don't think what you're asking for is possible with Angular animations. Angular's animations are built on top of the Web Animation API, which itself is just a streamlined means of interacting with CSS Animations. CSS animations are defined with keyframes + durations (see https://css-tricks.com/almanac/properties/a/animation/).
Theoretically, you could create a complex set of keyframes that you "stepped through" based on the position of your slide-able element, but it would be a hack and not really what you're asking for.
To accomplish your goal, I think you'll need to use custom Javascript or find an outside library to help you. You're a little vague on the project details, but, as an example, a library like Tether might help you.
I've come across this webpage: http://www.wsj.com/ad/cocainenomics
It shows exactly the kind of animations I would like to learn to create.
Nothing massively complex, just elements or layers coming in while the user scrolls the page (don't consider the 'powder' animation on hero visual).
What technique / programming language / js-based library would you expert animators advice as the best option to achieve this?
I'm considering:
pure jQuery animations
jQuery triggered css3 animations
a velocity.js-based approach with minimal jQuery use only for chaining an animation call onto a jQuery element object
What approach between these you guys deem to be preferable? Or do you have something else in mind?
Do you think that the mighty power of velocity.js is disproportionate for animations this simple? I've seen velocity demos and they are way more complex than the scroll-based animations the above website includes.
I've found success with Skrollr before for this sort of thing:
Check out the demo at https://prinzhorn.github.io/skrollr/
Look at the code at https://github.com/Prinzhorn/skrollr
EDIT: I've just looked at the Skrollr docs and noticed it stopped being maintained about a year ago. A quick Google brought up ScrollMagic as a possible alternative. I'd also recommend digging into the source code of the example site you provided, and seeing if you can get an insight into what they've used!
Velocity.js isn't necessarily something you'd go to specifically for the kind of scroll-position-based animations you're looking for - it's just an alternative option for doing the same as you'd do with jQuery's animate() but with behind-the-scenes magic to make the animations more efficient.
Strictly speaking, StackOverflow probably isn't the best place for this type of question (see the guidelines for questions over at https://stackoverflow.com/help/dont-ask) - so your question might get flagged by moderators!
please check this, https://codyhouse.co/gem/vertical-timeline/ i believe its exactly what you are looking for, check the demo here : https://codyhouse.co/demo/vertical-timeline/index.html
i believe its a pretty simple option, since its free and its fully customizable.
(also its almost only css with a little jquery)
Say you've got a menu that toggles open and closed with a button. My standard way of going about this would be to write the CSS for a closed menu, and write Javascript that specifies (or animates to) an open menu state.
Lately I've gotten into Active.js, a client-side MVC framework. It provides for view classes with builders for making DOM fragments, and those fragments can be given methods that handle things like animation and DOM state.
Something feels wonky about describing the initial state in CSS, and then describing alternate states in JavaScript. Without animation, it would be sensible to just do it all in CSS and just use javascript to add or remove DOM classes.
My other idea is to describe all of the states (folded, unfolded, red, green) of a DOM object in JSON (rather than CSS) and give my ActionView object methods for animating between those states. Is anybody doing this? Other ideas?
As far as animation goes, it wouldn't be a violation of DRY to have basic styling in CSS and then the animation or styling you can't achieve in pure CSS in javascript because you still don't have any repetition if done right. If you think its a more "pure" way to do things you can try to keep more of the styling in javascript or CSS, but those are just the languages you are using and if you consider them both expressions of the same underlying DOM its entirely appropriate to use the more expressive or compatible language wherever needed.
I typically take CSS as far as it will go and then start using jQuery to do the things that CSS can't handle or are not cross browser, like animations.
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.