How do I get Skrollr to rotate then translate instead of doing both at the same time?

Question

This works for me but not quite what I want to achieve.

data-0-start="transform: rotateX(-90deg) translateX(0px)" 
data-300-start="transform: rotateX(0deg) translateX(100px)"

I would like to have something like this, where the element first rotates, then translate. But this doesn't work.

data-0-start="transform: rotateX(-90deg) translateX(0px)" 
data-300-start="transform: rotateX(0deg)"
data-500-start="transform: translateX(100px)"

What am I missing here?

Answer 1

Try it this way:

data-0-start="transform: rotateX(-90deg) translateX(0px)" 
data-300-start="transform: rotateX(0deg) translateX(0px)"
data-500-start="transform: rotateX(0deg) translateX(100px)"