translateX to left of viewport

Question

Is there a way to translateX to the left side of the viewport? I need to use CSS animation using translateX rather than left.

Here is a codepen that approximates what I am trying to do, using the velocity.js plugin. The problem is that I want to animate translateX to the top left of the viewport, but am not sure how to calculate that..

Here is the relevant javascript where I am setting translateX:

.setVelocity(".animate-it", {translateX: '[THIS is where I need help]' }, {duration: 150})

Thanks for your suggestions!

Answer 1

Myabe set the inital position top left and store it in a class, and do the same for the second state (put it in other class)...And then, via javascript, change the classes that you want applied.