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.
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.
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
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?
Such animations are always interrupted when the mouse moves out or in. If you can keep the last state after the mouse is moved out, or restore the original through animation; And always be able to keep all the animations continuous, that would be great.
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...
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?
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")
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. :|
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?
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.
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.
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.
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
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?
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
i think webflow has the best tutorial videos. the explanation is fantastic
Webflow are the masters of tutorials. Pure. Genius.
You guys are such great teachers ! Thanks a lot !!
That's amazing, Webflow is the best no-code website builder
i can't imagine how powerful webflow is in 3 years. or even 1 year. thanks guys! :)
Hands down the best animation video I have ever seen. This is amazing!
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.
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.
Jez, there is no freaking way I could figure this out by myself man.
Awesome tutorial and awesome webflow effect!
that blur is ingenius
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
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?
Same problem..
@@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
Fantastic tutorial
Such animations are always interrupted when the mouse moves out or in. If you can keep the last state after the mouse is moved out, or restore the original through animation; And always be able to keep all the animations continuous, that would be great.
I didn't manage to follow along because of the webflow version variation, Check on updating the tutorials
100k subs... Congrats
Thank you so much for the tool and for the amazing tutorials.
This is an amazing tutorial !
That's great straight into the point
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?
Genius!!!!! This is top notch
Just Wow, so simple.. i think it's time to leave Elementor, Divi and all Word-press's builders, and use Webflow.
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...
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 :)
Thank you guys! This is so valuable :)
I love this tool. I mean, wow.
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?
Solved, I had my img set as the trigger instead of the div it was in!
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")
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. :|
simply awsome :)
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
I can not get the Dive Block on my Image, how did you get it?
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?
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?
Double-check the Child Perspective on the card image's parent element.
Is it possible to do animation with the free version and do a live preview?
How did you make that card?
How can we add the same rotation animation to the text inside the image? In this case the text is "idea"
Seems to work in the preview mode but not in a published site.
Anyone else having the problem where when the mouse hovers over the highlight div, it disengages the mousover animation on the image?
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.
same issue, did you encounter a solution?
I couldn't work out the highlight.
Very nice
I 'cloned' the project and copy-pasted it into a Section on mine and it doesn't work!!! :( :(
I just selected the body. Now my whole website wobbles around when i move the mouse. Hahaha
What's the font used for the "idea" word? Would appreciate any help :)
how come I don't see the transitions and transforms tab in weblow?
Transforms and transitions are in the style panel:
university.webflow.com/lesson/transforms
university.webflow.com/lesson/transitions
@@Webflow thank you!! found it! :)
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?
After reviewing the course from the very beginning, you will understand)
Why was the child perspective set to 1000px?
which application are you using?
Thanks for watching! :) The web app is called Webflow, check it out at webflow.com
Does class save interactions?
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.
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.
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
I have the same problem, has anyone solved it?
Same me too
The hell does anyone use Square space for if this is this easy and cool? .. dang.
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?
How would this then go on a website
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
Coool!
what is the name of that editor
webflow.com/
In Muse u would have to buy a $50 widget.
*** from a 3rd party muse website lol
What muse? LMAO. It's dead.
god thats so fucking dope
i need this animation in figma please
Way too fast, slow down! great content