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 (sliders, dials, variables) or a common interaction (tabs, timeline, accordion), 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
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.
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
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:
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: https://bit.ly/ElearningChallengeForm.
