How to determine landing page dependencies?

Question

css

Good day.

My question is quite simple, but I do not expect a clear answer how and why. I just want to listen to the thesis arguments of people with experience.

I myself am a front-end developer. I write in react
My girlfriend is taking a rather interesting course on ux / ui, and according to their program, pretty soon a bunch of interesting layouts will fall into my hands, which will need to be laid out and programmed. Some of them will remain in the portfolio as examples of the designer's work (with empty links and buttons), some will become her portfolio site, and some will be mine :)

So far, the following is clear: there will be a lot of animations. From a custom cursor to a game with typography.

Having searched Google and telegram channels, I found about 20+ libraries for various animations.
All of them are approximately similar in API, but according to reviews, each is better than the previous one.
Having looked at similar sites in devtools, I realized that they all use a certain GSAP as one.

I read the doc, tried it as a first approximation - it's quite difficult to start like this right away. Threejs is better. We need something simpler.

After a little thought, I decided to do it all in react, because. he is more or less familiar to me. I looked at framer-motion and seemed to be satisfied, but there was a question of using react for landing.
Perhaps you should use next or getesby (I have not worked with either one before).

Actually the question: there will be many different sites. Not the fact that all will be landings. There will be a lot of animation when scrolling, transitions, and the elements themselves. There will be a lot of different fonts. I want to set up a starter, in which I will immediately include all the necessary libs, my folder structure and some minimal configs.
What stack of libraries to use for this? And why?

Updt: I will definitely make my portfolio on react. And since I will be doing it and setting up the project, I would like to unify it for other projects. Will it work?

Answer 1

Horses, people, GSAP, React, Three.js mixed up in a bunch ... It's worth a little systematization of the tools, at least according to the tasks they solve. Without being tied to specific frameworks from the big trinity, we have several classes of tools in the theme of creative sites:

• About ready-made CSS animations - animate.css , Wow.js , etc. There are a lot of dinosaurs from the days of jQuery. Such things are often not in the design theme, but worth a look and forget. Although for sites in the spirit of designer game, like the one that is successfully made in Artemy Lebedev's studio, it may be ok.
  
• About the interpolation of everything and everyone. Here they usually choose between GSAP and Anime.js . The first option is more confusing, there are useful plugins, the second is simpler, but also good, in some circles even more popular. For very simple tasks - you can write your own tool.
  
• About scrolling, mostly in the context of CSS animations. Locomotive Scroll rules here.
  
• About transitions between screens. Roughly speaking, a pumped router. The most popular one is Barba.js . There used to be Highway.js, but lately little has been said about it.
  
• About exporting ready-made animations from animation software. Here you need to build on the software. Usually the question arises in the context of AE and simple cartoons - here Lottie , they say, is not bad. But you need to advise the designer in advance on the topic so that he doesn’t paint too much.
  
• About data visualization. Here it is useful to know about d3.js , mainly for the sake of ready-made examples.
  
• About three-dimensional WebGL, so as not to write everything by hand. The most popular option is Three.js , mainly due to the ecosystem and the mountain of ready-made solutions, but there are alternatives for any kind and color. For 2D effects, nothing at all is needed in most cases.
  
• Plus, do not forget about all sorts of auxiliary things like WebFontLoader , Hammer.js , LeaderLine , etc. They do not apply to animations, but they can be useful in work so as not to write everything yourself.
  

But the most interesting thing is that these tools do not do the job on their own. They are just auxiliary things, so as not to write some template pieces of projects yourself. Very often you can replace one with another within a specific class of tasks, and the complexity of the final work that needs to be done will not change in any way, because the real difficulty lies in the unusual layout, where you first need to understand what needs to be done there, and how exactly - already it doesn’t matter, in tricky mathematical calculations, in adaptability, where you need to shove the unpushable, in issues of accessibility in the context of a specific design, in performance and the ability to prevent problems with it at the design stage, in fixing cross-browser problems that appear quite suddenly, etc. .d. These things are not very automated.
In general, guessing the entire stack many projects ahead the first time, without having the slightest idea of ​​what will be needed there and what is not, most likely will not work anyway, so it may be worth trying different things in different projects (especially we are talking about non-commercial projects, you can afford it), and look at what options there are in general in different classes of tasks, and what they help to do and what not.

Answer 2

Thanks to all. Who also faced a similar abundance of choice, I will say that my choice fell on: nextjs, styled component, locomotive scroll, framer motion, and adobe after effect for the preloader and GIF

Answer 3

using React for landing - in short: debilizm.
70-80% of animations are done without frames. A question in specific tasks. Which are not. In short: what a question, such an answer.
"Are bananas delicious?" - It's not the same for everybody.