Width and translate
Translating element on x-coordinate with a percentage value refers to the width of the element. Translating element on y-coordinate with a percentage value refers to the height of the element. To achive the same result and for better performance if it's possible use scaling ( see blue box at the example below ) instead of width or height, that helps for the browser to spend less time to recalculate layout.
let SC = ScrollMoo({
".box": {
indicatorStart: 50,
indicatorEnd: 50,
keyframes: {
width: {
100: "200px"
},
transform: {
translate: {
100: "100%"
}
}
}
},
".box2": { // transform-origin: center left;
indicatorStart: 50,
indicatorEnd: 50,
keyframes: {
transform: {
scaleX: {
100: 2 // or "200%"
},
translate: {
100: "100%"
}
}
}
}
});