Hello!

Very worried about the question, with the help of which technologies (libraries, frameworks) can you implement animation on the site? I do not mean fade-in / fade-out for small page elements, but animation for large website elements.

There are many examples on the Internet, but there is only one hand at hand: when we click on the menu icon in the upper left corner, the entire current layout decreases and shifts to the right by half of the screen, the remaining half of the screen is occupied by the list of sections that appears. I was very impressed, how to implement, who can share tips?

P.S. I found very scant information about famo.us , did someone know / use about him? As I understand it, the project died a year ago.

P.P.S. I myself develop (try) on Meteor, I use reactjs as a ui-framework, if suddenly there are developers who know animation solutions compatible with these technologies, I will be doubly happy!

I would be very grateful for the answers. Thank you in advance!

  • one
    dig in the direction of css transition and css transform, here the animation is done on CSS: atmospherejs.com Not without the help of javascript, but javascript is usually simple and is needed only to add a class to a click or other event so that the whole animation starts working. - MasterAlex
  • @MasterAlex Thank you for the answer! Can you say that the given example on this site is made using css? There it works so smoothly, slows to the end of the movement, that it is hard to believe. - Oner Ksor
  • one
    non-linear animation is also pretty simple, here are its main types: easings.net - MasterAlex

1 answer 1

I advise you to use GSAP (GreenSock Animation Platform) - one of the best libraries to create a comprehensive interactive site.
The guys from Codrops often use dynamics.js . I have not used it, but you might like it.
List of libraries for animation .

Regarding the example from the menu, this particular animation is done on pure css (only the state switches to js ), very likely manually, without the use of plug-ins.

If the animation on the site is complex, if you need to control the time and sequence of the animations, use the js library.
If the animation is not very large, then you can describe yourself through css . The authors of this example considered that such animation was not particularly difficult, and decided to do everything themselves - reducing the window with content, smoothly appearing menus, etc.