Framer Tutorial: Creating A Galaxy Button Animation

🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this Framer tutorial, you'll learn how to create a beautiful galaxy button in Framer. I'll demonstrate how to create the button component and how you can add a code override to it to enhance the effect. After watching this video, you'll be ready to create your galaxy buttons in Framer.
Project remix: framer.university/resources/g...
00:00 - Introduction
00:31 - Creating the text
01:52 - Adding a background galaxy
03:08 - Creating a component
03:28 - Setting up the default state
04:09 - Adding a hover state
04:44 - Creating a code override
06:09 - Finished button
06:35 - More free Framer resources
Follow me on:
X: x.com/learnframer
Instagram: / framer.university

Пікірлер: 41

  • @frameraddict
    @frameraddict6 ай бұрын

    Thank you for another awesome tutorial.

  • @framer.university

    @framer.university

    6 ай бұрын

    I’m glad you liked it! 🫶

  • @mortezaajidanpour9381
    @mortezaajidanpour93815 ай бұрын

    top-notch tutorial 👌🏻

  • @framer.university

    @framer.university

    5 ай бұрын

    Thanks 🙏

  • @leandrosilva6414
    @leandrosilva64146 ай бұрын

    When smooth scroll to taget/sections with only mouse/trackpad.. This would make this software perfect!

  • @NeerajPandey-ss7je
    @NeerajPandey-ss7jeАй бұрын

    Great content! Just one suggestion: try to explain it as if you were teaching someone who isn't familiar with Framer.

  • @framer.university

    @framer.university

    Ай бұрын

    Hey thanks for the feedback i'll try doing that next time. Can i ask what exactly confused u so next time i can explain it better?

  • @gabrielegelfofx
    @gabrielegelfofx6 ай бұрын

    Very interesting…Please more tutorials on how to interact with the code. For example, it would be possible to interact with Spline embedded scene states directly in Framer through code overrides?

  • @framer.university

    @framer.university

    6 ай бұрын

    You can make your Spline embed interactive without any code overrides. Check my Spline video!

  • @edanriell
    @edanriell6 ай бұрын

    It would be really cool, if you show the code behind all this stuff =)

  • @framer.university

    @framer.university

    6 ай бұрын

    It is there :)

  • @edanriell

    @edanriell

    6 ай бұрын

    ​@@framer.university Yeah, but not for everything... And as far as i can tell right now, there is no actual way to see the applied code to components in framer platform itself, which is a huge mistake from my point of view.

  • @edanriell

    @edanriell

    6 ай бұрын

    @@framer.university So i hope that in upcoming course we will see code, which does all the magic =)

  • @cp3onmtv963
    @cp3onmtv9636 ай бұрын

    Another cool one! Have you considered doing a ‘as seen as’ series? I’ve seen some vids where they take a popular site and show you how to recreate the effect, but it’s usually for webflow. Have seen a few cool portfolio animations that I’d like to learn to do in framer

  • @framer.university

    @framer.university

    6 ай бұрын

    That’s what I usually do. Check out my other videos and let me know what else I should recreate.

  • @cp3onmtv963

    @cp3onmtv963

    6 ай бұрын

    My replies keep getting deleted and I dont know why. But a cool one I found is at lxu (DOT) design. Its not far off from what youve demonstrated here. Im most interested in learning how to have a static image then turn to a video on hover, and how to make it in a way that works well for both mobile and web

  • @cp3onmtv963

    @cp3onmtv963

    6 ай бұрын

    @@framer.university I’ve tried reply 5 times and my comments keep getting deleted for some reason?? Do you have somewhere else I could respond ? Never had a commenting problem before

  • @topperboi1642
    @topperboi16426 ай бұрын

    Can we get a tutorial on the animations done on "reflect notes" Landing page Thank you for this amazing video as well!!

  • @framer.university

    @framer.university

    6 ай бұрын

    Thanks! Can you send a link?

  • @muhammadrazanas
    @muhammadrazanas6 ай бұрын

    what to select on accessibility tag when using Different component name

  • @framer.university

    @framer.university

    6 ай бұрын

    It needs to be “button“ tag

  • @shryan4595
    @shryan45956 ай бұрын

    This looks great! Actually I’m a dentist and im trying to make my own website but couldn’t make it can you please come up with a tutorial of a dentist website? It would help me! Thank you

  • @framer.university

    @framer.university

    6 ай бұрын

    What your site would include?

  • @Bagel-lt2xh

    @Bagel-lt2xh

    6 ай бұрын

    Try viewing a similar web design tutorial for salon and barber shops, similar design and layout process and many go over booking and using calendly for clients, I believe this channel may have one

  • @LIGHT-de1zb

    @LIGHT-de1zb

    6 ай бұрын

    @@Bagel-lt2xhcan you please share the tutorial video? I’ve already tried couldn’t fine one relatable

  • @moshe3072
    @moshe30726 ай бұрын

    Can you ask Primer when they will connect Google Sheets to CMD? I think if this happens, Primer could build really good responsive sites

  • @framer.university

    @framer.university

    6 ай бұрын

    What is Primer and CMD?

  • @pankajchakraborty414
    @pankajchakraborty4146 ай бұрын

    bro when will you launch the course

  • @framer.university

    @framer.university

    6 ай бұрын

    Courses are coming from Q1. Soon bro! Stay tuned :)

  • @orelhassid
    @orelhassid5 ай бұрын

    Please make a tutorial on how to make a loop gradient border animation just like Framer CTA button❤

  • @framer.university

    @framer.university

    5 ай бұрын

    Here is a remix: framer.university/resources/gradient-border-button-component-in-framer

  • @orelhassid

    @orelhassid

    5 ай бұрын

    @@framer.university Thank you ❤ a hover effect on the button was missing for me but overall that button is lit 🔥🔥

  • @Rajdeep_Pandey
    @Rajdeep_Pandey5 ай бұрын

    6:04

  • @framer.university

    @framer.university

    5 ай бұрын

    ?

  • @Bagel-lt2xh
    @Bagel-lt2xh6 ай бұрын

    These videos from Framer "universoty" would be more useful if you explained WHY you do the different things such as wrap,, choosing specific opacity, borders sizing etc. You simply state what you are doing but dont actually explain why or how. Also. Console commands will vary. Stop using them in these basic tutorials. It makes it harder to follow along

  • @framer.university

    @framer.university

    6 ай бұрын

    Thanks for the feedback! 🫶 What do you mean by console commands?

  • @Bagel-lt2xh

    @Bagel-lt2xh

    6 ай бұрын

    @@framer.university I just mean the hot keys and the variation between Mac and Windows and Linux based software and their inputs. They are different in numerous ways. Aside from that, instead of using the hot keys it would be nice to see how to do everything directly through Framers Indexes before learning the hot keys. For me, personally, it allows me to grasp the software better when first starting out. - Someone coming from game and map/architectural design software. I never used hot keys really

  • @1nonlykingnaeem
    @1nonlykingnaeem6 ай бұрын

    Is Framer can make a someone's career?

  • @Bagel-lt2xh

    @Bagel-lt2xh

    6 ай бұрын

    Any specified skill set can be used to produce profits

  • @1nonlykingnaeem

    @1nonlykingnaeem

    6 ай бұрын

    @@Bagel-lt2xh is framer is the future?

  • @framer.university

    @framer.university

    6 ай бұрын

    Imo Framer is the future, so yeah.