Simple instructions for how to start animation scenes when it is in view

1

Hi, I have spent hours trying to do something very simple which there are not proper instructions for. Any way I’ve tried it does not work and the documentation is totally unclear.

Imagine an html page with 10 Hype documents, each the width of the page, stacked vertically. You want the whole animation for each one to start as each one comes into view. I have tried for hours to get various actions working (I tried others when there was no luck with scene load), both with the “old” javascript methods I found on here and with the new actions features but nothing ever happens and I have wasted too many hours trying to guess how something this simple should work. Could you please explain how this is achieved?

Thank you,
Robert

2

any link or file¿

3

I’ve been trying it at https://www.foodtroopers.com where you’ll see all the animations happen immediately.

Each of them is independent so not trying to do anything complicated at all, just run the animations as each one comes into view.

Thanks,
Robert

4

i did the simplest setup and it works as expected: test

could you share one of the hypefiles¿

5

Are you able to share what the “simplest setup” you did was? It seemed like it was going to be very simple but just nothing worked. Which one of the actions should be used?

Thanks,
Robert

6

Here’s one. The javascript functions I’d created for each object (e.g. playReviews function) all seem to be in this one which seems quite strange, would have expected them to be separate.

//	HYPE.documents["Review"]
(function() {
(function k() {
function l(a, b, d) {
var c=!1;
null == window[a] && (null == window[b] ? (window[b] = [], window[b].push(k), a = document.getElementsByTagName("head")[0], b = document.createElement("script"), c = h, false==!0 && (c = ""), b.type = "text/javascript", b.src = c + "/" + d, a.appendChild(b)) : window[b].push(k), c=!0);
return c
}
var h = "Review.hyperesources", c = "Review", e = "review_hype_container";
if (false==!1)
try {
for (var f = document.getElementsByTagName("script"),
a = 0; a < f.length; a++) {
var b = f[a].src;
if (null != b&&-1 != b.indexOf("review_hype_generated_script.js")) {
h = b.substr(0, b.lastIndexOf("/"));
break
}
}
} catch (n) {}
if (false==!1 && (a = navigator.userAgent.match(/MSIE (\d+.\d+)/), a = parseFloat(a && a[1]) || null, a = l("HYPE_530", "HYPE_dtl_530", !0 == (null != a && 10 > a || false==!0) ? "HYPE-530.full.min.js" : "HYPE-530.thin.min.js"), false==!0 && (a = a || l("HYPE_w_530", "HYPE_wdtl_530", "HYPE-530.waypoints.min.js")), a))
return;
f = window.HYPE.documents;
if (null != f[c]) {
b = 1;
a = c;
do 
c = "" + a + "-" + b++;
while (null != f[c]);
for (var d = document.getElementsByTagName("div"), b=!1, a = 0; a < d.length; a++)
if (d[a].id == e && null == d[a].getAttribute("HYP_dn")) {
var b = 1, g = e;
do 
e = "" + g + "-" + b++;
while (null != document.getElementById(e));
d[a].id = e;
b=!0;
break
}
if (!1 == b)
return 
}
b = [];
b = [{
name: "playSearchDishes",
source: "function(hypeDocument, element, event) {var hypeApp = HYPE.documents['Search Dishes'];\nhypeApp.goToTimeInTimelineNamed(0, 'Main Timeline');\nhypeApp.continueTimelineNamed('Main Timeline');\n}",
identifier: "104"
}, {
name: "playDishes",
source: "function(hypeDocument, element, event) {var hypeApp = HYPE.documents['Dishes'];\nhypeApp.goToTimeInTimelineNamed(0, 'Main Timeline');\nhypeApp.continueTimelineNamed('Main Timeline');\n}",
identifier: "105"
}, {
name: "playPhotos",
source: "function(hypeDocument, element, event) {var hypeApp = HYPE.documents['Photos'];\nhypeApp.goToTimeInTimelineNamed(0, 'Main Timeline');\nhypeApp.continueTimelineNamed('Main Timeline');\n}",
identifier: "106"
}, {
name: "playEnterMeals",
source: "function(hypeDocument, element, event) {var hypeApp = HYPE.documents['Enter meals'];\nhypeApp.goToTimeInTimelineNamed(0, 'Main Timeline');\nhypeApp.continueTimelineNamed('Main Timeline');\n}",
identifier: "107"
}, {
name: "playMeal",
source: "function(hypeDocument, element, event) {var hypeApp = HYPE.documents['Meal'];\nhypeApp.goToTimeInTimelineNamed(0, 'Main Timeline');\nhypeApp.continueTimelineNamed('Main Timeline');\n}",
identifier: "108"
}, {
name: "playReview",
source: "function(hypeDocument, element, event) {var hypeApp = HYPE.documents['Review'];\nhypeApp.goToTimeInTimelineNamed(0, 'Main Timeline');\nhypeApp.continueTimelineNamed('Main Timeline');\n}",
identifier: "109"
}, {
name: "playCalendar",
source: "function(hypeDocument, element, event) {var hypeApp = HYPE.documents['Calendar'];\nhypeApp.goToTimeInTimelineNamed(0, 'Main Timeline');\nhypeApp.continueTimelineNamed('Main Timeline');\n}",
identifier: "110"
}
];
d = {};
g = {};
for (a = 0; a < b.length; a++)
try {
g[b[a].identifier] = b[a].name, d[b[a].name] = eval("(function(){return " + b[a].source + "})();")
} catch (m) {
window.console && window.console.log(m),
d[b[a].name] = function() {}
}
a = new HYPE_530(c, e, {
"0": {
p: 1,
n: "iphone6-review2.jpg",
g: "134",
o: true,
t: "@1x"
},
"1": {
p: 1,
n: "iphone6-review2_2x.jpg",
g: "134",
o: true,
t: "@2x"
}
}, h, [], d, [{
n: "Review",
o: "1",
X: [0, 1]
}
], [{
A: {
a: [{
p: 4,
h: "105"
}
]
},
o: "176",
p: "600px",
x: 0,
cA: false,
Z: 500,
Y: 300,
c: "#3C3C3C",
L: [],
bY: 1,
d: 300,
U: {},
T: {
kTimelineDefaultIdentifier: {
i: "kTimelineDefaultIdentifier",
n: "Main Timeline",
z: 2,
b: [],
a: [{
f: "c",
y: 0,
z: 2,
i: "a",
e: 37,
s: 300,
o: "189"
}, {
f: "c",
y: 0,
z: 2,
i: "b",
e: 84,
s: 85,
o: "189"
}, {
f: "c",
y: 0,
z: 2,
i: "a",
e: 10,
s: - 289,
o: "188"
}, {
f: "c",
p: 2,
y: 2,
z: 0,
i: "ActionHandler",
e: {
a: []
},
s: {
a: [{}
]
},
o: "kTimelineDefaultIdentifier"
}, {
f: "c",
p: 2,
y: 2,
z: 0,
i: "ActionHandler",
s: {
a: []
},
o: "kTimelineDefaultIdentifier"
}, {
y: 2,
i: "b",
s: 84,
z: 0,
o: "189",
f: "c"
}, {
y: 2,
i: "a",
s: 37,
z: 0,
o: "189",
f: "c"
}, {
y: 2,
i: "a",
s: 10,
z: 0,
o: "188",
f: "c"
}
],
f: 30
}
},
bZ: 180,
O: ["188", "189"],
v: {
"188": {
G: "#FFFFFF",
aU: 8,
c: 264,
aV: 8,
d: 33,
r: "inline",
s: "Helvetica,Arial,Sans-Serif",
t: 12,
Z: "break-word",
w: "Scroll left and right through reviews, and scroll down to see more details of the dish.
",
j: "absolute",
x: "visible",
k: "div",
y: "preserve",
z: 6,
aS: 8,
aT: 8,
a: - 289,
F: "justify",
b: 20
},
"189": {
w: "",
h: "134",
p: "no-repeat",
x: "visible",
a: 300,
q: "100% 100%",
b: 85,
j: "absolute",
r: "inline",
c: 225,
k: "div",
z: 5,
d: 400
}
}
}, {
A: {
a: [{
p: 4,
h: "109"
}
]
},
o: "3",
p: "600px",
x: 1,
cA: false,
Z: 416,
Y: 700,
c: "#3C3C3C",
L: [],
bY: 1,
d: 700,
U: {},
T: {
kTimelineDefaultIdentifier: {
i: "kTimelineDefaultIdentifier",
n: "Main Timeline",
z: 2,
b: [],
a: [{
f: "c",
y: 0,
z: 2,
i: "b",
e: 147,
s: 408,
o: "191"
}, {
f: "c",
y: 0,
z: 2,
i: "a",
e: 80,
s: 80,
o: "191"
}, {
f: "c",
y: 0,
z: 2,
i: "a",
e: 424,
s: 700,
o: "190"
}, {
y: 2,
i: "a",
s: 80,
z: 0,
o: "191",
f: "c"
}, {
y: 2,
i: "b",
s: 147,
z: 0,
o: "191",
f: "c"
}, {
y: 2,
i: "a",
s: 424,
z: 0,
o: "190",
f: "c"
}
],
f: 30
}
},
bZ: 180,
O: ["191", "190"],
v: {
"190": {
h: "134",
p: "no-repeat",
x: "visible",
a: 700,
q: "100% 100%",
b: 8,
j: "absolute",
r: "inline",
c: 224.88755622188904,
k: "div",
z: 3,
d: 400
},
"191": {
G: "#FFFFFF",
aU: 8,
c: 229,
H: "none",
aV: 8,
d: 36,
r: "inline",
s: "Helvetica,Arial,Sans-Serif",
t: 16,
Z: "break-word",
w: "Scroll left and right through reviews, and scroll down to see more details of the dish.
",
j: "absolute",
x: "visible",
k: "div",
y: "preserve",
z: 4,
aS: 8,
aT: 8,
a: 80,
F: "justify",
b: 408
}
}
}
], {}, g, {}, null, false, true, - 1, true, true, false, true);
f[c] = a.API;
document.getElementById(e).setAttribute("HYP_dn",
c);
a.z_o(this.body)
})();
})();
7

If you mean the line of html required to get the file to appear (as in your fixed “Hello World” text), yes that is simple but it’s nothing to do with my issue. As you can see from the link I sent, the animations are there, I just cannot get them to only run when they become visible.

Thanks,
Robert

8

though i meant hypefile when said hypefile :wink: I guess you’r thinking to complecated. Hype does the job for you. Just attach the behaviour ‘when entry to viewport’ to an element within your scene and run to continue a timeline (<- best would be other than maintimeline as this starts per default). you won’t need any custom scripting, which seems to be the pitfall here …waypoints.hype.zip (10.5 KB)

9

I thought you were wanting to look at the generated hype javascript file. The core hype file is quite large. I only tried to do it the more complicated way when the “simpler” ways didn’t work.

I tried the viewport method but that doesn’t work. Each scene is very basic - a Main Timeline. There are only two elements in each one which animate at the same time. I don’t think the viewport method does what you’re suggesting. When I tried it, it only seemed to start some other animation when it had already begun to move one of the elements in the scene, not when the Hype object itself (the scene) came into view. I’ve looked through your attached file and don’t see anything that does anything like what I’ve been referring to sorry.

Any idea how this can be made to work? So that the scene’s animation starts when the scene comes into view?

Thanks,
Robert

10

the maintimeline of a scene will start automatically.
place a timelineaction on starttime 0 to stop the maintimeline.
then simply … [quote=“h_classen, post:8, topic:7362”]
Just attach the behaviour ‘when entry to viewport’ to an element within your scene and run to continue a timeline
[/quote]

and don’t forget to delete all your scripts before :slight_smile:

11

Thanks. Have just been trying that out. Have deleted all the previous scripts. And have implemented exactly as you described (have ticked allow to restart animation as well), which you can view at foodtroopers.com. However it seems to be extremely erratic. Sometimes they works but other times they never appear (both elements animate in from off screen). But which ones appear as you scroll down and then back up seems to be ever changing which seems extremely strange. If it was at least consistent with when it doesn’t work I could expect to resolve it but seems quite random.

Seems to work about 50% of the time and blank the other 50%. And the first scene is the only one that, when it does appear, 50% of the time seems to have no text and the other 50% has the text element? Any ideas on how to make it work consistently?

Thanks,
Robert

12

well, the first waypointsaction on downscrolling seems to work 100% on FF desktop macosx.
the further behaviour is inconsistent. but as outstanding to anything you do in your hypefiles i cannot give any good advice instead of guessing … i won’t do any guessing furthermore … sry

one advice: provide a sample hypefile and the community or hypeteam will surely step in …

also recommend: http://tumult.com/hype/documentation/3.0/#viewport-actions

13

Hi,

It has taken me an hour to put together the files in a clear way for you and without other distractions in the file. I didn’t want to go to the trouble of that if there was some obvious quick explanation. And also the Hype files are not enough for you since you need the context they are within - how they’re used in the html page as running each on their own wouldn’t tell you anything at all. So I’ll attach the Hype files in this message and then the exported files with a specially composed html page to see how it is used. Hope this can make things a lot clearer as to what is going on.

Many thanks,
Robert

Sample.zip (2.7 MB)

14

Archive.zip (2.3 KB)

Unfortunately the output files are too large to upload so am just uploading the html and css files - if they are inside a folder that is one level up from the exported files then the page should work. It does seem to be exhibiting exactly the same issues as before but have removed all unnecessary elements to make things clearer. Thanks

15

This basic workflow for this is to set a ‘On Enter Viewport’ action for an element at the top of your Tumult Hype document which will trigger an timeline-related action – if you build all your animations on a secondary timeline, for example, you would have the On Enter Viewport action ‘Start’ this secondary timeline.

If you have a large file to send, use http://Filedropper.com or Dropbox.

16

download
seems to work, added a rewind when disappearing from viewport …

17

Thanks, that has fixed the odd behaviour. Can I suggest this might make a good tutorial as it seems like it is a fairly common use case but the solution is not intuitive. But it’s a simple set of three things to solve it so is quite instructive.

There does seem one major issue still though, which is the multiple semi-random vertical lines that keep appearing next to almost all the screenshots (only the dishes one doesn’t have them). It’s in the version that you sent me too. Any idea why this would be happening?

Regards,
Robert

18

Hi Daniel,

I think Hans’ solution is the better workflow for the following reason. If you have x number of scenes, then with this method you can organise them in any vertical order you want or on any number of html pages. Whereas putting it all in one document makes it entirely fixed and inflexible and you’d need to create another version if you wanted to organise them in a different flow. Your suggestion would work when no flexibility is required though.

Regards,
Robert

19

those lines, they only appear on safari ->webkitbrowser.
it may be a case for @jonathan :wink:

as of Daniels hint: i guess you missunderstood @Daniel :slight_smile:

20

I couldn't repro the problem with @h_classen's document myself. Can you send a screenshot and also let me know what version of OS X and Safari you are using? It sounds like a rendering issue. You can also try unchecking 'Use WebKit graphics acceleration' in the Document Inspector and see if that helps.