Translate and scale

It is important to see that order is matter. Translate followed by scale, it is not the same when scale followed by translate.

The related content can be found with more information here and here.

One or more of the CSS transform functions to be applied. The transform functions are multiplied in order from left to right, meaning that composite transforms are effectively applied in order from right to left.
let SC = ScrollMoo({
    ".box": {
        markers: true,
        indicatorStart: 50,
        indicatorEnd: 50,
        keyframes: {
            transform: {
                translate: {
                    100: "100px"
                },
                scale: {
                    100: 2
                }
            }
        }
    },
    ".box2": {
        markers: true,
        indicatorStart: 50,
        indicatorEnd: 50,
        keyframes: {
            transform: {
                scale: {
                    100: 2
                },
                translate: {
                    100: "100px"
                }
            }
        }
    }
});
Copied!