Forum Discussion

JimOwen-f418d1f's avatar
JimOwen-f418d1f
Community Member
4 hours ago

Videos start jumpy

I have this problem across all my projects. I have attached a sample to demo the issue.

 My base layer has a static image. Other layers each contain a video which starts with that image and then animates something. The desired effect is that this static image comes to life when a button is clicked. I have painstakingly ensured that each video starts at frame 1 with the same static image.

However, the videos always have this annoying jumping effect, where they first display a frame other than frame 1, then quickly jump to the beginning and play normally. This ruins the "coming to life" effect I'm going for. I've tried all kind of things to remedy it, but the only thing that works is if I add a half second of still image to the start of each video. This will mean a ton of extra work to go back and fix them all, plus it adds this little delay after the buttons are clicked before the action starts.

Does anyone know how to fix this?

The attached sample shows the effect. Click on a button and you will see the image jump a bit before the animation starts.

  • Try this (modified file attached).

    https://360.articulate.com/review/content/128ce1bc-bdad-45f6-a8b3-4b9335ee15d5/review

    The problem is, when SL builds the slide for display, the content of the layers is not actually inserted until they are displayed. When you request SL to show a layer, the DOM is modified, which takes a moment. If you premptively show and then hide each layer, you load all of the layers' DOM elements, which makes for a smoother transition from base to later content.

    In this example, I created a new top-level layer that is masked with the background color. I show this layer on timeline start for your base slide. On the Mask layer, I then triggered a show and then hide for each animation layer, then hid the masking rectangle (to engage the fade) and closed the masking layer. Now when you click Pitch, Yaw, or Roll, the transition to the video is much smoother.

     

  • Thank you! That's exactly what I needed. I figured it was something like that, I had just not yet stumbled upon that particular workaround. Thanks again.

     

    (BTW, I discovered that having an object on the Mask layer is not necessary at all. Merely the presence of the Mask layer and the actions it triggers is enough to solve it without that layer even needing any objects of its own.)

  • Try this (modified file attached).

    https://360.articulate.com/review/content/128ce1bc-bdad-45f6-a8b3-4b9335ee15d5/review

    The problem is, when SL builds the slide for display, the content of the layers is not actually inserted until they are displayed. When you request SL to show a layer, the DOM is modified, which takes a moment. If you premptively show and then hide each layer, you load all of the layers' DOM elements, which makes for a smoother transition from base to later content.

    In this example, I created a new top-level layer that is masked with the background color. I show this layer on timeline start for your base slide. On the Mask layer, I then triggered a show and then hide for each animation layer, then hid the masking rectangle (to engage the fade) and closed the masking layer. Now when you click Pitch, Yaw, or Roll, the transition to the video is much smoother.