Cool Animations with GSAP Transform Origin & Timelines

Learn how to create more advanced animations in Articulate Storyline using GSAP by mastering two powerful features: GSAP timelines and transformOrigin. In this tutorial, I’ll show you how to control animation anchor points, sequence multiple animations, and build custom effects that aren’t possible with Storyline alone. *Link to Storyline File:* https://www.learningdojo.ninja/downloads Using a fun treasure chest example, you’ll see how to rotate, squash, and bounce objects, trigger state changes, and animate multiple elements like diamonds popping out of a chest—all with JavaScript and GSAP. If you want to push Storyline beyond its built-in animations and create truly custom learning interactions, this walkthrough will show you how. You’ll also learn how to structure GSAP timelines, use transformOrigin for realistic motion, and integrate everything with the Storyline JavaScript API. Sample files are available so you can follow along and experiment with the animations yourself. Perfect for eLearning developers, instructional designers, and Storyline users who want to add professional-level motion and interactivity to their courses. #articulatestoryline #storyline #learning #elearningdevelopment #gsap #javascript *Chapters* 00:00 GSAP Goals Overview 00:56 Setup and Tool Workflow 02:12 Transform Origin Basics 04:49 Fixing with Query Selector 06:08 Origin Values and Examples 08:34 Intro to GSAP Timelines 09:45 Timeline Code Walkthrough 14:38 Adding Diamonds Challenge 15:15 Layering with Groups and Opacity 18:07 Depth and Diamond Animation Logic 21:09 Wrap Up and Resources *🥷 Link to Full Courses* Create Custom eLearning w/ Claude Code: https://www.learningdojo.ninja/courses/early-bird-discount-creating-custom-elearning-courses-with-claude-code Articulate Storyline 360: https://www.learningdojo.ninja/courses/create-elearning-courses-with-articulate-storyline-360 Storyline & JavaScript: https://www.learningdojo.ninja/courses/javascript-articulate-storyline-360 Vibe Coding Fundamentals: https://www.learningdojo.ninja/courses/vibe-coding-fundamentals AI Development in Articulate Storyline: https://www.learningdojo.ninja/courses/ai-development-with-articulate-storyline xAPI Fundamentals: https://www.learningdojo.ninja/courses/xapi-fundamentals-course Camtasia: https://www.learningdojo.ninja/courses/mastering-camtasia Articulate Rise 360: https://www.learningdojo.ninja/courses/create-responsive-html5-elearning-with-articulate-360-rise If you would like learn more visit https://learningdojo.ninja.