Granim is a lightweight Javascript library for animating gradients. In this tutorial, we are going to set it up as a background of a custom Home Hero widget area below the header on the front page in Genesis.
Note: The actual animation will be smoother unlike what got captured in the below screencast. See the examples page for a realistic idea.
Step 1
Upload granim.min.js to child theme's js
directory.
Create a file named say, granim-init.js
in the same location having this code:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
Hey Sridhar, I put this to work on a new home page, but I’ve just noticed that granim.js seems to affect the font appearance in Safari (Mac) on that page.
See here with granim: https://d.pr/y3VFs
And here, without: https://d.pr/8DUl8
Hi Suzanne,
Can you provide the URL where the problem can be seen?
Also, is this only an issue in Safari (on Mac)?
Yeah, here’s the url: http://skydog.work/
Issue is only on Safari Mac AFAIK.. we’re all macs and android here.. Thanks in advance for your help!