Animated icons upon hovering

Design help Animations & Interactions
1

So basically I’m trying to create a few simple animations upon hover. My inspiration is on stripe’s homepage where they have a bunch of different icons flying out from behind an element Check it out here:

50
501440×277 17.2 KB

I am trying to do it here:

00
001440×401 24.6 KB
- when a visitor hovers over the blue button I want different size stars to fly out (implying “magic”). Once I’ve learnt this trick I will do the same with a couple of other elements. I have the icon png but I don’t know where to start. Can someone give me some guidance, please? Here’s the site link to take a look: http://carryr.webflow.io/home-2-0

Thanks in advanced.

Here is my public share link: LINK
(how to access public share link)

1 Like
2

Hello @cjordan147

Let me try ;)

Can you share your read only link? Here’s how > https://university.webflow.com/article/sharing-your-sites-read-only-link

Piter :webflow_heart:

3

Apologies @PeterDimitrov, here you go: https://preview.webflow.com/preview/carryr?utm_source=carryr&preview=a59faad4d3afa20b70cc5f581c6afe3c - it’s the “Home 2.0” page

1 Like
4

No problem! I will try :blush:

5

Okey, here’s what I’ve made > https://www.useloom.com/share/fa6fa2a625e744a69628b4e6248e2171

Is this the effect we want to achieve?

6

That’s exactly what I was looking for :ok_hand:

1 Like
7

I will do another screen record where you will be able to see how to do the hover effect :blush:

8

Really appreciate your help!

1 Like
9

Sorry for the late response, but I was having some work to do. Here’s a link to the screen record > https://www.youtube.com/watch?v=uIVxfCv46A8&feature=youtu.be aaaand sorry for the not so good English talking :smile:

I forgot to show you how you can make the stars different sizes. Here’s another SR > https://www.youtube.com/watch?v=2BkyoXjLYeU&feature=youtu.be

Piter :webflow_heart:

10

Hey @PeterDimitrov, just tried checking the links and for some reason the videos are unavailable…

1 Like
11

Ou yea maybe because they are private… :sweat_smile: Just a minute and I will send another links.

12

Star button animation > Str-btn-hover-webflow-piter-dimitrov.mov - Google Drive

Star sizes > Str btn hover webflow piter dimitrov str sizes.mp4 - Google Drive

Piter :webflow_heart:

1 Like
13

@PeterDimitrov you’re a lifesaver! I’ll give it go later today… Thanks for your help!!

1 Like
14

No problem! Happy to help :webflow_heart: