Smooth animation vs. HTML widget

I’ve noticed that whenever I embed an HTML widget, especially with WebGL, in spite setting the pre-loader to only load after 100% loading, the page becomes heavy and makes the initial animation on the page choppy.

In my package you will see that Scene 1 top of page animation is smooth. However, the same animation on Scene 2, which has an HTML embedded WEBGL widget below, is choppy. I imagine its because the moment the page is first loading, there is a lot of computing going to loading the HTML widget.

Can you suggest how we to ensure that the top of the page animation is absolutely smooth (no jerks or choppiness) even on Scene 2?

Smooth Animation.saolapack (7.6 KB)

Thanks!!

Hi Shawn,

Saola Animate animation may be jerky if the remote page (in the HTML widget) is busy loading/ processing.
You can try hiding the HTML widget (by settings its Display to off) at the beginning of the timeline, and showing it again after completing the animation.

Regards

Thanks for your suggesiton!

I tried doing that. However, it does not have any impact. Whether displayed or not, it seems the page is trying to process it.

  1. Can you kindly see if there is another solution (javascript to delay loading the object?) or something else?

Alternately,

  1. Can we “force” a pre-loader to take a certain amount of time (e.g. 3 seconds) so as to allow the Widget to load?

Without this, the whole appeal of the flexibility / nimbleness of the HTML widget is significantly reduced.

Thanks!

Hi Shawn,

If hiding the HTML widget doesn’t help, you can leave its URL empty, and add a trigger on the main timeline to set the URL after completing the animation:

function onTimelineTrigger(doc, e) {
  doc.getElement('HTML_Widget_1').setUrl('https://marmont.gucci.com/');
}

The time to load the remote page may vary, so you should not use your second approach.

Regards

That sounds like a good idea.

How do I set a triger for HTML_Widget_1? Which event and how triggered? With URL empty, it doesn’t allow me to double click on the Event button.

It’s a timeline trigger, not a HTML widget event.

Regards

Got it. However, somehow still not triggering after animation.

Smooth Animation.saolapack (6.8 KB)

You should copy/paste just the function body:

Regards

Great – thank you!

Such a brilliant software!