I’ve Been Watching Quite A Lot Of The D23 Expo This Weekend…

So it’s no real surprise where my mind was at the time I saw this week’s ELH Challenge topic!

The scrolling panel object is one of my favourite development tools in Articulate Storyline as until fairly recently, when I started to focus on expanding my JavaScript skills, I hadn’t realised the full potential that exists for building creative interactions that come just from the act of scrolling. I really have the ELH community to thank for starting me on this path to discovery.

What I was interested to explore this week was whether the scrolling panel (or at least the contents) could somehow be tilted along the X-Axis to create the classic Star Wars opening crawl.

I definitely feel this can be possible with further development in GSAP, but the more I investigated the results it appeared that the browser could not do a good a job of anti-aliasing the font in this orientation. Therefore I decided to step back a bit and create the entire experience as a single video animation, but still contained and played within the Scrolling Panel object.

As is usually the case with these prototype projects, I seemed to be done and dusted until I looked at the result on mobile… a completely blank screen this time! No video or scrolling panel to be seen. WHY!?

To cut a long story short there appears to be an issue with trying to play and pause HTML video elements that are not set to initially autoplay on iPhone. So once an autoplay attribute is added to the tag, I could then apply further IF statements to check if the user is on a touch device and then immediately pause in order for the scrolling panel to take over timeline scrubbing using GSAP.

If you happen to check out the project on both desktop and mobile you will actually see that there is no arrow pointing to the right-hand side on mobile (because ultimately this direction didn’t make sense for mobile users). This is perhaps one of the nicest take-aways that I learned from making this project, which is the ability to show/hide or change attributes of elements (like video sources files) in Storyline depending on the user device.

Perhaps one day we might get a tickbox on the SL360 timeline to optionally show/hide elements on either Desktop, Tablet, or Mobile device. That would be a useful addition but for now, and like most things that can’t be done out of the box with Storyline, there is usually a way of hacking the result using JS!