How to make effects like on the site example?

Question

css

Greetings!
To improve my skills, I want to repeat this site https://www.roninamsterdam.com/
Interested in effects.
1. Animation of the letter under the photo. How it's done? I suspect that canvas is used. Give similar examples.
2. Paging with the mouse (holding the guides up and down, right and left appear).
Other effects are also of interest. It is clear that css3, js, canvas. Ready-made examples are of interest, on codepen for example, in order to understand where to start.

Answer 1

What is it that draws you all to this canvas? (rhetorical question)
If you are talking about large "transparent" letters through which photographs are visible, then no canvas is needed there. This is done on svg masks - simple and efficient. Accordingly, when moving the mouse, transform: translate is added for the mask. The task is trivial, but I will leave an example for review. The transition between slides is done in the same way.
On mouse click, you hang a handler that shows these elements (I think it's not worth talking about how to change their opacity ). Further, in the same way - on the "drag" event, add transform: translate for all these lines and transform: scale for the circles. When transitioning between slides, add even more transformations to taste.
To draw lines, you can again take svg and .... . This is generally a powerful technique, there are many places where you can stick it. The appearance of inscriptions can be done on CSS animations. There are many options, you can start with this example (just do everything in the opposite direction) or play with the sizes of pseudo-elements placed on top of the texts. There is also a page scroll, but it's easy to google.

Answer 2

There is such a channel Yuri Artyukh , he conducts streams just on the topic of animation.
I think you will find a lot of useful things for this task.