How Can You Use This Motion Path Tip in Your E-Learning Projects? #445

Using the 0px Motion Path Trick #445: Challenge | Recap

Happy New Year, E-Learning Heroes

This week's challenge is a bit off the beaten path compared to what we usually do. Instead of diving into a popular feature (slidersdialsvariables) or a common interaction (tabstimelineaccordion), we're zooming in on a more unique, lesser-known use of a feature. Think of this as a sandbox challenge.

Check out this example and see what I mean.

Sugary Drinks by Annabelle Grew

Sugary Drinks by Annabelle Grew

Why is this interesting?

Aside from the creative concept and visual design, what really grabbed my attention here is the approach Annabelle took to put this whole project together. 

Typically, drag-and-drops are set up with just a fixed number of draggable objects, right?

That's perfectly fine if you're dealing with, say, under ten items. But here's where it gets juicy: imagine you've got dozens of objects, and you want them all to be draggable.

Now, the standard move would be to create individual objects for each drag item. But let's face it, this method works, but it can make editing and managing the slide a real challenge. 

That's why knowing your tools can really help save you time and work quicker. 

How does it work?

There's only one drag object in the project. The drag cube has a motion path with a length of 0 px and a duration of .10 seconds. Each time the sugar cube is dropped on the target, the trigger tells the sugar cube to move its motion path. Because the motion path is set to 0 px, it resets the sugar cube to its default starting position of the sugar cube.

How does it work?

Brilliant, right?

It's not just about what you create but how you create it that can make all the difference. And that's what this week's e-learning challenge is all about!

🏆 Challenge of the Week

This week, your challenge is to share an example that uses the 0px length motion path trick. You can recreate an existing example or play with ideas that show potential uses for this technique.

Two More Examples

Reset an Object's Position

In this example, Ron used the 0 px motion path in a way that's not just about duplicating objects. Instead, it's used to play multiple audio clips from multiple objects. The 0 px motion path resets the object's position after the learner drops the object on a single target. Ron's got a detailed forum post where he breaks down how he built his project.

Casualty Incident Response by Ron Katz

Drag-and-Drop RAID Storage Calculator

I put together this example nearly five years back, right around the time we kicked off our online webinars. I've always been a fan of Drobo and especially liked their interactive capacity calculator. The project file is available for download and if you want to see how it works.

Drag-and-Drop RAID Storage Calculator

Drag-and-Drop RAID Storage Calculator

Video Tutorial of the 0 px Motion Path Technique

✨ Share Your E-Learning Work

  • Comments: Use the comments section below to link your published example and blog post.
  • Forums: Start a new thread and share a link to your published example.
  • Personal blog: If you have a blog, please consider writing about your challenges. We'll link to your posts so your great work gets even more exposure.
  • Social media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can follow your e-learning coolness.

🙌 Last Year's Challenge:

Before you tackle this week’s challenge, check out the colorful examples your fellow challengers shared in last year’s Pantone Color challenge:

14 Peachy Ways to Use Pantone’s 2024 Color of the Year #444

Pantone Color of the Year 2024 RECAP #444: Challenge | Recap

👋 New to the E-Learning Challenges?

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

Learn more about the challenges in this Q&A post and why and how to participate in this helpful article.

Got an idea for a challenge? Are you interested in doing a webinar showcasing how you made one or more challenge demos? Or do you have some comments for your humble challenge host? Use this anonymous form to share your feedback:

Jodi M. Sansone
Jodi M. Sansone
Thaddaeus Smith

ReBonjour Heroes. The second example I'd like to share is more complicated to describe in a few words. I invite you to take a look at the attached file. Everybody knows that nobody ever uses Storyline's Order: drag &drop activity (I don't know the exact name in English, I have a French version) because it's not sufficiently modifiable to suit the specific graphic charter of each project. It's still ugly. :-) So I offer my customers a fully functional Order: drag & drop activity, not limited to 10 proposals, starting from a normal drag & drop activity. The tip is: I use a 0pix length motion path to detect the position of the proposals in the drop zone, so I can validate whether the proposals are in the right order, or not, when I click on "Submit". Take a look at the review: 1st slide... Expand

Jodi M. Sansone
Joanne Chen
Jayashree Ravi
Wrenn Corcoran
Samuel Apata
Phezulu Dhlodhlo
Laura Ferguson

Hello all, I've been learning the basics of Storyline for a couple of months and I have lots to learn!! I recently discovered this community and have found it so so helpful even to get a better idea of what kind of things you can build in Storyline. Very happy to be here with you all! :) This is the first challenge I'm trying out and I'm stuck. I am following the tutorial for the 0 px motion path but I've run into trouble with the counter trigger. I set the state of the object to normal when counter changes, if counter = value 0. When I copy and paste this trigger and then try to change the state of normal to custom in order to change to 1, I don't have an option for custom or to add any numerical values. Does anyone know what I'm missing here? Thanks for any suggestions you can provide... Expand

Ange CM