Delaying loading of a symbol or timeline

Animation
1

I have inserted an html widget close to the bottom of my page. This is causing the page to jump down the page to the widget immediately after opening the page. I want the user to spend some time enjoying the content at the top of the page before jumping down to the widget. Is there a way to delay loading of the widget?

I tried various methods. ie. putting it on it’s own paused timeline at about the 15 second mark and doing an “on viewport” jump to the 15 second mark. I also tried making it a symbol and moving it to the 15 second mark. Nothing seems to work. The widget still loads on the main timeline even though it should be delayed. I also tried pausing the main timeline and putting the symbol after that. Still doesn’t work! Any suggestions?

2

That's odd -- what is the URL of the widget?

You could use JavaScript to load the widget content:

var newinnerContent = '<iframe src="https://example.com" allowtransparency="true" frameborder="0" scrolling="no" style="width="100%;height:100%" ></iframe>';
     document.getElementById("myframe").innerHTML = newinnerContent

Just set an HTML widget to have the ID of myframe and run this as a viewport action.

1 Like
3

you can animate the display property: https://tumult.com/hype/documentation/3.0/#opacity-hiding-and-locking-elements

But it’s not really clear what you are expecting and what’s happening. Example-documents are often better for understanding than long explanations … :slight_smile:

4

Thanks Hans! Here is the file. IntroPage.hype.zip (22.3 KB)

6

this is the url:

7

I tried putting the widget on it’s own timeline.
If the element is set at opacity 0% at 15 sec mark and 100% opacity at the 1.15 . Why does it show on the first frame at all? And it still loads on the main timeline.

samp
samp.jpg914×815 103 KB

8

I also tried putting it on its own paused timeline with it hidden on the first frame.
It still jumps to that spot in the page when the page is loaded even though you can’t see it.
IntroPageV2.hype.zip (21.4 KB)

9

your embedcode is not valid. try this:

<div
class="typeform-widget"
data-url="https://cp-pmna.typeform.com/to/PBpUwy"
data-transparency="100"
data-hide-headers=true
data-hide-footer=true
style="width: 600px; height: 1000px;">

</div>

    <script>
      (function() {
        var qs,js,q,s,d=document,
            gi=d.getElementById,
            ce=d.createElement,
            gt=d.getElementsByTagName,
            id="typef_orm",
            b="https://embed.typeform.com/";
        if(!gi.call(d,id)) {
            js=ce.call(d,"script");
            js.id=id;
            js.src=b+"embed.js";
            q=gt.call(d,"script")[0];
            q.parentNode.insertBefore(js,q)
        }
      })()
    
   </script>
10

It looks like the widget is kind of taking everything over, even if it is embedded simply as the URL of the typeform widget. It is a bit aggressive in how it takes over a page once loaded.

I think you should structure this in such a way that you have your onboarding/messaging then devote an entire scene to the embedded Typeform widget so it has room to breathe. This will also likely improve how this works on mobile devices.

11

You are correct Hans. Your embed code sort of worked but now there are double scroll bars which I think may be coming from the actual embedded site. The client’s objective however was to have animations that would play throughout the entire page so that the embedded quiz item would look like it was integrated into the entire scene. Is there a way to make a quiz scene load on top of an an existing scene? I was originally hoping to do the actual quiz in hype as well and have it run inside the widget. I was close to success but I ran into the obstacle at the end in performing javascript to deliver score results. Seems not being fluent in javascript is making things a challenge!

12

use a regular rectangle (div) with 'overflow visible' to embed the form.

sure ... i'd think the easiest approach is to follow @Daniel's advice though

hype is a great dooropener, but next steps almost always require further knowledge: the www offers endless possibilities to look things up and learn ...

1 Like
13

You and Daniel are so patient!
Thank you so much for your information and help, both of you.
I believe I have this working now with your code Hans.
Daniel’s code I got to work but the box that displayed the embedded item was super small!
On estimate it looked to be around 200x200 px wide. No matter what settings I put in for the width and height it was the same.
With the result of yours Hans. I was able to hide the second set of scroll bars by following another suggestion on this forum to group the item, make it a bit small then make “hidden”. After all this i am still not happy with the look of the end result (the embedded quiz is super ugly). I may go back to the drawing board and try to continue making my own quiz in hype and use that. It is way more customizable and will be a nicer looking end product if I can get it to function properly. Will just have to keep learning!!

1 Like
14

A post was split to a new topic: Loading a Typeform Widget

15

I am posting here because it is related to delaying the “actual” loading of an HTML Widget.

Is there a way to stop the actual loading (i.e. fetching of data, images from server) of a Hidden HTML widget (reason is that that loading is slowing down the loading of the page and the HTML widget is not needed immediately on the page) and for loading to be triggered:

  • Either based on passing of X seconds
  • Preferably, a timeline action.
  • On Enter Viewport within a certain section (like an invisible object that triggers loading in a section below the top)

Here is the e.g. file.

In this doc, the user will scroll down and click the “HTML Widgets” button to make them Visible.

Stop loading of HTML widget.zip (105.9 KB)

Thanks!

Hyper

16

You could add the HTML by JS later. The portion in the body that is declared to be copied and pasted in the regular HTML file Hype produces.

As a feature request a document loader that doesn’t fire immediately would be A nice addition to Hype.

1 Like
17

Thanks Max. That is a great suggestion. I imagine that if I can do that, I can trigger the Javascript using any number of “Run Javascript” commands!

I would need to do this for 3 separate Widgets on the page and 1 Widget on the next scene (to help it preload).

Can you suggest how I might do that? Regrettably, I am not a JS coder even as much as after starting to use Tumult, I wish I were :frowning:

18

you can let the url of the widget blank.
give an id or class to that widget.
set a data-attribute to the widget holding the url.

whenever you want:
query the widget.
get the data-attribute-url
assign the src -> url to the first iFrame-element that the widget (it’s a div -wrapper) includes …

1 Like
19

Thank you Hans - works as suggested.

Here is the JS code for future users:

var widElem = document.getElementById(“widget”);
widElem.getElementsByTagName(“iframe”)[0].setAttribute(“src”, “https://www.website.com”)

​

3 Likes
20

Related question – how can one load an HTML Widget on Scene 2 while you are still on Scene 1?

Thank you,

Hyper

21

you’ll need some kind of shadowdom. this may work without custom scripting. place your widget within a persistent symbol. place the symbol on the scene you like to use as preloader and set display to none (or hide it with any other strategy).

on the targetscene the placed widget should display:)

1 Like