My Friends Didn’t Believe I Made This!

🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this Framer tutorial, you'll learn how to create an Apple-style parallax hover card with progressive blur in Framer. I'll show you how to prepare images for this interaction and how to add effects like parallax hover and progressive blur without any coding. With the help of this video, you’ll be able to create interactions that blow your friends mind.
Remix and starter file: framer.university/resources/p...
Original concept by Arkady: x.com/sovpal/status/177998991...
Progressive Blur (Blur Gradient) component: framer.university/resources/b...
Parallax Hover Override: framer.university/resources/p...
Icon pack mentioned in the video: dub.sh/central
0:00 - Introduction
0:52 - The roadmap
1:34 - Preparing assets
3:47 - Building the base
16:29 - Adding effects (Progressive Blur)
18:19 - Adding the parallax hover effect
23:29 - Additional resources
Follow me on:
X: x.com/learnframer
Instagram: / framer.university

Пікірлер: 49

  • @oussamachuiter586
    @oussamachuiter5862 ай бұрын

    I hope you compile the videos into a playlist list, so that they can be a course

  • @eba-rave7509
    @eba-rave75092 ай бұрын

    Fantastic video! I truly value the insightful content you share!

  • @framer.university

    @framer.university

    2 ай бұрын

    I appreciate you:)

  • @omotayotaiwo4375
    @omotayotaiwo43753 күн бұрын

    Epic Stuff Nandi

  • @framer.university

    @framer.university

    3 күн бұрын

    Appreciate u so much!

  • @hoanghantlz
    @hoanghantlzАй бұрын

    wow this is so great and helpful. thank you

  • @framer.university

    @framer.university

    Ай бұрын

    I’m glad this helped, Hoang ✌️

  • @techdomain382
    @techdomain382Ай бұрын

    I'm a newcomer to the community, is there a discord? Your content js helpful. Im here to stay. What the other user said about clickbait is true, some of us censor clickbait from our Internet lives because they don't help us make money in real life, you don't want to gain a bad rep among a certain crowd because yourd interested in attracting the massess who probably would move on to the next clickbait title. Thanks for content regardless 🙏🏾🙏🏾🔥🔥❤❤ Praying for wins

  • @framer.university

    @framer.university

    Ай бұрын

    Hey! I don’t have discord but u can join the framer.community. I’m glad you find my content helpful and thanks for the feedback 🫶

  • @-_SamsulHadi
    @-_SamsulHadi2 ай бұрын

    its realy cool sir!

  • @framer.university

    @framer.university

    2 ай бұрын

    Glad you think so! 🫶

  • @TiagoRosado
    @TiagoRosado2 ай бұрын

    Awesome 🎉

  • @framer.university

    @framer.university

    2 ай бұрын

    Thanks 🤗

  • @caioayres_dg
    @caioayres_dg2 ай бұрын

    Could you teach how to create a toggle that varies between light and dark themes on the website?

  • @framer.university

    @framer.university

    2 ай бұрын

    it's simple! just use this: theme-switcher-override.framer.website/

  • @eternitygraphic
    @eternitygraphic2 ай бұрын

    Great video! I appreciate the valuable content you provide. Also, I read @baldrat comment, but I want to portray my opinion that It's necessary to create clickable thumbnails because even if the content is top-notch, it won't reach its potential audience without the right visuals to draw them in. Keep up the excellent work! 😄

  • @framer.university

    @framer.university

    2 ай бұрын

    thank you so much! :) more to come 💙

  • @irinavasylenko9781
    @irinavasylenko97812 ай бұрын

    Hey, tried 10times, but have trouble with 3d that brokes component while previewing, and light effect are not cropped by the component borders -could you help with this?)

  • @CoilFYZX
    @CoilFYZX2 ай бұрын

    I have a great one...is there a way to open the search bar with "pre-loaded" content? I feel like I'm heading eerily close to needed code for this one?

  • @mt000mp
    @mt000mpАй бұрын

    both cards are moving, how can I make only one card interact with the current mouse that is above the component?

  • @ok_roman
    @ok_roman2 ай бұрын

    But biggest question is - how do you make it only animate when mouse is within the card? So all cards don't move in unison at once, which is distracting.

  • @BengieOyola
    @BengieOyola2 ай бұрын

    Great tutorial! Is there a method to restrict movement within each section? For instance, could I set it up so that the image animates only within the Hero section, and as soon as the viewer transitions to another section, the animation halts?

  • @framer.university

    @framer.university

    2 ай бұрын

    Thanks! The override is set up in a way that once the element is out of view, it no longer follows the cursor. Lemme know if you need any help :)

  • @BengieOyola

    @BengieOyola

    2 ай бұрын

    ​@@framer.university Thanks for getting back! It seems the problem that I'm having may stem from the sections being too closely spaced. With multiple sections visible simultaneously within the viewport, the desired effect might not be achieved.

  • @EpicEnt01
    @EpicEnt012 ай бұрын

    Hello, thank you for the wonderful video, but I have an important question, and that question is, can you do the same things you do with code, for example, connect to the database and get information from the database, insert and delete accounts, etc. using this software framer? if yes, can you give me some tips plz

  • @framer.university

    @framer.university

    2 ай бұрын

    I’m glad you liked it 🫡 Yes you can! Unfortunately, i can’t give you useful tips since im focusing on the nocode part of Framer.

  • @EpicEnt01

    @EpicEnt01

    2 ай бұрын

    @@framer.university wow cool! Appreciate a lot hehe 💚💚

  • @behroozmohamareh4462
    @behroozmohamareh4462Ай бұрын

    how can you make them buttons as well and clickable

  • @framer.university

    @framer.university

    Ай бұрын

    Simple add a link property to it on the top of the right panel.

  • @Kate_WebDesign
    @Kate_WebDesign2 ай бұрын

    Hello! What do you use to record your screen?

  • @framer.university

    @framer.university

    2 ай бұрын

    hey! i'm using screen studio.

  • @basharatfaiz10
    @basharatfaiz102 ай бұрын

    How can we add a sticky curson in our website?

  • @framer.university

    @framer.university

    2 ай бұрын

    what is a sticky cursor?

  • @THIStorie
    @THIStorie2 ай бұрын

    Good video, but just a couple notes for making better tutorials for us: You shouldn't copy and paste from the finished product to the one you're working on. You should show exactly how you would create it as if it were not yet created as we can't copy and paste from a finished product on our side.

  • @framer.university

    @framer.university

    2 ай бұрын

    Hey 👋 Thanks a lot for the feedback! I’ll keep this in mind :)

  • @framer.university

    @framer.university

    2 ай бұрын

    Can you also let me know which exact copy&paste made it a little harder for you to understand the video?

  • @iklxsss
    @iklxsss2 ай бұрын

    Wow I’m early!

  • @framer.university

    @framer.university

    2 ай бұрын

    love the earlies :)

  • @baldrati
    @baldrati2 ай бұрын

    Why this clickbaity title? Don't do this.

  • @framer.university

    @framer.university

    2 ай бұрын

    What about the content of the video? Was it valuable?

  • @emmylegend5442

    @emmylegend5442

    2 ай бұрын

    It was ,very interesting , do whatever you can to push your videos bro, I feel you have a lot of useful content people could learn in short time since your videos aren't particularly long to watch

  • @baldrati

    @baldrati

    2 ай бұрын

    ​@@framer.university if i didn't care about your content i would not have commented.

  • @framer.university

    @framer.university

    2 ай бұрын

    @@emmylegend5442 thanks for the feedback, mate! :)

  • @framer.university

    @framer.university

    2 ай бұрын

    @@baldrati Gotcha! When building on social media, my job is not only to create useful educational content but also to make sure you see it. A great title that encourages a high percentage of people to click helps the algorithm push the content further, allowing it to help more people. As long as the content being promoted is valuable, I believe it is acceptable to do everything in your power to increase the click-through rate (CTR). In this world, we’re fighting for clicks, and the real issue arises only if we fail to deliver value once the click has been secured. So, please forgive me for this title and all my future titles. Instead, I would appreciate your feedback on the content rather than the packaging.