Get dots to gradually show up with 100% opacity

Hiya!
We have these dots (blue, yellow, orange, with gaussian blur) in the hero background of our homepage that we want to gradually appear to 100% opacity at a steady rate.

We tried using the ‘page load’ trigger and applied the the animation under ‘When page starts loading’. But the animation seemed to be contingent to the speed at which the page loads and the page does not load at a steady rate. The dots would gradually show up to maybe 40% opacity, then it suddenly arrived at 100% opacity after the rest of the hero elements finished animating. This is particularly evident with the blue and yellow dots.

We tried having the animation under ‘When page finishes loading’. But that didn’t create the effect we want either.

We tried incorporating the dots animation in the animation we used for the hero text elements. But the dots still looked like they stopped the gradual opacity at some point, and then just suddenly arrived at 100% opacity.

We would like to animation of the dots to start - ideally, once the line ‘Nice to see you.’ appeared - and steady get to 100% opacity.

Would anyone be able to help us figure this out please? Thanks so much in advance for your help!

Here’s our read-only link

I think you have an issue with speed of website and this is hitting initial css vs jquery.
This is what I would do.
Set each dot style to have 0% opacity.
Then create an interaction (or use one you already have), set it to run after page has loaded.
You probably dont need a set initial inside the interaction but you could add it.
Then, add opacity for the dots to go to 100% and I would use linear.

If this works, set to solved and tick the heart. Cheers.

Hi! Thanks for taking a look for us! We tried your suggestion, but the dots still suddenly reach 100% when the line “I create digital products…” appears. Perhaps we missed something from your suggestion?

Thank you, I enjoy helping and a challenge.
I think I understand your request a bit more now.
You have a delay by design before your “I create digital products” appears.
Lets say its 5 seconds.
Editing ‘Homepage Blur Dots - Show’ interaction I added initial state of 0% opacity and on each action you add a delay of 5 seconds.
See here

Now I think what is happening is you have another interaction somewhere that is changing the dots so check for that.

Thanks again for your prompt input! We took out the 5 seconds delay in ‘Homepage Blur Dots - Show’ interaction, and set the duration for 100% for all 3 dots to 3 seconds in the hope of getting the gradual opacity increase.
We are so sorry to bring the bad news again, given your wonderful efforts and sparing time to help us. But the dots still don’t appear gradually…Is this a hopeless case for us, unless we (non-coders) use some kind of code?

Had another good look and whilst I get the fade in it accelerates towards the end like a blob splat.
I tried a lot of things including moving the filter blur into the interactions but still the same.
I thought maybe the header was interfering and removed that but that didn’t fix it.
I then hid all the dots to see if something else was being displayed over the top but nothing showed.
I then tried 1 dot at a time and found the blue dot one was the main culprit.
I then checked to see what was different and noticed you had a -vw or -vh.
I changed this to 0, and the yellow dot and its much better.
I also changed the easing to out circ.
I also changed the opacity to 65% and not 100%
NOTE: because the page takes time to load you also need to set the initial opacity to 0 as well
as the default opacity to 0%
After all that is done, just play around a little with the dot sizes and I think you will get what your looking for.

1 Like

Hey! I’m no help, but I love the way that you have an iphone with an image within in, how do you do that? As I want to implement it into my own sites!

Hhahah great to hear that you found something you like from the site! We used iphone mockups customized them via Photoshop. Some sites allow you to upload the image to the mockup, so you don’t even need to Photoshop if you don’t have the software :slight_smile:

YOU ARE A ROCKSTAR for trying all the different ways to get the effect we want!!! Thank you!!!

And yes, you described it so succinctly that the dots always “accelerates towards the end like a blob splat”. That’s hilarious!

We’ll experiment with the dot sizes and set the initial opacity to 0 for them. Thanks so much again for looking into this for us, ROCKSTAR! :smiley:

Excellent, good news.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.