Is it possible to reveal HYPE animation div container embedded within a html file?

Using JavaScript with Hype
,
1

Hi forum! A HYPE newbie here! Loving HYPE 3 so far!!

I have embedded a hype animation embed code in my existing HTML file somewhere within the body tag. Is possible when you scroll in the browser, and when the HYPE portion is in view, the hype animation is triggered?

I found this post ( Viewport / Waypoint actions in Tumult Hype: Starting an animation when scrolling to an element ) but the entire layout has been created in HYPE. But my version would be an embed in existing html file. See attached for further clarification. Any advice is greatly appreciated!!!

Thanks in advance!

Untitled-1.png800×1000 54.6 KB

2

hi @funhyun,

Off the top of my head I’m thinking you could use the same technique in your HTML but inside the script access your Hype document using the global command

HYPE.documents[documentName]

Then you could start a timeline when your document comes into view.

This is a simple .html page that shows how the Hype document’s “animation” timeline is started by clicking on it.

<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="utf-8">
	<title></title>
	<meta name="description" content="" />
  	<meta name="keywords" content="" />
	<meta name="robots" content="" />
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.4/waypoints.min.js"></script>
</head>
<body>
	<div><h2>Div 1</h2></div>
	<div><h2>Div 2</h2></div>
	<div><h2>Div 3</h2></div>
	<div><h2>Div 4</h2></div>
	<div id="accessoutsidehype_hype_container" style="margin:auto;position:relative;width:600px;height:400px;overflow:hidden;" aria-live="polite">
		<script type="text/javascript" charset="utf-8" src="https://dl.dropboxusercontent.com/spa/wkk989fyyvlf2kz/Exports/accessOutsideHype/accessOutsideHype.hyperesources/accessoutsidehype_hype_generated_script.js?16663"></script>
	</div>
	<script>
		
		$("#accessoutsidehype_hype_container").click( function () {
			HYPE.documents['accessOutsideHype'].startTimelineNamed("animation");
		});
		
	</script>
</body>
</html>

See if this helps!

D

3

Hi @DBear! Thank you so much for your reply!! I will try this over the weekend and report back. Thanks again!

5

In your Head tag. place

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.4/waypoints.min.js"></script>


<script type="text/javascript">
    
        $( document ).ready(function() {
                           
     $('#redbox').waypoint (function(){
                   
                           HYPE.documents['waypoint'].startTimelineNamed('bluebox');
                           }, { offset: 'bottom-in-view' });
                           
                            
                            });
    
    </script>

The $( document ).ready(function() is important. The function will not register the redbox div otherwise.
“waypoint” is my document name. i.e HYPE.documents['waypoint'].startTimelineNamed('bluebox');

Place a redbox div in you document body where you want the trigger to happen.

<div id="redbox"> red box </div>

Place you Hype div in you body right under the redbox div.

<!-- copy these lines to your document: -->

<div id="waypoint_hype_container" style="margin:auto;position:relative;width:600px;height:400px;overflow:hidden;" aria-live="polite">
    <script type="text/javascript" charset="utf-8" src="waypoint.hyperesources/waypoint_hype_generated_script.js?71148"></script>
</div>

You do not need any of this code in your Hype project. You only need the timeline and animation.

…

1 Like
6

You could also use the "Hype" div that's already there, no? I mean use the "waypoint_hype_container" ID as the trigger? Is that possible?

D

7

I think so . Been a long day; in my mind I was think I should not interfere with it’s id ??. doh…
:dizzy_face:

8

ok. cool. just wasn’t sure as I’m not up on the waypoints plug in.

D

9

The only thing to consider if you do is if you main document has more than one… hype_container

10

Ok, I got it to work like so:

Head area I included:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.4/waypoints.min.js"></script>

And then I created a new js function and titled it, waypoint. And in the js, I added:

$('#redbox').waypoint (function(){
	hypeDocument.startTimelineNamed('bluebox');
}, { offset: 'bottom-in-view' });

Now, is there way to have the animation go backwards? Thank you both for your help!!

11

Just use the reverse options for the timeline.

12

Fantastic! Thanks again for your advice!