I was in California last week to conduct a training course. On my way to San Francisco airport, I passed by the Tesla car plant; that’s where the Model S electric cars are built. I had seen one of these awesome, fully electric (not a hybrid) sedans up close once. If I ever win the lottery, I’ll buy one for sure! After check-in, I had some time to kill and revisited the Tesla website. Turns out they will soon release a new model. The webpage that describes the upcoming Model X included a neat Javascript-based interaction that lets you open and close the car’s wing-like doors.

I thought this interaction could easily be replicated with a Storyline slider. Here is the result.  It was ridiculously simple to do, the most time-consuming part was saving the images from the site.

I added a slider with custom thumb, an image object with states and a bunch of triggers to switch image states as the slider variable changes. By the time they announced pre-boarding, my slider interaction was completed, tested and uploaded to my site! Now, if I could only make my carry-on bag  fit into this idiotic sizing thing 🙂

Edit 10/20/2015: I happened this SketchFab 3D model of the Tesla Model X today and did a qucik test to see how this woud look inside Storyline. Here is the testfile. I simply used the model`s embed code and added it to Storyline via the Video from Website function.

Edit 09/2016: Since several people asked for the Storyline source file, here it is.