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