▼
Streaming live at 10am (PST)

Recreate the Canva.com Effect

Community resources Webflow Tips
#1

One of my clients requested the same mouse movement effect as the Canva.com homepage.

I was able to recreate the effect here in webflow with a slight mod to a script I found on canva.com’s own blog.

http://canva-com-hero-effect.webflow.io/

I also made a version with a video in foreground - http://canva-com-hero-effect.webflow.io/video

Figured I’d share it here with the community -
https://preview.webflow.com/preview/canva-com-hero-effect?preview=1deb3e84249ec9d42ef0fc7cd4eee2bf

25 Likes
Awesome Interaction (Never seen before!) Any ideas?
Https://www.canva.com/
2018 Design Help
#2

That’s so cool @Damon_Daisley_Wilson thank you so much for sharing that!

3 Likes
#3

WHAT?!?!?!? HOW?!?!?!

AAHH!H!!!

3 Likes
#4

That’s genious! Thanks for sharing that :dizzy_face:

2 Likes
#5

AWESOME!!! that is GENIUS thanks for sharing!

Arthur

2 Likes
#7

Pretty sweet! Thank you for sharing

1 Like
#8

Awesome thankyou for sharing this @Damon_Daisley_Wilson!

1 Like
#9

This is amazing @Damon_Daisley_Wilson, thanks for sharing!!!

Has anyone gotten this effect to work on tablet/mobile?

1 Like
#10

@Damon_Daisley_Wilson Too cool!!! How do we find the script we need to add make the effect come to life? I can’t seem to locate it in the read only site you provided. Thanks for sharing!

1 Like
#11

I believe the information you’re looking for should be in the page details section.

If you scroll down that until you get to the Before tag then I believe that should be what you’re looking for here.

Script Location.gif659×607 853 KB

For me though, the first two links worked but the preview wouldn’t do anything at all. I was testing in Safari so no idea if that had anything to do with it though?

Best wishes,

Mark

1 Like
#12

@mark_bowen showed you where to get the scripts.

Scripts don’t run in preview mode, you’ll have to use the links to see everything in action.

Glad you like it.

1 Like
#13

Aha! That would explain why it’s not working for me, yes!! :wink:

Thanks and thanks for sharing such a lovely effect.

Best wishes,

Mark

#14

Thanks @Mark_Bowen and @Damon_Daisley_Wilson

Can’t wait to see if I bring this life!

#15

It’s amazing!!! I’m trying to do something similar, but I can not.

Can I ask you something? First, it creates two separate images? how to combine them?

#16

Just look at the preview link in webflow, there you can see how its setup.

#17

I looked, but i can’t do :frowning: Do I have to buy full version?

#18

It’s very cool! Thank you!

#19

I know this is an old post but Im trying to create this effect except I would want the video in the background and I would want a tint over it and the mouse hover would show part of the video. If anyone could help me in achieving this effect that would be appreciated

Thanks in advance