Rotate and translate
It is important to see that order is matter. Rotating 90 degree along the z-axis, followed by translating 200 pixel along the x- or y-coordinate, it is not the same when translating 200 pixels along the x- or y-coordinate, followed by rotating 90 degree along on the z-axis.
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: {
rotate: {
100: "90deg"
},
translateX: {
100: "200px"
}
}
}
},
".box2": {
markers: true,
indicatorStart: 50,
indicatorEnd: 50,
keyframes: {
transform: {
translateX: {
100: "200px"
},
rotate: {
100: "90deg"
}
}
}
}
});