I was having some issues with the
content running into this SVG and Zastrow
told me about a really cool thing called
shape outside and so basically it's like
a text wrap in CSS. The only thing was
I'm using inline SVGs for almost
everything but for this, I found that I needed to use it as an image. And then in the CSS you can actually apply shape
outside and use the same image to say
crop the text to this so that it's never
going to run into it or have any awkward too-close spacing or anything like
that. Another thing they have is I'm using
relax JS to create a parallax effect on the animals in the hero to add some interest. I also got to play with intersection observer so the paws
that are activated on scroll is using
intersection observer which is just an
API that lets you figure out where
the user it is on the page and lets you do scroll-based
animations. I used the design system
survey, I would reference for how to do that.
 
I still don't have the poly-fill working on that
so it’s not working on Safari or older browsers but it’s something I can always go back and add.
