--- title: Putting the Emphasis on Articulate Storyline Animations description: Storyline provides tons of options for Entrance and Exit animations. But what if you need to draw the learner’s attention to an object in between entrance and exit? image: https://blog.elblearning.com/hubfs/Imported_Blog_Media/Putting-the-Emphasis-on-Articulate-Storyline-Animations_Blog-Header-800x350.png --- [![ELB-Learning_Logo_ColorRGB-white-text-1](https://blog.elblearning.com/hubfs/ELB-Learning_Logo_ColorRGB-white-text-1.png) ](https://elblearning.com/) ![](https://blog.elblearning.com/hubfs/Imported_Blog_Media/Putting-the-Emphasis-on-Articulate-Storyline-Animations_Blog-Header-800x350.png) # Putting the Emphasis on Articulate Storyline Animations by [James Kingsley](https://blog.elblearning.com/author/james-kingsley) | Jun 21, 2017 ![Putting the Emphasis on Articulate Storyline Animations](https://blog.elblearning.com/hs-fs/hubfs/Imported_Blog_Media/Putting-the-Emphasis-on-Articulate-Storyline-Animations_Blog-Header-800x350.png?width=800&height=350&name=Putting-the-Emphasis-on-Articulate-Storyline-Animations_Blog-Header-800x350.png) We all love Articulate Storyline, but one of the few features missing is the ability to create “emphasis” animations. Storyline provides tons of options for Entrance and Exit animations. But what if you need to draw the learner’s attention to an object in between entrance and exit? Check out [this demo](http://elbrotherscustom.com/jk/blogs/emphasis/story_html5.html) where I use emphasis animations to give the learner a hint about what items to click. As you may know, I love mucking about under the hood of tools like Storyline and Captivate. In this post, I will demonstrate how we can use JavaScript to access and affect changes on elements within Storyline slides. I will be expanding on concepts previously discussed in other blog posts about using JavaScript with Storyline. In particular you may want to read [JavaScript and Storyline 3/360](http://elearningbrothers.com/javascript-tricks-articulate-storyline-3-360/); go ahead, I will wait…. OK, so at the end of that one I mentioned that the biggest hurdle in finding slide elements with JavaScript is that Storyline gives all our elements (images, text, shapes, buttons, etc.) random IDs when it publishes the course. That is a great method for making sure no elements accidentally have the same name or ID, which would be bad news in JavaScript. But this method makes it almost impossible to find the elements with JavaScript. I have found one place where we (course developers) can enter data with confidence, knowing that we can find that data post-publish via JavaScript: Alt Text. Anything we type into the Alt Text box for an element will be rendered as the [aria-label](http://www.w3.org/TR/WCAG20-TECHS/ARIA14.html) for its HTML element. Keep in mind that label is read by screen readers. So if you want your course to be 508/ADA compliant you can still use this method; just make sure what you enter there makes sense. ![](https://blog.elblearning.com/hs-fs/hubfs/Imported_Blog_Media/sizeposition.png?width=496&height=451&name=sizeposition.png) Here is how it works. In our last post we talked a little bit about using jQuery to select elements by finding their CSS class. We can find elements by pretty much any data attribute assigned to them, in this case, their aria-label. So our selector will look something like this: `$('[aria-label="my_image"]')` We need to take another step though. Storyline converts almost everything you put on a slide into an SVG when it gets published. It wraps the SVG with HTML DIV tag which holds our aria-label. Therefore, we actually want to apply our effects on SVG within the DIV so we select it like so: `$('[aria-label="my_image"] svg')` Now that we have our element we use jQuery to make some changes to it. For instance the following code will find the unicorn and make it grow then shrink: `var item = $('[aria-label="unicorn"] svg') $(item).animate({ 'width': '+=20', 'height': '+=20', 'left': '-=10', 'top': '-=10' }, function() { $(item).animate({ 'width': '-=20', 'height': '-=20', 'left': '+=10', 'top': '+=10' }) });` That code uses jQuery to animate several attributes of the element: width, height, left, and top. When the ‘grow’ animation completes we automatically run the corresponding ‘shrink’ animation.  You may be wondering why we change the left and top. We need to move it down and over as we grow it so that is seems to grow from the middle rather than from the top left corner. You can check out that code (and some spinner code) in the example course [here](http://elbrotherscustom.com/jk/blogs/emphasis/story_html5.html). And watch the video below for more info as I walk through how I built the demo. https://www.youtube.com/watch?v=Hzx1rIVpaPg And be sure to check out my webinar, [How to Hack Storyline’s HTML5 Output](http://elearningbrothers.com/webinar-hack-storylines-html5-output/). *![](https://blog.elblearning.com/hs-fs/hubfs/Imported_Blog_Media/Kingsley-Bio-Dec-14-2020-08-49-18-58-PM.jpg?width=80&height=80&name=Kingsley-Bio-Dec-14-2020-08-49-18-58-PM.jpg)James Kingsley has worked in the eLearning Industry for over 15 years. He **has won several awards for combining technologies to produce better eLearning. He is an Articulate MVP. James is the Senior Technology Architect for eLearning Brothers and the Co-Founder of *[*ReviewMyElearning.com*](https://www.reviewmyelearning.com/)*. You can follow him on *[*Twitter*](https://twitter.com/onEnterFrame)* or connect with him on *[*LinkedIn*](https://www.linkedin.com/in/jameskingsley)* for additional tips and examples.* [eLearning-](https://blog.elblearning.com/tag/elearning), [eLearning development-](https://blog.elblearning.com/tag/elearning-development), [Developer Resources-](https://blog.elblearning.com/tag/developer-resources), [Articulate Storyline Resources-](https://blog.elblearning.com/tag/articulate-storyline), [Resources-](https://blog.elblearning.com/tag/tips-tricks) ### Related Posts [![Staff Augmentation: Savvy or Sad?](https://blog.elblearning.com/hs-fs/hubfs/Staff%20Augmentation-Savvy%20or%20Sad_Blog%20Featured%20Image%20800x500.png?width=388&name=Staff%20Augmentation-Savvy%20or%20Sad_Blog%20Featured%20Image%20800x500.png) ](https://blog.elblearning.com/staff-augmentation-savvy-or-sad) [Staff Augmentation: Savvy or Sad?](https://blog.elblearning.com/staff-augmentation-savvy-or-sad) [![From Chaos to Clarity: Mastering the Art of Learning Strategy](https://blog.elblearning.com/hs-fs/hubfs/10-29-24%20From%20Chaos%20to%20Clarity_%20Mastering%20the%20Art%20of%20Learning%20Strategy_Blog%20Featured%20Image%20800x500.png?width=388&name=10-29-24%20From%20Chaos%20to%20Clarity_%20Mastering%20the%20Art%20of%20Learning%20Strategy_Blog%20Featured%20Image%20800x500.png) ](https://blog.elblearning.com/from-chaos-to-clarity-mastering-the-art-of-learning-strategy) [From Chaos to Clarity: Mastering the Art of Learning Strategy](https://blog.elblearning.com/from-chaos-to-clarity-mastering-the-art-of-learning-strategy) [![Improving L&D with AI Work Augmentation](https://blog.elblearning.com/hs-fs/hubfs/Improving%20L%26D%20with%20AI%20Work%20Augmentation_Blog%20Featured%20Image%20800x500.png?width=388&name=Improving%20L&D%20with%20AI%20Work%20Augmentation_Blog%20Featured%20Image%20800x500.png) ](https://blog.elblearning.com/improving-ld-with-ai-work-augmentation) [Improving L&D with AI Work Augmentation](https://blog.elblearning.com/improving-ld-with-ai-work-augmentation) [![A Brief History of Instructional Design](https://blog.elblearning.com/hs-fs/hubfs/A%20Brief%20History%20of%20Instructional%20Design_Blog%20Featured%20Image%20800x500.png?width=388&name=A%20Brief%20History%20of%20Instructional%20Design_Blog%20Featured%20Image%20800x500.png) ](https://blog.elblearning.com/a-brief-history-of-instructional-design) [A Brief History of Instructional Design](https://blog.elblearning.com/a-brief-history-of-instructional-design) [![Beyond Content Creation: Using AI to Measure Learning Success](https://blog.elblearning.com/hs-fs/hubfs/Beyond%20Content%20Creation%20%E2%80%94%20Using%20AI%20to%20Measure%20Learning%20Success_1_Blog%20Featured%20Image%20700x306.png?width=388&name=Beyond%20Content%20Creation%20%E2%80%94%20Using%20AI%20to%20Measure%20Learning%20Success_1_Blog%20Featured%20Image%20700x306.png) ](https://blog.elblearning.com/beyond-content-creation-using-ai-to-measure-learning-success) [Beyond Content Creation: Using AI to Measure Learning Success](https://blog.elblearning.com/beyond-content-creation-using-ai-to-measure-learning-success) [![How to Use AI to Add Pages in Lectora Online](https://blog.elblearning.com/hs-fs/hubfs/How%20to%20Use%20AI%20to%20Add%20Pages%20in%20Lectora%20Online_Blog%20Featured%20Image%20800x500.png?width=388&name=How%20to%20Use%20AI%20to%20Add%20Pages%20in%20Lectora%20Online_Blog%20Featured%20Image%20800x500.png) ](https://blog.elblearning.com/how-to-use-ai-to-add-pages-in-lectora-online) [How to Use AI to Add Pages in Lectora Online](https://blog.elblearning.com/how-to-use-ai-to-add-pages-in-lectora-online) - [** Facebook ](http://www.facebook.com/sharer.php?u=https://blog.elblearning.com/blog/emphasis-articulate-storyline-animations%2F&t=Putting%20the%20Emphasis%20on%20Articulate%20Storyline%20Animations) - [** Twitter ](http://twitter.com/share?text=Putting%20the%20Emphasis%20on%20Articulate%20Storyline%20Animations&url=https://blog.elblearning.com/blog/emphasis-articulate-storyline-animations) - [** Pinterest ](http://pinterest.com/pin/create/button/?url=https://blog.elblearning.com/blog/emphasis-articulate-storyline-animations&media=https://f.hubspotusercontent30.net/hubfs/5108583/Imported_Blog_Media/Putting-the-Emphasis-on-Articulate-Storyline-Animations_Blog-Header-800x350.png&description=Putting%20the%20Emphasis%20on%20Articulate%20Storyline%20Animations) - [** LinkedIn ](http://www.linkedin.com/shareArticle?mini=true&url=https://blog.elblearning.com/blog/emphasis-articulate-storyline-animations%2F&title=Putting%20the%20Emphasis%20on%20Articulate%20Storyline%20Animations) - [** Gmail ](https://mail.google.com/mail/u/0/?view=cm&fs=1&su=Putting%20the%20Emphasis%20on%20Articulate%20Storyline%20Animations&body=https://blog.elblearning.com/blog/emphasis-articulate-storyline-animations%2F&ui=2&tf=1) - [** reddit ](http://www.reddit.com/submit?url=https://blog.elblearning.com/blog/emphasis-articulate-storyline-animations%2F&title=Putting%20the%20Emphasis%20on%20Articulate%20Storyline%20Animations) © 2025 ELB Learning. All rights reserved.  | [ Terms of Use](https://www.elblearning.com/legal/terms-of-use)  |  [Privacy Policy ](https://www.elblearning.com/legal/privacy-policy)|  [Legal Notices](https://www.elblearning.com/legal/legal-notices)