Awesome.... more of these Framer tutorials please! 🙏

Amazing tutorial! Thank you for the shared info

pretty cool effects, awesome ❤

Very nicely done!

Amazing! Thank you!

Very good tutorial, awesome

Can’t wait to try it

What app do you use to screen recording? I like that zoom and shows the actions you do.

Really nice buttons and great information. One thing that made me a little focused was all the zooming in and out. I understand is to see clearly what you are pressing. But at the same time I lose track of where I am on the screen.

Wonderful! Thank you for sharing the source file for reference as well!

@FluxAcademy

3 ай бұрын

Glad it was helpful!

Amazing stuff! How do you tweak the default animated transition timing for the built in hover effect?

Hey, nice video, what app do you use to record your screen. The animations and the camera following looks super smooth!

@z1pp1k

Жыл бұрын

Screen studio

How would I animate another object after hovering on a button? Like text popping up after you hover over the button? And How would I make the animation a smooth scrolling motion

I'm having difficulty creating a hover animation that doesn't result in an instant transition when I hover over the component. Even if I tweak the transition preferences in the styles panel, it still doesn't work as intended

@levidaragiu

Ай бұрын

Noticed that as well. Because of the video tutorial's zoom in animations you probably missed it as I did. Make sure you set the fill and border radius for the default state general container as well. That way the transition is gonna be smoother. Otherwise, I also couldn't find any hover animation transition settings.

Thank you for the excellent tutorial. Could you please let me know which program you use to capture the screen and cursor movement? It looks very impressive.

@z1pp1k

Жыл бұрын

Screen studio

Thanks. Can I trigger a video/gif to play upon hover of it's title?

I have too many questions about the Overrides... How does it work? What is the language behind those? What do I need to learn to make overrides? I'd been looking for videos, tutorials, courses, etc. but I didn't find any good source about how to code overrides for Framer.

Hi excuse me, how import button directly in our projet in framer please. There is a place where you explain that ?

Slowly learning more and more of Framer but off the bat I wouldn’t recommend animating your padding (first example) or duplicating your text (second example). Unless Framer is doing something magical, animating the padding causes repainting of the browser and duplicating text causes SEO and accessibility issues. Is Framer doing something to avoid any of this at all?

@dsapio

Жыл бұрын

Hey there, this is Danny creator of the video. Framer uses something called variables and Framer Motion so in the case of the duplicating of text, this issue isn't noticed because all text references a single text variable that you can define. Also since Framer uses the Framer Motion library, this is simply a movement of an object which can be seen all over Framer websites. The motion isn't a repainting, it's simply a transform. So you won't encounter any SEO or accessibility issues by implementing these effects. Framer has considered all of these cases already for the user.

@webflowandcode

Жыл бұрын

@@dsapio I really appreciate this. Thank you. I’ll take a look at the rendered HTML when I get a moment! I’ll be particularly surprised by the padding being considered a transform. I wonder how they did that!!

@webflowandcode

Жыл бұрын

I have some really interesting results that you might want to consider. So you are right about the transform happening. I’m surprised there to be honest because if someone wants to animate a padding, as bad as that is for performance, that’s what they wanted so Framer should let them. It’s also weirdly animating the border radius?? The hover the SEO/content duplication thing you assumed is not correct however. I can see 2 paragraph tag with BUTTON and if i disable CSS there’s just endless lists of BUTTON so I’m not sure what you mean about variables here? This led me on to some really interesting observations about your markup. If i turn JavaScript off none of your buttons work because you’ve marked them up as divs and Framer has applied an event listener to them which when you hover, applies a hover class which then performs the animation. None of your buttons are marked up as such meaning the entire demo is inaccessible and therefore bad for SEO. Is there a reason you didn’t use a link or a button here? I know Webflow doesn’t even have the concept of buttons so It wouldn’t surprise me that you can’t!! Also, FYI, I know this is a demo but you’ll find people copying this verbatem so it’s worth noting, you should try and uppercase style your text when the design says so instead OF TYPING IN CAPITALS. This is also confusing and bad for accessibility. I’m still learning Framer but if there’s one thing i’ve learned is don’t completely trust these tools to fix mistakes and if they do something weird, report to the community. Looking forward to share more as I learn on my own channel! Thanks again for sharing, I learned exactly what I needed to about variations.

@dsapio

Жыл бұрын

@@webflowandcode You've made some solid points. I probably didn't go as in depth as I could have because I wanted this to be more beginner friendly and not scare people off but you very easily identify a "button" tag in Framer's accessibility panel on the right. This will correctly mark your button for SEO, accesibility reasons. I will add that onto the demo version as well.

@webflowandcode

Жыл бұрын

@@dsapio Im honestly really confused by framer. I come at it from a developer standpoint so I’m looking at creating divs, sections, buttons, links right from the interface but Framer seems to push you down a pre-made route. Like the fact that rows and columns are just dragged onto the canvas with position absolute. It’s a very different way to build websites and I’m not sure if I’m missing something. Will follow more of your tutorials but I just approach things like a dev and figure out how to do that in the tool. It’s weird that changing a tag is an “accessibility” thing to me. Whether something is a button or a section should be your first choice (IMO) rather than third after styling. I’ll figure it out. Thanks again!!

I tried to use the code override for the highlight animated button but it didn't work )))):

Can anyone share the remix project of it. I'm getting an error. I want to implement it in the Code. Thanks in advance

Tutorial for Cursor follow animation in framer

Seems so empty compared to an afternoon at the beach.