I have two questions the first is how they managed to make animations and interactions of the following pages and what framework or techniques are used to achieve these results and my second question is where I find books or courses to learn to do this interactions
I think you’re referring to the animated gifs. They are just image files, but have several images that it they loop through. You can see the image itself by right clicking on it and saving it to your computer.
I’m no expert, but as far as making one, of course you can do it in advanced graphics programs like Photoshop or Gimp. There are also ways to make them out of videos - I think there are web sites that will do it for you.
@ksjazzguitar Hi thanks for replying, I did not refer to the gif or the images, nor did I mean the mockups. I was talking about the animations that appear in these representations.
What I am looking for is a course or book that teaches me to implement that type of UX in my web pages, I also want to know which framework or technique is used for me to be able to investigate thoroughly.
I imagine it involves animations in css, svg and canvas but the truth I’m not sure, there also are route changes that look really nice those are something that I would really like to learn how to implement
Maybe I’m confused, the main thing I see animated on that first page is this.
If you mean something else, you’re going to have to be more specific.
On that page there is only that in the following is where more interactions appear, here I put the rest of the examples:
If you are talking about the animations of web pages, going through pages and graphs and such - those are animated gifs. They are gifs, but they look like little movies.
Like I said, if you right click on them (or whatever the Apple version of that is) you can select “save image as…” and save it to your computer. Depending on how you open it, it will play as an animated gif. Or, you can right click on it and hit “inspect” and your browser console will take you to that part of the html and it will confirm for you that it is a gif.
For “how to make them”, see my first post.
That is the animation that I see happening. If you mean something else, please pick one page and describe exactly the behavior in which you are interested.
A graphic designer or web designer could best answer your question. These are mockups of a web app. I’d search for web app mockup tools. There are plenty of paid tools out there - likely nothing good for free.
Your links are from a product design company - they may use many different commercial software with custom in-house tools. You could also just ask the person who created the gifs.
The animation shown is part of the mockup. If you’re asking how one would really implement the animation in a working web app the short answer is javascript and css - the long answer is it depends
A full-fledged professional app will be developed with one or more frameworks - some frameworks like angular have burgeoning support for ui animation - there are many specialized libraries for different kinds of animation - d3 is great for visualization animation
I was also wondering how to implement something similar to those examples you linked. A library like AOS might be useful for a simple “on scroll” animations http://michalsnik.github.io/aos/ . I hope that someone who implemented such interactions would take part in this thread too!
@ksjazzguitar I will try to be more concise, I understand that the images I am sharing are gif generated with special programs for graphic design, what I am interested in is not the image as such but the interactions that in these gif are shown, @ppc well Mentions that there are several freameworks with which to achieve the animations of the UI an example of this is the AOS library that @paweltar mentions.
In the following image I will describe what it is that interests me and I hope someone can mention the name of some book or course to learn how to achieve this
- change of route or section in carousel style
- select a route and this is enlarged nicely
- Perform escroll on the route and launch the next section
- hover effects on links
- Address the texarea space dynamically
I hope someone who has implemented something like this can guide me
I have not tried it but I think all the specific effects you mention can be done in the latest Angular
Can’t speak to react - each animation or transition on its own should not be difficult with the web animations api
Try searching for very specific effects done in web animations - you’ll build up a repertoire and gain better understanding of features in higher-level frameworks
OK, that’s more clear.
Some of the things you describe are pretty basic. For example “hover effects on links” can be just CSS and JS. Rather than trying to find a magic framework that does all this, I would suggest making sure your basic skills are up to snuff. Most of these things can be accomplished with JS and CSS, and yes, there are libraries/frameworks that would make it easier.
There are many libraries and frameworks. Perhaps someone with more experience can identify what’s being used, but I suspect we’d have to see the actual code, and even then it may be difficult. There are lots of libraries/frameworks to choose from. They all have advantages and disadvantages. People argue about them all the time.
You may consider just dropping the guy and email and asking him directly. A lot of people are happy to talk about the things they’ve built.
But I’m guessing that if these things are a mystery to you, then you’re not ready to start using them. Angular is mentioned. I’m sure it can do a lot of this. But Angular is not just something you dabble it. It is a large and complicated framework. It’s very powerful too. React can do some cool things too. At the very least, it has it’s own version of Bootstrap. But make sure you are comfortable with everything that leads up to that level of complexity or you are going to have a bad experience. FCC has a section on React, but not on Angular. But whatever you do, just make sure you’re rooted in the fundamentals. Once you learn the fundamentals, you can begin the long process of trying out different ideas.
We can achieve these type of animations using css3, css3 + JS. Below are some links which you can refer to
Thanks @ppc and @samee.ks is what I was looking for I will try to take advantage of these resources.
@ksjazzguitar you are right it is important to understand the basics, I think that most of the animations (removing the change of route) shown are relatively easy to achieve, but still I would like to know of some book or course that will take me step by step from Hover effects to a fully animated page, to learn I try to find structured courses that go from more to less and that way, learning is as easy as possible (learning should never be difficult) until now apart from the courses already mentioned I found these books
https://www.amazon.com/SVG-Animations-Implementations-Responsive-Animation-ebook/dp/B06XPVW2PP
https://www.amazon.com/Creating-Web-Animations-Bringing-Your-ebook/dp/B06XRMMG64
I hope that if someone else finds some other book or courses about how to make animations and it gets post here and so we beging creating a small list of resources for web animations, I also think it would be very good that part of the FCC extra curriculum would have a mini guide of How to give life to the UI and improve the UX of our pages
If you know basic javascript I could prepare something on animations with angular - DM or shoot an email to the address on my profile if you’re interested