Using Subtle Animations and Transitions in Your E-Learning Courses #201
Using Animation in E-Learning #201: Challenge | Recap
Animations and transitions are an effective tool to draw focus and attention to an area of your slides. Used appropriately, animations can help learners visualize relationships for more success grasping and applying course material.
Challenge of the Week
This week, your challenge is to share an example of practical entrance and exit animations for slide content in e-learning.
New Entries Only!
The focus this week is on using animation effects for emphasis in your presentation design. In earlier animation challenges, we focused on educational animations, storytelling, characters, and drawing effects.
Because this week's challenge is narrowly focused on animating slide content to give the course elements a sense of movement, I’m asking that you only share new examples that have not been posted in previous challenges.
Where can I find starter content?
If you’re looking for content to animate and you’re an Articulate 360 subscriber, feel free to use a handful of Content Library templates. They're a perfect starting point for your animation wizardry!
For those of you who aren’t working in 360, you can grab several free templates from our downloads hub. You're more than welcome to mix and match templates for this week's entries.
Share Your Source Files!
It’s no secret that community members love freebies! It’s also no secret that the challenges are one of the most visible ways course designers get their work in front of the community. If you’re up for it, please consider including a download along with your example this week.
- How Are Course Designers Using Educational Animations? #76
- Storytelling with Animated Text, Images, Sound, and Video in E-Learning #158
- Creating Animated Characters in E-Learning #163
- Create a Rotoscoping Animation for Your E-Learning Courses #167
Animation and Transitions in Storyline 360
- Storyline 360: Adding Animations
- Storyline 360: Syncing Entrance and Exit Animations
- Storyline 360: Syncing Motion Path Animations
- Storyline 360: Adding Transitions to Slides and Layers
- Storyline 360: Understanding How PowerPoint Animations and Transitions Are Imported
Share Your E-Learning Work
- Comments: Use the comments section below to share a link to your published example and blog post.
- Forums: Start your own 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 back to your posts so the great work you’re sharing gets even more exposure.
- Twitter: If you share your demos on Twitter, try using #ELHChallenge so your tweeps can track your e-learning coolness.
Last Week’s Challenge:
To help you transition into this week’s animation challenge, take a few moments to check out the lightbox examples your fellow challengers shared over the past week:
Using Lightbox Slides in E-Learning #200: Challenge | Recap
Wheel wishes for an animated week, E-Learning Heroes!
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.
Demo: https://s3.us-east-2.amazonaws.com/elh-201-subtle-animation.skillspace360.com/index.html Source: https://s3.us-east-2.amazonaws.com/elh-201-subtle-animation.skillspace360.com/ELH+Challenge+201+Animations.story Media: https://s3.us-east-2.amazonaws.com/elh-201-subtle-animation.skillspace360.com/circle_menu.gif This is my (late) entry for the subtle animations challenge. I combined native SL animations with a loading gif I found online. I don’t recommend one gif source over another, but many loading and menu animations can be found for free or for very little cost via a quick web search. I’ve attached the source for those who would like to look under the hood. I only built out the animations for one topic (notification icon on the top left), but the logic and animations can be... Expand