Adding Animations in Harlowe

Question

Every time I try to insert an animation (Javascript or CSS) into my twine file, it never works. Here's the link to the CodePen of the animation: https://codepen.io/cr0ybot/pen/zNyYeW#code-area

Is Harlowe not a good story format when it comes to animations? Or am I just doing something wrong?

Answer 1

Please use the Question Tags to state the name and full version number of the Story Format you are using, as answers can vary based on that information. You stated you are using Harlowe, I will assume you're using the default version which v2.1.0

I think your two main issues are:

1. Timing.

The contents of the Story Javascript area is executed before the contents of the Passage that is marked 'Start Story Here'. This means you either need to delay code like your document.getElementById('stars') until after that element in the Passage has been rendered, or you need to create that element within the Javascript however if you do this then that element can't exist within the tw-passage element or it's decedents because they are destroyed and recreated for each Passage Transition.

You could add something like the following to your Passage.

<canvas id="stars" width="300" height="300"></canvas>

<script>Stars();</script>

2. Scope.

The contents of the Story Javascript area (actually a special Passage) and of each of the (standard) Passages that make up your project are executed within their own local scopes. This means that Javascript Variables & Methods defined within one of them are not automatically visible within the others, unless you somehow raise the scope of them to global. (Ideally you would only raise the scope of the bare minimum of the functionality you needed.)

The most common way to do that is to define what you need direct access to on the global window object, although I would personally create a namespace object on the window object and then define my functionality on that namespace so not to accidentally override the web-browser's own functionality, 

You code try something like:

window.Stars = (function() {

/* Your existing code here... */

});

... which would tie into the script element in my example for point 1.

I tried creating a demo to show you (based on you existing code snippet) but I ran into some issues/errors with it:
a. You have a semi-colon after the declaration of linkOpacity = 0.25; instead of a coma.
b. You reference Delaunay (which isn't part of your snippet) and I would of needed to obtain the correct library (and then possibly need to convert it to run in a story format) so that I could embed it in the Story Javascript area.

Comments

I did not write any of the code, I just found it on CodePen while I was looking up CSS and Javascript animations, so I don't know how to fix the issue about Delaunay.

---

Ok, then try doing the following:

1. Remove the CodePen related Javascript from the Story Javascript area of your project.

2. Use your web-browser to visit Ironwallaby's repository for the Delaunay library and open the delaunay.js file you see in the list. Then cut-and-paste the contents of that file into the Story Javascript area of your project.

3. Add the following Javascript to the Story Javascript area, it should come after the code from point 2.

window.Stars = (function() {

/* Your existing code here... */

});

4. Visit the CodePen page you previously link and copy the contents of the JS section into the Story Javascript area so that it replaces the /* Your existing code here... */  line from the above example.

Then find the line that states linkOpacity = 0.25; and change the semi-colon at the end of it to be a coma. It should now read: linkOpacity = 0.25,

5. Add the CSS section of the CodePen page to your project's Story Stylesheet area, then delete the first rule in that CSS...

html,
body {
	margin: 0;
	padding: 0;
}

... and then change the remaining body element selector to target the tw-story element instead.

body {
  background-color: ....

becomes...

tw-story {
  background-color: ....

5. Copy the following into your Passage.

<canvas id="stars" width="300" height="300"></canvas>

<script>Stars();</script>

... and if you did everything correct then it should work, or at least it did for me.

---

The animation works just fine, although for some reason it pushes down other content in the passage instead of acting as a background