--- title: How to Create Fading Layers in Storyline description: In Storyline, the entire contents of each slide’s layers are in a single DIV element. We can easily target all the contents of a layer with JavaScript. image: https://blog.elblearning.com/hubfs/How%20to%20Create%20Fading%20Layers%20in%20Storyline_Blog%20Featured%20Image%20800x500.png --- [![ELB-Learning_Logo_ColorRGB-white-text-1](https://blog.elblearning.com/hubfs/ELB-Learning_Logo_ColorRGB-white-text-1.png) ](https://elblearning.com/) ![How to Create Fading Layers in Storyline_Blog Featured Image 800x500](https://blog.elblearning.com/hubfs/How%20to%20Create%20Fading%20Layers%20in%20Storyline_Blog%20Featured%20Image%20800x500.png) # How to Create Fading Layers in Storyline by [James Kingsley](https://blog.elblearning.com/author/james-kingsley) | Sep 3, 2019 Sometimes when I am poking around inside published courses trying to solve one puzzle a crazy idea will come into my head. This was one of those. I am not certain this particular code will be immediately useful to you, but hopefully it will spark a crazy idea in your head! While trying to solve an issue with Storyline I recently noticed that the entire contents of each slide’s layers are in a single DIV element. This lets us easily target all the contents of a layer with our JavaScript. To illustrate this I wrote this code to grab the first layer and set its opacity to 50%: $(".slide-layer:eq(1)").css("opacity", 50); So let’s take a moment to digest that. I am using jQuery to find all the DOM elements with the slide-layer class. That would return an array of all the layers and I am only interested in the first one, so I add that eq(1). Then I set its CSS opacity to 50%. All in one line of code :-) ## To make things more fun I decided to build a demo that uses a Storyline Slider to allow you to control the opacity yourself. You can play with that demo here: [![View Demo](https://no-cache.hubspot.com/cta/default/5108583/9885af4e-2ccc-46e2-8a22-32c7f69d3d49.png)](https://cta-redirect.hubspot.com/cta/redirect/5108583/9885af4e-2ccc-46e2-8a22-32c7f69d3d49) ## Here is the code I used for that: var o = GetPlayer().GetVar("layer_opacity_cow"); $(".slide-layer:eq(1)").css("opacity", o/100); First, I get the value of the slider. Then, I set the layer’s opacity to that value. ### Watch the short video below to see how it easy it was to build that.   Visit the eLearning Brothers [Storyline Template Library](https://library.elearningbrothers.com/articulate-library-home-page) for tons of Storyline layouts, interactions, and more. ## Not a member yet? Sign up for a free 7-day trial now! [![Free Trial](https://no-cache.hubspot.com/cta/default/5108583/e83b2b24-faec-4b25-ae34-88a4978db4d0.png)](https://cta-redirect.hubspot.com/cta/redirect/5108583/e83b2b24-faec-4b25-ae34-88a4978db4d0)   --- *![kingsley](https://blog.elblearning.com/hs-fs/hubfs/kingsley.png?width=150&name=kingsley.png)J**ames Kingsley has worked in the eLearning Industry for over 16 years. He has won several awards for combining technologies to produce better eLearning. James is a Solver of Complex eLearning Puzzles, Founder of *[CoursePortfolios.com](https://courseportfolios.com/)*, 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), [instructional design-](https://blog.elblearning.com/tag/instructional-design), [Articulate Storyline Resources-](https://blog.elblearning.com/tag/articulate-storyline), [how to-](https://blog.elblearning.com/tag/how-to), [eLearning Development Tips-](https://blog.elblearning.com/tag/elearning-development-tips) ### Related Posts [![The Secret to Humanized Instructional Story Design (with No Fluff)](https://blog.elblearning.com/hs-fs/hubfs/Recap%207-31-2025_Blog%20Featured%20Image%20800x500.png?width=388&name=Recap%207-31-2025_Blog%20Featured%20Image%20800x500.png) ](https://blog.elblearning.com/how-story-based-learning-transforms-training-insights-from-instructional-story-design) [The Secret to Humanized Instructional Story Design (with No Fluff)](https://blog.elblearning.com/how-story-based-learning-transforms-training-insights-from-instructional-story-design) [![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) [![Leaving the Classroom: From Teaching to Instructional Design](https://blog.elblearning.com/hs-fs/hubfs/Leaving%20the%20Classroom-%20From%20Teaching%20to%20Instructional%20Design_Blog%20Featured%20Image%20700x306-1.png?width=388&name=Leaving%20the%20Classroom-%20From%20Teaching%20to%20Instructional%20Design_Blog%20Featured%20Image%20700x306-1.png) ](https://blog.elblearning.com/leaving-the-classroom-from-teaching-to-instructional-design) [Leaving the Classroom: From Teaching to Instructional Design](https://blog.elblearning.com/leaving-the-classroom-from-teaching-to-instructional-design) [![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) [![Why We're Mad for Microlearning](https://blog.elblearning.com/hs-fs/hubfs/Why%20Were%20Mad%20for%20Microlearning_Blog%20Featured%20Image%20800x500.png?width=388&name=Why%20Were%20Mad%20for%20Microlearning_Blog%20Featured%20Image%20800x500.png) ](https://blog.elblearning.com/why-were-mad-for-microlearning) [Why We're Mad for Microlearning](https://blog.elblearning.com/why-were-mad-for-microlearning) [![What Is Scrap Learning and How Much Is It Costing Your L&D Department?](https://blog.elblearning.com/hs-fs/hubfs/What%20Is%20Scrap%20Learning%20and%20How%20Much%20Is%20It%20Costing%20Your%20L%26D%20Department__Blog%20Featured%20Image%20800x500.png?width=388&name=What%20Is%20Scrap%20Learning%20and%20How%20Much%20Is%20It%20Costing%20Your%20L&D%20Department__Blog%20Featured%20Image%20800x500.png) ](https://blog.elblearning.com/what-is-scrap-learning-and-how-much-is-it-costing-your-ld-department) [What Is Scrap Learning and How Much Is It Costing Your L&D Department?](https://blog.elblearning.com/what-is-scrap-learning-and-how-much-is-it-costing-your-ld-department) - [** Facebook ](http://www.facebook.com/sharer.php?u=https://blog.elblearning.com/how-to-create-fading-layers-in-storyline%2F&t=How%20to%20Create%20Fading%20Layers%20in%20Storyline) - [** Twitter ](http://twitter.com/share?text=How%20to%20Create%20Fading%20Layers%20in%20Storyline&url=https://blog.elblearning.com/how-to-create-fading-layers-in-storyline) - [** Pinterest ](http://pinterest.com/pin/create/button/?url=https://blog.elblearning.com/how-to-create-fading-layers-in-storyline&media=https://cdn2.hubspot.net/hubfs/5108583/How%20to%20Create%20Fading%20Layers%20in%20Storyline_Blog%20Featured%20Image%20800x500.png&description=How%20to%20Create%20Fading%20Layers%20in%20Storyline) - [** LinkedIn ](http://www.linkedin.com/shareArticle?mini=true&url=https://blog.elblearning.com/how-to-create-fading-layers-in-storyline%2F&title=How%20to%20Create%20Fading%20Layers%20in%20Storyline) - [** Gmail ](https://mail.google.com/mail/u/0/?view=cm&fs=1&su=How%20to%20Create%20Fading%20Layers%20in%20Storyline&body=https://blog.elblearning.com/how-to-create-fading-layers-in-storyline%2F&ui=2&tf=1) - [** reddit ](http://www.reddit.com/submit?url=https://blog.elblearning.com/how-to-create-fading-layers-in-storyline%2F&title=How%20to%20Create%20Fading%20Layers%20in%20Storyline) © 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)