Running javascript upon entering the viewport

Using JavaScript with Hype
1

Hi Everyone,

I usually only need to do the most basic of things with Hype, but this time I’d like to incorporate an instance of Inorganic Produce’s CountUp.js on a bar graph upon scroll. I thought I had everything set up correctly, but apparently I haven’t. While the bars are animating the way I intend, the numbers aren’t “counting” as they should.

Please have a look at my project and the exported html file. I’m using Hype Pro 3.5.4. Any ideas appreciated!

toys2016.zip (400.3 KB)

2

You are missing part of the javascript…

var options = {
useEasing : false, 
useGrouping : true, 
separator : ',', 
decimal : '.', 
prefix : '', 
suffix : '' 
};


var numAnim = new CountUp("2015", 0, 614, 0, 2.0, options); //changed and added the keyword 'options'

numAnim.start()`

Also, I took out the getElementbyID part.
I removed the text “614” from the text box (id 2015) [I think it needs an empty text box]
Just a Note, I would avoid using numerics to name elements

3

Greg, thanks so much for your quick reply! I included your code and suggestions, and everything now works as it should. See it in the wild: http://wssymphony.org

Not quite sure what I did wrong, actually. My first attempt included the code just as you corrected me, with the var options declared and included as keyword in numAnim, etc.—in fact, cut-and-pasted from Inorganik’s demo, with necessary substitutions—and my “counting” elements were blank. When that didn’t work, I tried to include the getElementByID , and that didn’t work either.

In any case, it’s working now. Many thanks!

1 Like