Two separate Hype html5 codes with viewport settings not working in same page?

This may be a no-brainer, but I have three exported (folder-style-export) Hype html5 codes that I pasted into a website I previously coded by hand. Both had settings to launch when entering the viewport. However, this only happens 65% of the time.

One of these Hype projects includes another non-viewport related element that works 100% of the time, leading me to believe it is a viewport issue.

It is messing things up to put two viewport-related codes into another bigger site?

i have the same problem.
i have many hype progect in the same page. (every one use waypoint to start)
each one works well alone, but when they are together in the page, only one viewport at a time seems active, the other projects are forzen.

I think that it works properly only the last one that gets loaded in the page.

@ossigeno & @ktrent7 Can you share links (and if possible) documents?

hi Daniel,
i forward you the mail sent to your support, with links and attachs
Please let me know.

f.
Archivio.zip (472 KB)

Demo-Issues.zip (1.5 MB)

Daniel, thanks for getting back. Here is an example I made up of what was happening to me, and it also has the same issue. I put 3 Hype projects in an overall demo1.html, and divided them by sections. Unlike @ossigeno, I can always get two working: the viewport trigger in the first section and the viewpoint trigger in the end section. It doesn’t matter even if I have these sections swap places, anything in the middle (be it one project or ten projects) does not work. In this example, I have a bunch of animated bar graphs that never launch. Any help would be great! I’m sure it’s something I’m overlooking.

When I test your document, it behaves as expected in Safari + Chrome: The first animation plays immediately, and then second animation (representing ‘design’) plays when I scroll down. What browser are you seeing issues in?

Hmm that’s strange. Can you point out the element which is triggering the viewport action on that document? (Section 1)?

Daniel, in the Section 1 Hype file I included it is the ‘graph’ group only (the one with multiple icon list under ‘What’s Trending?’). I have since switched back the to the Waypoints.js technique you described before 3.5 was released, and it works fine. However, I’d like to use the new feature! Let me know what you think it could be.

both animations play correctly only if the viewport is wide. Try the small browser window.
This problem happens the same with Safari, Chrome and FF.
Also animations should replay if you leave and return in the viewport area, but only one of them does so

I’m having the same problem where if I embed multiple projects using “on enter viewport” into a single page then typically only one of them works.

Looking into this issue. One potential workaround is to use secondary timelines for actions that fire in response to Viewport actions, (not the Main Timeline).

Thanks for looking into it! Could you give an example of how to build this workaround? I had some symbol timelines I tried triggering that didn’t work, or do you mean secondary as in whole new non-symbol timelines?

hi Daniel,
i tried but it doesn’t works the same.
here attached a simple page with 3 different Hype (with secondary timelines fired)
Only one works.

test 3.zip (388 KB)

Hey Daniel,
I also tried moving all of my animations and triggers into new uniquely named timelines in each project with no luck. I tried reordering the timelines in the Animation Timelines panel, changing the Actions panel items to point to the new timelines, etc.

I’m going to try using the jQuery waypoint tutorial (http://forums.tumult.com/t/viewport-waypoint-actions-in-tumult-hype-starting-an-animation-when-an-element-is-visible/1138) to do it by hand as a last resort because I have a big project due next week. :frowning:

EDIT: I got it working by using that tutorial linked above. I linked to the waypoint JS file in the parent HTML file and then added all of my waypoint functions in the individual projects. I also found using this code:

	$('#trigger').waypoint (function(){
	hypeDocument.continueTimelineNamed('uniqueTimeline', hypeDocument.kDirectionReverse);
}, { offset: 0 });	

I was able to reverse the timeline easily without having to reanimate like that tutorial suggested. If you lookup the waypoint JS project you can find all sorts of offset options for when to trigger the timeline.

I’ve got this working with two projects embedded in one page now, so hopefully I’ll be successful embedding a few more. :wink:

This is a bug in Hype 3.5.0, and will be has been fixed for 3.5.1 which we hope to release soon. Thanks to everyone for providing examples to help us track it down!

2 Likes

@jonathan can you provide a timeline on this fix? I believe we may have just found this ourselves creating several web widgets we were testing in succession. See link that myself and @arielstrong put together at:

http://www.unifiedbrandmedia.com/data/widgets/financials/test/index.html