Rotation on hover - Webflow interactions and animations tutorial

This is it: a continuous animation that's triggered by the position of your mouse as you hover over a credit card. In this example, we'll create an animation which makes the card appear to face the current mouse position. We'll cover creating the continuous trigger, animating the rotation, configuring the resting state, and even adding a highlight or glare effect to the card.
Steps in the video:
00:00 - Introduction
00:52 - Trigger
01:03 - Animation
02:39 - Resting state
03:44 - Highlight
Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
----------
Get started with Webflow:
university.webflow.com/course...
webflow.com
/ webflow
/ webflow

[@rainando3034]

i think webflow has the best tutorial videos. the explanation is fantastic

[@getmorpheeus]

You guys are such great teachers ! Thanks a lot !!

[@thechisensei]

i can't imagine how powerful webflow is in 3 years. or even 1 year. thanks guys! :)

[@simonswiss]

Hands down the best animation video I have ever seen. This is amazing!

[@convergeio8590]

Webflow are the masters of tutorials. Pure. Genius.

[@ahmedbayoumi1090]

That's amazing, Webflow is the best no-code website builder

[@Vijaykumar-qm3wl]

Awesome tutorial and awesome webflow effect!

[@Abhishek.Saini28]

Thank you so much for the tool and for the amazing tutorials.

[@Terran5992]

This is an amazing tutorial !

[@rikyriky966]

That's great straight into the point

[@TimSchmidbauer]

Thank you guys! This is so valuable :)

[@maitrishah2364]

Fantastic tutorial

[@asganawayaway]

Genius!!!!! This is top notch

[@freddie7981]

that blur is ingenius

[@user-zd1fh1hy6t]

That gloss thing only works with white background. When the main element gets rotated and becomes smaller, the "gloss" doesnt, so you get cutted off artifacts on the side (when set to "overflow none")

[@lgon9977]

100k subs... Congrats

[@ILUVyu0tub3]

Jez, there is no freaking way I could figure this out by myself man.

[@jaywalker.]

I love this tool. I mean, wow.

[@stbm8770]

Thank you so much But.... Can you please say how you made the card? I made it as an image in Adobe Illustrator but now on I can't give it a children perspective. Thank you for your response

[@RileyBrownMusic]

Gosh dang I'm sold... Tried to fight it for so long but this has put me over. This is amazing for a visual editor... One question... Is Webflow in it for the long run? I hate jumping on board with businesses that stop developing content after a year or so.

[@Webflow]

Hi, Riley! Our team in this for the long haul, and we're thrilled to bring more insanely powerful features and content your way over the coming months and years. In short: we're just getting started.

[@ziggerwebdesign1704]

Very nice

[@avenic]

What's the font used for the "idea" word? Would appreciate any help :)

[@zamilahamed]

simply awsome :)

[@michaeljenkins9698]

Great series of videos, so clear and informative!! I've followed these steps and have the effect working nicely so far. One but... when I add the highlight the cursor position doesn't effect the card when on top of the highlight. It's like the 'card highlight' div is sitting in the way blocking the Interaction. Any ideas how I can stop this happening?

[@michaeljenkins9698]

Solved, I had my img set as the trigger instead of the div it was in!

[@abdullah.adurrah]

Wow that's an awesome effect and brilliant explanation. How can we do it using HTML & CSS? Could you provide the files of this video?

[@otium8]

It is a very nice effect. However every time that i try to do it, while hovering the pointer on top of the card it keeps blinking very much, and sometimes just the x rotation works. Any suggestions?

[@alextsistrakis1760]

Same problem..

[@damilolaojo2554]

@@alextsistrakis1760 Hi Alex, Did you find a fix? Smoothing fixes the blinking, but only the y rotation works on my end the x doesnt' work

[@AmitChauhan-gi3yr]

Sir I wont to knw.. What things you used on the right side on black panal.. Please tell me to improve my scale thanx you

[@benziedanesrine369]

Hi there!! I have a question, initially did you create the trigger in the image itself or in the DIV where the image is located? Because I didn't understand the way the highlight card was animated. And what does the exclamation point symbol mean when creating an interaction?

[@kewalgosrani8831]

How can we add the same rotation animation to the text inside the image? In this case the text is "idea"

[@twerkyfingers]

How did you make that card?

[@njengathegeek]

Is it possible to do animation with the free version and do a live preview?

[@raresmircea6435]

I nail the rotation animation, but the highlight is giving me a majooor headache. :(( I don't know what I'm doing wrong, but the round shape (the glare) is making some sort of strobe effect instead of flowing like in the video. Please help...someone. This is sooo frustrating. :|

[@tomsouverain2022]

Hi, thanks for the tutorial! I do the same as in the video but the rotation seems to be flat, isometric, with no depth at all. Any advices?

[@leroiceyballs]

Double-check the Child Perspective on the card image's parent element.

[@gaberosenfeld4022]

I am just starting to use Webflow, so I really have no idea how to use it, how did you make that card and get it into Webflow?

[@dimka_tregubov]

After reviewing the course from the very beginning, you will understand)

[@HeavyRiven]

Just Wow, so simple.. i think it's time to leave Elementor, Divi and all Word-press's builders, and use Webflow.

[@njengathegeek]

I didn't manage to follow along because of the webflow version variation, Check on updating the tutorials

[@svirepiybarsik]

Coool!

[@ianmadrigalmonkey1979]

Seems to work in the preview mode but not in a published site.

[@alinorozy8571]

I can not get the Dive Block on my Image, how did you get it?

[@oleksandr.konchenkov]

have some trouble with this effect =( i've done it and it work well but i have 1 div under this card with absolute positioning. and in safari i have some bug when card like drowning in this div...

[@Webflow]

Can you post your question on the forums so we and the community can try to see what the issue is? discourse.webflow.com Thanks in advance :)

[@fuzailranu]

which application are you using?

[@Webflow]

Thanks for watching! :) The web app is called Webflow, check it out at webflow.com

[@thenamelessone123]

I 'cloned' the project and copy-pasted it into a Section on mine and it doesn't work!!! :( :(

[@chrisjordan3493]

Why was the child perspective set to 1000px?

[@jimmoefoe1471]

I couldn't work out the highlight.

[@MGuyette3289]

Anyone else having the problem where when the mouse hovers over the highlight div, it disengages the mousover animation on the image?

[@Webflow]

Can you please post your question on our forum - discourse.webflow.com . Be sure to post your project's share link so our community can help debug the issue.

[@JohannesFraundorfer]

same issue, did you encounter a solution?

[@rajlala6872]

what is the name of that editor

[@keemkorn]

webflow.com/

[@cccc-bd8pp]

How would this then go on a website

[@Webflow]

Hey there! The tool we're using to create this animation is Webflow: a professional web design tool and hosting solution which lets you build dynamic, interactive, responsive websites visually without having to code. So, once you've created the animation right in your website Designer, you click publish and it's live on your website! Check it out! www.webflow.com

[@fishywishydishywoo]

how come I don't see the transitions and transforms tab in weblow?

[@Webflow]

Transforms and transitions are in the style panel: university.webflow.com/lesson/transforms university.webflow.com/lesson/transitions

[@fishywishydishywoo]

@@Webflow thank you!! found it! :)

[@Flocksta]

Does class save interactions?

[@Webflow]

You actually have a choice - at the bottom of the interactions panel, there's a set of buttons. You can define whether the interaction is for this element only, or for the class.

[@inprogresspodcast9126]

god thats so fucking dope

[@juliusforsterofficial]

I just selected the body. Now my whole website wobbles around when i move the mouse. Hahaha

[@ageshero]

The hell does anyone use Square space for if this is this easy and cool? .. dang.

[@roccofili3054]

In Muse u would have to buy a $50 widget.

[@phonzzfortheworld]

*** from a 3rd party muse website lol

[@luminatiexchange6347]

What muse? LMAO. It's dead.

[@houssembennsira125]

i need this animation in figma please

[@waltz9230]

Jesus Christ you can literally do anything with webflow. Is there anything that code can do that webflow can’t? If so, will it be added later for even more power?

[@adriantaropa5445]

Just wanted to let you know that following this step by step does not work. Setting a perspective 1000 on the body element still results in an isometric 3D Effect.

[@Webflow]

Can you please provide a screen recording of what you're experiencing? You can use something like loom.com for this. Also, please provide your project's share link: university.webflow.com/lesson/share-your-site

[@nonk6441]

I have the same problem, has anyone solved it?

[@joshuarobertson8448]

Same me too

[@StewartjPressney]

Way too fast, slow down! great content