How is this implemented?

Question

css

www.newworldgroup.com/proofing/?key=745abc
How is this implemented? There are guesses that it is necessary to use fullPage.js for scrolling
And how such animations are implemented?

Answer 1

1. Curved sections are made by applying transform: skew one way for the block and the other for the content.
2. Animations - change transform: translateX (I would tend to do this not in CSS, but in JS, screwing anime.js, but this is a matter of taste).
3. Next, wrappers with overflow: hidden are carefully added so that the left (with text) and right (with pictures) sides exist separately from each other and there is no need to shamanize with z-index.
4. Scroll here is a purely conditional concept, rather there are several states of the component (each of them has its own set of transformations for elements) and a handler is hung on the scroll that switches the component between them.
5. The main question is "how to adapt it?" should be discussed with the designer.

Answer 2

Follow-up to the previous answer: animejs.com
Great library for animations.