Storyline 360 Crash Course on animation and interactivity using GSAP & Javascript

In this video tutorial, we'll go through a few projects that will help us understand how to implement GSAP to create complex animations, emphasis animations and enhanced interactions in Articulate Storyline 360.

GSAP (Greensock Animation Platform) is a Javascript code library that is already integrated into Storyline, which makes it easier for us to animate our slide objects with code to increase interactivity and perhaps cut down on development time for our e-learning projects.

This should be an interesting topic for intermediate to advance elearning developers using Storyline.

Hope you enjoy these tips and tricks. 🙂

An alternative solution to the resizing issue can be resetting the slide with Javascript when the window is resized. More details in my video here:    • How to Reset Slides in Storyline 360 ...  

-----

Chapters:
0:00 Intro
2:34 Prerequisites
4:39 What we'll cover
6:25 Setup for our first project
7:34 Changing an object's position with gsap.to
18:00 Selecting one or multiple objects
19:44 Other GSAP methods (from, set, fromTo)
24:22 Increment position on each button press
26:28 Easing
29:51 Special GSAP properties
37:27 Animating opacity
52:40 Animating scale around transform origin points
59:36 How to rotate objects
1:05:47 Rotating in 3D space
1:07:14 Stagger - sequencing animations
1:14:53 GSAP timelines
1:25:01 Controlling slide object animation with a slider
1:43:43 Slot machine-like counter
1:51:53 Animating large groups with a slider
2:04:27 Card flip animation
2:18:56 Animating variable values
2:29:20 Image carousel
2:34:20 Resizing issues & possible solutions
2:50:37 Spin wheel of fortune to random number
3:02:09 Complex sequencing exercise with callback functions


Code available here: https://learnomancer.com/posts/storyl...

#storyline360 #storyline #articulatestoryline #javascript #gsap #gsapanimation #elearningdevelopment #instructionaldesign