Delaying loading of a symbol or timeline


(Tamara Cutler) #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.


(Hans-Gerd Claßen) #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:


(Tamara Cutler) #4

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


(Tamara Cutler) #6

this is the url:


(Tamara Cutler) #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.


(Tamara Cutler) #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)


(Hans-Gerd Claßen) #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.


(Tamara Cutler) #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!


(Hans-Gerd Claßen) #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 …


(Tamara Cutler) #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!!