HTML <canvas> for animated gradients

Hi All,

I'm having problems using a .js library on a element inside Hype.

The library is: Examples | Granim.js

I do know that there are alternatives but with a radial gradient and image blending modes, this one gives me everyting I need.

I can easily implement it in a plain page locally, so the library itself must be working. I can also style the Canvas element inside Hype with the css, so the id must be working. But can't get it to work all together in Hype...

Attached are both my working file, and the library package.

Any ideas are very, very welcome :slight_smile:

granim.js-2.0.0.zip (499.9 KB)
gradient.hype.zip (21.7 KB)

1 Like

You need to reference a canvas … not a HTMLDivElement with the id
But you could also just use a CSS class.

Also, don't use the HTML-Widget. It is an unfortunate named item in Hype and confuses many users… as it's actually a iFrame encapsulating anything you put in there. Rather edit the inner HTML of a regular Rectangle (DIV),

1 Like

Example:
gradient-max.hype.zip (21,7 KB)

3 Likes

THANK YOU! :slight_smile:

All makes sense now.