Need help: What is the name of this dot type drop effect?

Design help General
1

What is the name of this dot type drop effect?
How can I do this in webflow?
please help me through.
Thanks a lot in advance.

SharedScreenshot343434
SharedScreenshot3434342273×1609 226 KB

2

What exactly are you referring to - the blue pulsing?

You might find the video on this thread helpful:

3

I’m not sure it has a name but I think it would be considered an onboarding effect. I’ve created similar effects by creating an animation using the page load trigger so it loads automatically and loops. Then create a separate interaction using the element itself as a trigger, and make it disappear, or whatever you want to happen when the user clicks on it.

4

yeah! I have mean the blue dot effect.
So you are telling that I can only create it by after effect then by bodymobin I have to create a json file and then set the trigger in webflow??

5

You could create it that way as a json file through After Effects and Bodymovin, but it would be pretty simple to just create it in Webflow itself. You would just need to make a div with 2 circles then make a page load animation which changes one circle’s size and opacity.

6

You don’t need to use json / After Effects / Bodymovin. You can just use an HTML embed (this is exactly how it has been done on the Memberstack Homepage):

<style>
@keyframes bluePulse {
     0%   {box-shadow: 0 0 0 0px rgba(32, 167, 239, 0.3);}
     100% {box-shadow: 0 0 0 80px rgba(32, 167, 239, 0);}
}
.bluepulse-button {
	animation: bluePulse 1.5s ease-out infinite;
  }
</style>

Note that bluePulse-button is the class name of the element that I want the effect to originate from. If you use a different class name, ensure it is changed within the HTML Embed code.

1 Like
7

Thanks a lot man @marklovin
And especially you too @Andy_Vaughan. It was very much helpful.

1 Like
8

No problem at all! :slight_smile:

1 Like
9

can you kindly explain the process a bit please??
I am stuck but you solution seems pretty easy to apply.
Thanks in advance @marklovin.

10

Were you unable to use the html embed code above? It allows you to implement this in about 30 seconds.

11

Sorry! Webflow free version doesn’t support embed code.

12

First you want to add a div element on the page where you want your dot animation to appear and set the position to relative. This will be your parent. Inside this div, you need to create 2 more divs and set their border radius to 50% to make them circles, and make them blue or whatever color you want them to be. Set the position of one of them to absolute and adjust the z-axis value so it is behind the other circle. You might need to fiddle a bit with the align or justify settings of the parent to make both of these circles centered.

Next you will need to create a page load animation (so it loads automatically when the page loads), set it to loop, and then animate the opacity and size properties of the back circle.

Then if you want something else to happen when the user clicks on the blue dots (e.g. hide it) you will need to create another interaction, this time on the parent div you have created, using the ‘mouse click (tap)’ trigger.

I would recommend learning more about triggers and animations in the Webflow University here. They have lots of great information and it’s all very user-friendly and easy to digest.

2 Likes
13

Thanks man. Appreciate you kind helpfulness.

14

You’re welcome :slight_smile:

I’ve just made this cloneable demo that you can have look at to get an idea of how it is made. Hope that helps.

1 Like
15

Oh my god.
You are the best @marklovin. :heart_eyes: :heart:
God bless you.

1 Like
16

No need to apologise, I was just seeing if there was anything you needed help with :slight_smile: unfortunately yeah, that’s one of the limitations of a free plan :frowning:

2 Likes