Swiper Slider - how to trigger Hype animation when slide enters viewport? (Codepen included)

Hi Everyone,

I’m a first-time user of Hype, and I’m trying to figure out how to launch an HTML5 animation when I swipe to a certain screen. Here’s my Codepen:

https://codepen.io/dfordata/pen/PrZrZV

I am using the Swiper Slider library, whose documentation is here: http://idangero.us/swiper/api/

As you can see, I can get basic CSS animations (using the animate.css library) to run when a new slide loads, using the Swiper Animation library by cycdpo on Github (can’t post link, new member).

But I can’t get that to work with animations exported by Hype. On my local machine, the animation loads as soon as the HTML does, which is instantaneous on a one-page HTML slider.

On Codepen though, I cannot get the SVGs to load; I have tried to paste in the minified JS and corresponding animation id in the HTML, but no dice. I’ve uploaded the original Hype file so you can see what the animation looks like.

Any help would be appreciated! Thanks!

lc-radar-chart-codepen.hype.zip (46.2 KB)

On codepen, the Hype animation definitely isn’t showing up correctly. It is loading however, and has made the right number of elements. I can manually get them to display by modifying the background-image from the SVG to a simple color. I’m not sure what’s going on, but I do see that there appears to be something malformed (see the extra < div part):

Regardless, you seem to be on the right track! I think the two missing pieces are:

  1. You should have an action to pause the main timeline (either as a timeline action at time 0 or as an On Scene Load action).
  2. I see in the commented out code you are trying to run the timeline via hypeDocument.startTimelineNamed('default_hype_container'); There’s a few things wrong with this:
    a. You need to properly access the hypeDocument variable. In Hype’s javascript, it is passed in as a function argument called hypeDocument but the scope you’re in doesn’t have that. You’ll probably want to use the HYPE global variable and get at the document via HYPE.documents["documentName"] where “documentName” is based on the export (it is listed at the top of the *_hype_generated_script.js file)
    b. You are trying to use the default_hype_container as the timeline name, but that is the div id of your hype document. A timeline name would be “Main Timeline” since that is the only timeline in your document. So a call might be something like: HYPE.documents["Default"].startTimelineNamed("Main Timeline");

Hi Jonathan, thanks very much for taking a look!

Here’s my revised version:

var swiperH = new Swiper('.swiper-container-h', {
        on: {
            init: function () {
              swiperAnimation.init(this).animate();
            },
        slideChange: function () {
          swiperAnimation.init(this).animate();
          HYPE.documents['lcradarchartcodepen'].startTimelineNamed('Main Timeline', HYPE.documents['lcradarchartcodepen'].kDirectionForward);
        }
      }
    });

Unfortunately the error I get in the console is:
Uncaught TypeError: Cannot read property 'startTimelineNamed' of undefined

I got this code block based on:
https://tumult.com/hype/documentation/#invoking-api-from-outside-oftumult-hype

I’m not a JS expert, so I’m having a bit of trouble reading the API documentation and trying to implement the principles in my code.

As much as I can tell the animation isn’t loading either way in you code pen…
On slide 3 there is nothing.

The code itself looks fine, so I would just suspect it is one or more of these possiblities:

  • the document name is not actually “lcradarchartcodepen” (most likely)
  • this code is being called before that document has been created
  • the document isn’t in the same frame as where this code is being called