Tutorial: Animated Navbar in Framer (New Trend)

[@blinkmediallc]

one of the things I enjoy most about your tutorials, and maybe it's planned, but i love when you run into snags or issues and show us how to fix it or figure it out. It makes it seem more irl.

[@framer.university]

haha, thank you mate! so happy you're enjoying it

[@rando_ando]

Genius! Love the versatility Framer gives you for effects like this. Thank you for covering!

[@framer.university]

once you learn the building blocks, you can build so many fun stuff :)

[@VivekKumarSahu1]

Super clean and smooth nav animation! 🔥 Exactly what I needed-thanks for breaking it down so clearly! 🙌💯

[@framer.university]

so happy I could help :) lmk if you need anything else!!

[@kafiahammed3548]

You are Framer GOAT 😊

[@framer.university]

ahh 🤭

[@ayodeleopeloye]

Infact 🤗🤗🤲🤲 I took like this Nnadi. ❤ He is very helpful. How I wish I can know him more than this.🤲🤲🤲😊😊

[@fendrapunu4657]

oh my god, this is the thing i looking for an age... a 1000 thanks for make this video...

[@framer.university]

You’re welcome! I hope you’ll finally be able to do it following along with the video. Let me know if you need help!

[@mrmikimessina]

this is what i was waiting for

[@framer.university]

[@talhazaryab]

I love your content. Superb..

[@framer.university]

i love u for this comment :)

[@PaoloLunardon]

Love these videoss!!! So clear, so interesting

[@framer.university]

Thanks mate! Im glad u like them 🙏

[@TheArcherEffect-c7t]

Thanks for this breakdown!! Can't wait for Framer University to go live in 2025!

[@framer.university]

Glad u liked this :) Excited about 2025 👀

[@lucasackermann053]

🔥🔥 VERY GOOD MANN!!

[@framer.university]

thaaanks broothaa 🫡

[@EnzzzoFarias]

Thanks for the valueble content! ❤ You are my 1# Framer teacher

[@framer.university]

aw I appreciate u so much

[@fazzyakamello]

Amazinng tut!

[@framer.university]

thank u so much

[@subhash22-10]

Got it at the right time 👍

[@framer.university]

reading minds

[@redbot_ai]

Masterpiece! A+++ ⭐⭐⭐⭐

[@framer.university]

thank you

[@antonycarrington1724]

Great Tutorial!! I noticed that you can achieve the same effect but by using "On scroll" instead of using the custom trigger points. Is there a specific reason why you choose "Section in view" over " "On Scroll"?

[@framer.university]

Bc i want to trigger the animation when i reach a specific section on the website. On scroll in this case would trigger the variant switch every time i scroll down and back up, no matter where im on the site

[@dmabubakkar9840]

nandi..You can make a video ..gsap animation explorer an ..how to use the gsap amimation use in framer

[@framer.university]

What would u need gsap for in Framer? It has Framer motion ✨

[@FLVXVLF]

This looks so good! Is it possible to have the logo change from text to a smaller icon/graphic instead of just a smaller version of itself?

[@rumorscameras]

Hey nandi. Need help. Not related but i have a few images on the framer canvas, i really need to use them as image fill for another component i have with a slide show..i cannot use them as image fill bcz they re on the camvad not on my computer, also i cannot save them on my computer from the canvas bcz they re on the canvas....any ideas how to go arojnd it thanks alot nandi

[@framer.university]

You can select them and on the right panel export them (this might only be available in desktop app). Alternatively just screenshot them lol

[@ErrorAssasinOfficial]

thanks you so muchh bro i am webdesigner and that me help a lot 😊😊😊

[@framer.university]

Glad to hear that :) happy to help fellow designers

[@pratheekpurohit1079]

I had a questions: To make a parallax effect, how do we get images? like lets say I want a particular image in multiple layers, how do I do that? please let me know!!

[@framer.university]

you can separate them in photoshop or some other image editor. i explain how in this video: kzbin.info/www/bejne/iHO7aGqqm9pmZqMsi=sI7VVsHMANGBMH-C

[@bharat5194]

Fantastic

[@framer.university]

Thank you! Cheers!

[@akashchopperla9809]

Can you make a video on how to create a preview section for list items in the home page or any other pages

[@framer.university]

Could you explain this in more detail so that I am sure what you mean?

[@akashchopperla9809]

@framer.university like in framer university quick preview. There is an eye ball when i click it we get a quick preview

[@akashchopperla9809]

Like in framer university there is a quick preview

[@akashchopperla9809]

And framer university there is a custom search bar with a lot of filtering options. Can you make a video on how to create that also.

[@franlee7028]

Thank you for your video; I learned a lot. However, I have a question: I can't seem to achieve the delayed fade-in effect for the three texts in the Link section. It would be wonderful if you could respond when you have the time.

[@franlee7028]

I suddenly realized, I can remix

[@framer.university]

haha great! 😅

[@Shahzaib_web]

Bro kindly next video on how to apply for framer expert badge on contra

[@framer.university]

To qualify as a Framer Expert, you must meet the following requirements: 1. Complete your Contra Profile 2. Link your portfolio (built in Framer) as a social link 3. Add "Framer Expert" to your bio 4. Publish at least two portfolio projects that demonstrate your Framer expertise. One of these needs to be a client site (on a custom domain) built in Framer. Please remember to include a preview link to the site you have built. 5. Offer at least 1 service using Framer 6. Complete your first client project on Contra with Framer and include the name of the client in your application. You can apply here: contra.com/opportunity/gWqmZP6l-framer-expert-program good luck!

[@Carxrc]

What is the font that you used for the logo?

[@framer.university]

Krona One :)

[@life_Of_Bowie]

Everything worked great on my end but I got this weird grayish color appearing during the transition. Anyone know what I did wrong or is this unavoidable with a white background?

[@badsevenfirefoxisback1541]

DAAAAAAAAAMN, but,I was expecting 3 vids a week😔

[@framer.university]

soon ramping up to 2/week :) stay tuned bud

[@ayodeleopeloye]

Thank you Nnadi🤲💙

[@framer.university]

@@ayodeleopeloye happy to help!

[@dhimsaww8804]

Sir, can you make tutorial something like a login page:)

[@framer.university]

for that, you need to use something like framerauth.com/ :)

[@VorTex-ux9vo]

sir , can you teach me how can i make chatbot in framer using gemini free api key

[@framer.university]

Unfortunately that would need custom code and i’m just a no-coder :(

[@race512]

You say "wrap them in a frame" but proceed to wrap them in a stack. can you expand on the difference

[@race512]

no offense bro, but you're terrible at explaining, work on that