Example
Squeeze Box Scroll
This example demonstrates an accordion-style interaction built in Storyline and enhanced with GSAP-powered scroll animation. As the learner scrolls, each panel expands smoothly—like a squeeze box—revealing layered content in a clean, responsive layout. The interaction is ideal for presenting structured information such as procedures, key concepts, or step-by-step guidance while maintaining engagement through subtle motion and intuitive navigation.
4 Replies
I really like how smooth the interaction is, larryvanwave-ff . It’s very well done. And since I really like your demo, I have a question: it seems to me that the logical and natural gesture would have been to scroll down to expand the four tabs, and up to collapse them. I’m curious to know why you chose to do it this way.
Thank you for taking the time to view it, and I really appreciate the encouragement and thoughtful question. My thinking behind the interaction was to create a more sequential experience for the learner, almost like a gradual reveal of the content as they progress through the page. By having the panels viewed in this way, it creates a bit of a “revealing” effect that guides attention to each section in order. But, I am going to look into updating this with them all collapsed and then reveal as the user scrolls or clicks.
Love this interaction, Larry! I like how smooth the animations are.
Agree with all the comments! Very smooth! I wish my brain would conceive of something like this.
Getting Started with the E-Learning Challenges
Find practical answers to common questions about the E-Learning Challenges, a weekly event that helps you build skills, create your portfolio, and grow as an e-learning professional.