What is Reddit's opinion of
Animate.css?
From 3.5 billion Reddit comments
➔ Animate.css website
By popularity on Reddit, this Service is:
31 reviews of this app found across Reddit:
Animate.css is a good library of CSS animations. After loading it onto the page, you can put a class like bounce-left on an element, and it'll animate as it comes into view.
If you're looking to create your own CSS animations, CSS-Tricks has a lot of articles about it. MDN is a good resource too.
Animate.css is being included as an external stylesheet. You can see the external css when you click settings, then the css tab.
​
Doing a layout in bootstrap? Sure, just about anything is possible if you know what you're doing. As far as animations go, you'll want to add in an animation library. I've used Animate.css mixed in with bootstrap in the past with good results. If you want more control you're going to want to go with a JS animation library of which there are hundreds.
Used together, Wow.js and animate.css make this pretty effortless, and smooth because it's CSS-only animations which are optimized very well in browsers. And you have many more options than just fading them in.
- Write a story
- Choose visual content you want to use – hires photos etc – to illustrate it
- Make static page using any desktop publishing software (you can skip this step and make a sketch of what you are trying to create with pencil and paper or even in your mind)
- Learn some HTML/CSS (not much) to convert your static page to static HTML. Just few days of learning even if you are starting from scratch but painstaking enough.
- Use your examples to look into the live code and try to understand how it works and copy it.
- Create your own visually pleasing static webpage
- Look for some javascript libraries that can do animations for you. Like animate.css. If you're lucky enough you can find a library which allows you to create all visual effects you wish without a single line of code.
Here's a secret...
Link the style sheet of animate.css (https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css) into your site. Then do the following...
<transition name="custom-classes-transition" enter-active-class="animated slideInRight" leave-active-class="animated slideOutRight" > <menu-component v-if="showMenu === true"></menu-component </transition>
Ich benutze hier animate.css, es ist also ein leichtes, das ganze anzupassen. Ich habe das Backend noch nicht geschrieben, die verschiedenen Stile könnte man da als Auswahl in eine combo box einfügen.
Danke für die anderen Anregungen. Vor allem mit Textgröße kämpfe ich derzeit noch, auf unserem Infomonitor schaut das ganze nochmal anders aus. Da muss ich noch was dynamisches machen.
Github Repo gibt es leider keines, aber Bitbucket :D.
I think you can use this https://daneden.github.io/animate.css/ or this http://animista.net/ with jquery and add the animated class when the element come in to view or something like this: https://css-tricks.com/slide-in-as-you-scroll-down-boxes/
yea theres probably a jquery plugin for that =]
idk how hard that is tho. adding a css would be easiest. you migh wanna check animate.css out
https://daneden.github.io/animate.css/
this would be a bit easier, just add two classes "animate flipinX" (not sure if its animate or animated)
gl
That is a great idea! thanks! I did use a "library" for this:
https://daneden.github.io/animate.css/
it is a single file which contains pre-made CSS animations (some CSS transitions rules that can be applied using classes) which makes the animations really lightweight and easy to use.
That geekdesigner pager is pretty rad.
Looks like they're using a really tight approach for animated elements, where they're putting animated SVGs into the backgrounds of elements using background-image: url(...)... For other things, like the animated text, they're using simple CSS animations.
You should try looking into something like: https://daneden.github.io/animate.css/
Which can get you started with adding bits of flair to your sites.
It has nothing to do with video taking actually, this is all purely coding through HTML/CSS/Java. I would assume the owner of that website used a CSS (Cascading Style Sheet) to input a code for each element of the website (texts, images, etc.) that will be activated as you scroll, hover, or click through the website. It isn't easy to do and will definitely take some practice.
If you go here, you can see how these different animations work just on plain text but it can also be applied to images and other visual elements of the website.
It has nothing to do with video taking actually, this is all purely coding through HTML/CSS/Java. I would assume the owner of that website used a CSS (Cascading Style Sheet) to input a code for each element of the website (texts, images, etc.) that will be activated as you scroll, hover, or click through the website. It isn't easy to do and will definitely take some practice.
If you go here, you can see how these different animations work just on plain text but it can also be applied to images and other visual elements of the website through CSS.
In terms of existing projects, fair enough, there's not that much you can do about that but I'd still try and avoid it and use the core functionality simply to slowly thin it out of your projects. In terms of compatibility, caniuse.com is great for seeing what is and isn't compatible, but most browsers are pretty damn good nowadays (and if the browser companies are going to be supporting anything, it'll be core JavaScript). If you're having to support IE9 or lower then I'm so, so sorry, but also jQuery might be a valid option there.
As for the jQuery animations I can't talk for those as I've never used them, but modern CSS can do a lot of the stuff jQuery was previously required for. Obviously don't know your exact use case but animate.css shows a bunch of animations implemented purely in css
Wherever possible you should use CSS, not only does this keep your code clean and tidy but it saves on unnecessary loading time for JavaScript files. Clever tools like Animate.css can be used to save time and effort with prewritten code that only requires the class names.
I like the design as it matches their branding but what was that good animation? It seemed pretty standard to me. Couldn't you use Animate.css and Wow.js to create something almost completely similar?
yeah..
one thing, you mentioned design animations. here are some handy libraries if you wanted to add some fancy css stuff:
http://mynameismatthieu.com/WOW/ https://daneden.github.io/animate.css/ http://animista.net/
One thing that might be causing issues: CSS classnames can't have spaces. So <h1 class="animated infinite bounce">Hello World</h1> actually has 3 separate classes: animated, infinite, and bounce.
Another thing is that on its own, animation: infinite bounce; isn't going to do much. When you say "animate.css" do you mean a library (like https://daneden.github.io/animate.css/) or are you building this on your own?
I can't take credit for the site, I bought a template which I then slightly modified to use. I can't remember the name right now but I'll see if I can find it.
It's a html site with bootstrap. The slider is revolution slider. The animations come from Animate.css and they are activated by waypoints activated by appear.js. I thought it was a really cool implementation.
There are couple libraries that I don't make use of but what you see in the source is it apart from the code to catch the POST from the contact form.
If you haven't found it, this is one of best simple animation library out there: animate.css
Easy to implement, just make element invisible with anew made up 'Invisible' class, then make sure all your images are loaded in the div you are fading in. Then just toggle class(invisible fadeIn) Make sure your images ARE loaded though or it looks stupid.
You can also make this fade in or other do animation upon events. Like scroll(500px) or 'element is in view' or some other wizardry. (I haven't programmed in js for while as you can tell)
Great job using react on this! Your search bar is pretty legit, and I love your choice with the icons. It also works with enter keypresses, which is awesome.
Suggestions:
The layout appears to break on mobile screens. You could try using a media query to make the content stretch the entire width of the screen or bootstrap's .container class.
You could place "WikiSearch" above the search bar and use an h1 tag.
Adding some basic styling to personalize it would be great.
You could maybe add a line that tells viewers you created and links to your github/codepen profile.
Adding animations might bring some more life into the project. I often use animate.css by Daniel Eden for quick and easy animations.
Great work! I look forward to seeing more.
If you got time, stop by and check out my react wikipedia viewer too!
There is a easier way, inspect how the browser is handling it, check out the css animations that are being invoked by the classes such as slide.
heres one that I just pulled out of chromes inspector :
.page-loaded .slide.selected, .page-loaded .slide.active, .panel { -webkit-transition: -webkit-transform 1s,opacity 1s; transition: transform 1s,opacity 1s; }
If you cannot discern how to accomplish this with your current knowledge I suggest looking into https://daneden.github.io/animate.css/ and how to mix that css lib with JS to animate HTML Elements and build up from there.
I have. I've rolled my own animations as well as used https://daneden.github.io/animate.css/ which has some cool effects. But I'm looking for some image manipulation options (predominantly scaling and rotating) personally for my own app projects which can be very expensive resource-wise when using JavaScript and CSS.
hehe So am I.
What you do is you go to this site https://daneden.github.io/animate.css/
You can view what the animations look like from where. I customized mine by adding line for opacity and sliding up but that's within the animation CSS.
So you find out which one you like in the preview then click the github link.
Go to the source folder.
In here theres multiple folders for the types of animations. Open the one you want and you will see files for the name of the animation. Open it and copy that animation.
Example of there you go if you want the fadeinupBig animation
Source>FadeIn>openFadeInUpBig.css
So do you remember how in the beginning of the isntructions you copied that animation css and pasted it somewhere? Well, you do the same withthis one. You can leave the old animation in there as its just in there as an animation but if you want to switch the chat line to the new animation you need to change which animation it uses by changing the name to "what ever the animation name is in the copypasta from github.
I forget the line that determines which animation the chat_line uses but I think its like -webkit-animation: "name here" I cant few the pastebin at the moment.
That should get you started on it. Beware, some animations don't work well with it and I'm not sure why. The Bounce in animations break the shit out of the chat_line but that might be because I made some changes to it that were probably not correct.
You can do this same thing to twitchalerts but I don't know the CSS lines you add. You'll need to watch the video in the reddit link to find out which fields to put them in but you type the same stuff just different place.
edit: oh THAT fade in effect, fucked if I know lol, that looks awesome though - good luck!
edit2: I think it was done using animate.css fadeInLeft
edit3: very likely animate.css
Have you used Jquery before? If so you should take a look at Animate.css, which is a useful pre-made animation library for css.
If you would then like to make the animation animate on page scroll you should use something such as Waypoints in order to trigger the animations.
Waypoints: http://imakewebthings.com/waypoints/
Animate.css: https://daneden.github.io/animate.css/
It's not a tutorial per se, but Animate.css has a library of short and simple CSS3 animations. The code is on github here and the source is styled in such a way that it's very easy to follow. I think it makes a great starting point. (disclosure: I am not the author but i frequently reference this lib in my projects)
You should probably take a look at something like animate.css if you're new to animations.
Typically I'd suggest something like this "grow down" rather than fade in (which I gather is what the opacity was for). The hard part is you can't do an animation from a height of 0 to auto, but something like this will work:
.category .anchors { max-height: 0; overflow: hidden; transition: .5s max-height; }
.category:focus .anchors { max-height: 200px; }
The main thing to note with this is while you could set max-height to 9999px or something arbitrary, the transition will take .5s to transition between 0 and 9999px, so keep that in mind when picking a transition speed and max-height. There's some minor performance issues involved with this approach, but I doubt you're going for 60fps with a question like this.
wow, i feel dumb now. Ive been trying to over engineer a similar animation with gif loops and a bajillion blank frames.
also, you may want to look into animate.css if you havent already, its a really nice solution.
also, why are you using modernizer? isn't that just a feature detection library? seems like it wouldnt be much use outside of a cross browser scenario :p
Currently I'm using animate.css as the JQuery effects library is being dodgy. Making $(this) bounce causes nearby elements to bounce as well for some reason. I guess importing a separate library is very inefficient, so hopefully I can find a way to make one element bounce on it's own at some stage.
Getting the menu to work was quite hard, however I think a mixture of using both a scroll and click handler has flattened most of the bugs out. If you want to see it isolated, this is the code I used to make it work. In theory it should work, sadly though, in practice, it is sometimes less stable.
Thanks for the feedback though, I will hopefully get round to doing some further development on the portfolio tomorrow! :)
The animations are using animate.css, so nothing I can do about those.
But I will size down the AE and PS logos, thanks for bringing that to my attention.
With the inline css, I just prefer that I put it right there in the HTML file instead of making a ton of different #ids, but I see your point, it might make my life easier in the future.