Example
Blur slider
Using GSAP in Articulate Storyline 360, you can create a dynamic slider interaction that controls the blur of an image in real time. By linking a Storyline slider variable to JavaScript, the slider’s value is passed into GSAP, which smoothly animates a CSS filter: blur() effect on the target image. As the user moves the slider, the background transitions from sharp to blurred (or vice versa), creating an interactive focus effect. This approach combines Storyline’s built-in variables with GSAP’s animation capabilities to produce a responsive and visually engaging user experience.
1 Reply
Nice effect. Had to look up GSAP. ;)
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.