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

Using JavaScript with Hype
2

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):

13%20PM
Screen Shot 2019-06-17 at 10.37.13 PM.png2380×80 30.5 KB

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");