Warning: this slide might be a little off balance.

Hi Jodi,

Let’s say your slide size is 960 x 540. Start by drawing another rectangle of the same size directly below the slide area at Y position 540, and another one below that at Y position 1080. These rectangles act as visual markers for extended sections, like additional "slides" stacked vertically.

Next, insert a scroll panel and stretch it all the way down to cover the area of the last rectangle. Inside the scroll panel, place your content—text, images, video, or any other elements aligned with each section.

Once you're happy with the layout, drag the bottom of the scroll panel back up so it fits within the original slide height (540px). This creates a clean, scrollable experience within a single slide.

For a cohesive design, find a high-resolution, wide background image related to your topic and stretch it to cover all three rectangles—creating a seamless look across the extended scroll area.

I've attached a simple example to demonstrate this.

Thanks, Iris! I’ve set up some JavaScript that continuously checks whether a nearly invisible (99% transparent) “marker” element — usually placed near the animated object — is visible within a scrollable area. When the marker comes into view, a variable is set to True; when it’s out of view, the variable is set to False. Based on this variable, I trigger motion path animations: when True, elements move onto the screen, and when False, they move off the screen.

This extended scrollable slide works without any JavaScript. The script was just an extra touch to show what’s possible. I’ve attached a simple version in my reply to Jodi. If you're interested in the JavaScript hack that animates elements in and out based on scroll position, let me know and I’ll upload it for you.

Hi Fred,

You can upload your file here or send it to me via email, and I’ll take a look to help identify what might be going wrong.

What you're trying to achieve here is quite difficult to do solely with Storyline. Your trigger to update a variable when “Oval1” enters the slide won’t work because the object is already on the slide from the start. You could only change the variable’s value if the object enters the slide from outside the visible area (e.g., from off-slide left or right using motion path).

Even then, you’d need to precisely time when that action should occur, specifically when the object actually scrolls into view as the scroll panel moves. Unfortunately, triggers like "Object intersects start/end" won’t work reliably in this context due to various limitations.

In one of my previously attached examples, I included a simplified version using no JavaScript. However, the animation and detection behavior you’re trying to achieve does require JavaScript (also attached earlier in this thread). I've now attached an updated version of your file with a simple JavaScript snippet that accomplishes what you need.

The code is reusable, you can apply it to another slide or duplicate it within the same slide, as long as you change the marker object ID (e.g., "Oval1") and the variable name in the code accordingly.

By moving the marker object up or down relative to the object you want to show or hide based on the variable change, you're effectively adjusting the timing of when that object appears or disappears.

Btw, I really like how your slide looks with the “extended slide” tweak.