Delay HTML slide in animation

Customization
1

Hi

I have an HTML label that comes up as part of a multi trigger with a camera move,
I would like to delay the HTML animation until the camera move is done.

I have tried to tag the DIV #ext-html-label-content with “animation-delay: 5s;” within the HTML label code, but this is not working.

Is this possible?
Perhaps I have the code or DIV incorrect?

2

Hi!

The animation-delay property won’t work on this element. You could use transition-delay but it would work correctly one way most probably (during fade in transition)
The most accurate way to do the transition you described would be to add a handler when view transition has finished.

Please take look at our API documentation for ‘view-switch’: GitHub - shapespark/shapespark-viewer-api: JavaScript API for interacting with the Shapespark 3D scene., and for ‘displaying html popups’ 'GitHub - shapespark/shapespark-viewer-api: JavaScript API for interacting with the Shapespark 3D scene.

Script that would trigger html label could look like this:

var welcomeContent =
    '<div style="font-size: 1.5em">' +
    '  <span style="font-size: 1.5em">Welcome</span>' +
    '  <hr/>' +
    '  Hello Visitor!' +
    '</div>';
  var viewer = WALK.getViewer();

  function showHtmlPopup(viewName) {
    if (viewName === 'targetView') {
      viewer.openPopup(welcomeContent, {centerHorizontally: true, centerVertically: true});
    }
  };

  // Detect when the camera switches to a view and display a html popup.
  viewer.onViewSwitchDone(showHtmlPopup);

In this example when view transition is done function showHtmlPopup will check if view name matches desired view name and only then will show html label popup.
If you would like to open Html popup only when using trigger you can use ‘Change view’ extension and hide the view from the menu.

Best

1 Like
3

Thanks for the reply,
That’s a little too advanced for me :grin:

We will probably go with placing objects with textures for now

1 Like