Streaming live at 10am (PST)

Animated icons upon hovering


#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:

I am trying to do it here:

- 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)


#2

Hello @cjordan147

Let me try :wink:

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 @PiterDimitrov, here you go: https://preview.webflow.com/preview/carryr?utm_source=carryr&preview=a59faad4d3afa20b70cc5f581c6afe3c - it’s the “Home 2.0” page


#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:


#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!


#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 @PiterDimitrov, just tried checking the links and for some reason the videos are unavailable…


#11

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


#12

Star button animation > https://goo.gl/tDz7fN

Star sizes > https://goo.gl/wL26SM

Piter :webflow_heart:


#13

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


#14

No problem! Happy to help :webflow_heart: