Streaming live at 10am (PST)

Animated Film Grain Effect Design & Implementation

Hey all.

WHAT I’D LIKE TO DO:
I’d love to add an animated film grain effect over the top of my entire website. Ideally it’s on top of all elements, but if it’s significantly easier to add only to background then I’d be willing to do that, as well. Anyways, I’m struggling to accomplish this effect as I have very little web design and coding experience.

A POSSIBLE SOLUTION?
I found this article in Webflow’s showcase, which basically says “here’s the film grain effect, feel free to copy and use it if you want”. The problem is I have no clue how to implement this despite there being instructions attached. Again, I have practically zero web design experience (just some basic HTML and CSS… and slight Javascript, although I definitely still don’t 100% understand Javascript).

QUESTION(S):
(1) Is this the easiest solution out there to add an animated film grain effect? If not, what is a better option?
(2) If it is the best solution you can think of, what are the exact step-by-step instructions on how to implement this code on my Webflow site? I assume it’s just a bunch of copying and pasting from his project. I just don’t know where to copy and paste everything as the instructions aren’t detailed enough for my skill-level.

Any help would be GREATLY appreciated. THANK YOU!


Here is my public share link: Webflow - Portfolio 2021

Hey, @lecksus This cloneable is by far the easiest to implement with clear instruction you can try this to achieve the same.

all that you have to do is to add an ID for the script to be able to identify where to apply the effect and you can customize the settings to your liking.

Hope it helps :peace_symbol:

Hey thanks for responding, @Sachin. Unfortunately I’m still a bit stuck. Did I mention I’m not good at coding? lol

The HTML setup makes sense to me, but I am just so completely lost when it comes to Javascript.

It sounds like I copy/paste this snippet of code in the /body section of the page settings menu:

<script src="grained.js"></script>

But then that’s where I get stuck. I don’t know where to go from there. It says to initialize the library by writing the following line of code, but it doesn’t say where to copy/paste it.

grained('elementId',options)

And then is that it? Is that all I have to do? What about the “Options” part at the bottom? Where does that go?

Sorry if I wasn’t very clear here that I’m not very good at coding and was looking for more clear and precise step-by-step instructions. Hopefully myself and others like me can take something away from this and become better because of it!

Hey, @lecksus I’ve created a small Loom video on how to achieve this effect please try it as per the video it will surely work.

Loom Link

Hope it helps :peace_symbol:

@Sachin it worked! Thank you so much. This is awesome. Really appreciate it. I guess I was just overcomplicating it because I was thinking so much more had to be done, but that was pretty simple.

Although now it’s no longer scrollable. But I’m sure that’s an easy fix.

Yup this JS is by far the easiest to implement.

Can you share your published link to find that scrolling issue?

Thanks @Sachin. Here’s the link.

When scrolling down, the marquee text’s opacity is supposed to fade down to like 2% as the text beneath the page comes up into view (and then the reverse happens when scrolling up).

I also noticed the grain effect caused these other issues, which I can try to troubleshoot myself:

  • There is an undesirable delayed start with the grain effect rather than starting immediately.
  • It causes my intro animation with my name to not work anymore (I’m sure this one just requires some tweaking in the animation setup itself based on the new HTML structure).