Жыл бұрын
5 жыл бұрын
Пікірлер
@vthelagan2198 19 сағат бұрын
what if i have many sections in my website and i want it to happen on other sections too. how can i do it. please make a tutorial on this
@SamiSabirIdrissi Күн бұрын
Amazing man. Great work
@SamiSabirIdrissi Күн бұрын
Dope bro
@birabir8595 5 күн бұрын
Thanks, for the good video.
@lauragab7576 8 күн бұрын
thank you so much! tried many ways of creating the effect, but this is the only that works exactly how i want :)
@vptomt 13 күн бұрын
Is anyone else having issue where their video is NOT autoplaying on iOS mobile devices? Works fine on desktop browser (with mobile resolution) but not when deployed to Vercel and viewing on phone.
@imtotallyseriously Ай бұрын
I didn't get how Firefly is going to replace XD. In this example, an image was generated, and that's it. There's no UI component in FireFly.
@emersonvisuals Ай бұрын
That's correct, and I never mentioned it would replace XD or Figma. It is a useful tool for UI designs, specifically for generating stock images for elements like image banners, icons, or even as inspiration. Again, AI is a tool, not a replacement. If you would like to use AI to streamline your UI components - Figma just released their AI tools which can be used for these sorts of tasks. Hope that makes sense!
@imtotallyseriously Ай бұрын
@@emersonvisuals Figma’s AI tools are maybe not so hot, or maybe I’m not using them correctly. But I think Framer does a good job of completely using AI to generate wireframes, content and design based on prompts. Which is kinda a true AI tool for UI design.
@imtotallyseriously Ай бұрын
@@emersonvisuals Also, Adobe says Firefly will replace XD, which is where I’m coming from. As XD is in maintenance mode and will be discontinued in sometime. Which is annoying as an XD user.
@anniekate8377 Ай бұрын
Nice brother Really
@emersonvisuals Ай бұрын
Thank you so much 😀
@stalinengoma7680 Ай бұрын
This is a rare moment for me that as a newby in React and Web Dev, I watch a video and practice without any hussle. This dude is a G.O.A.T. In this 44 min video content, you made me understand tons of stuffs that were popping out of my mind without opening my mouth Thank you very much
@emersonvisuals Ай бұрын
Thanks so much! Really appreciate it :)
@fernandodiaz2578 2 ай бұрын
amazing bro
@emersonvisuals 2 ай бұрын
Thank you so much 😀
@Afgprogrammer 2 ай бұрын
amazing ❤
@emersonvisuals 2 ай бұрын
Thank you! Cheers!
@emersonvisuals 2 ай бұрын
If you want to learn more about the basics of on-scroll image animations, check out this video I uploaded a few weeks ago: kzbin.info/www/bejne/h16Vqoibl7V1jcU
@VijayGoswamiIndia 2 ай бұрын
What about responsiveness?
@patrap4625 2 ай бұрын
just do it yourself.its 10% of the the work that he has shown.
@emersonvisuals 2 ай бұрын
If you want it to be responsive - you'll need to experiment with the useTransform(scrollYProgress, [0, 1], ["0%", "-55%"]); values as well as the width of your images once it gets to a mobile width. I have other videos on my channel which demonstrate responsive design if you wish to learn more about that. Hope this helps :)
@RB_MAFIA 2 ай бұрын
great
@emersonvisuals 2 ай бұрын
thanks so much!
@RB_MAFIA 3 ай бұрын
it would look even better if all the images were one below another and text was offset horizontally accordingly. but still great work. you have a new subscriber <3
@emersonvisuals 3 ай бұрын
Thanks so much for the advice! I appreciate it! 😊
@JawadA. 3 ай бұрын
Hi friend, how can we implement the animated website design in Figma, which has a prototype, animations, and component animation variables, so that we can make the same working on React J's and Next J's using the Figma design? Is this possible and can you create a tutorial related to this?
@RB_MAFIA 3 ай бұрын
lovely
@emersonvisuals 3 ай бұрын
Thank you!
@muhammad_bilalkhan 3 ай бұрын
great
@emersonvisuals 3 ай бұрын
Thank you!
@voldemortvi4264 3 ай бұрын
Great tutorial
@emersonvisuals 3 ай бұрын
Thanks so much!
@darkwind01142 4 ай бұрын
Great work thank you!!
@emersonvisuals 4 ай бұрын
Glad you liked it!
@Ahmadsalah-qz9xh 4 ай бұрын
many thanks to you man, from many videos I found this simple and clear. keep going in react tutorials and THANKS again 🤝
@emersonvisuals 4 ай бұрын
Thank you so much for the kind words!
@MarcinSzumiel 4 ай бұрын
Next-videos is not working properly if you want to deploy the app on github pages for example.
@Sebastian-kk6yf 4 ай бұрын
nice content bro
@emersonvisuals 4 ай бұрын
Thanks heaps - glad you liked it!
@naksuy 4 ай бұрын
Pls how can I set the progress bar to display on the right🙏🙏. I saw how you did both top and bottom and was really hoping you'd show 'right' 🥺 8:42
@devanpellow6705 5 ай бұрын
Great work thank you!!
@emersonvisuals 5 ай бұрын
Glad you liked it!
@digitalBrandingScreensavers 5 ай бұрын
Yes I changed the next.config.mjs to what you wrote below then I got this error: Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'next-videos' imported from C:\Users\Home\securedataexchange ext.config.mjs at packageResolve (node:internal/modules/esm/resolve:853:9) at moduleResolve (node:internal/modules/esm/resolve:910:20) at defaultResolve (node:internal/modules/esm/resolve:1130:11) at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12) at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25) at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38) at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39) at link (node:internal/modules/esm/module_job:84:36) { code: 'ERR_MODULE_NOT_FOUND' } Can You Help me out?
@rheavictor7 5 ай бұрын
Beautiful content man, thank you for the effort!
@voldemortvi4264 5 ай бұрын
Amazing like always
@emersonvisuals 5 ай бұрын
You're too kind! I appreciate the support :)
@dinoDonga 5 ай бұрын
Hey hey. I basically built the same thing but ran into an issue. I added section snap scroll to my page. In order for snap scroll to work the container needs a fixed height in my case 100vh. Since this means that the entre thing fits inside the viewport the scroll progress is always at 100% and the bar is omnipresent. Any idea how to work around that?
@emersonvisuals 5 ай бұрын
Hey there! I understand the issue you're facing. Indeed, when the container is set to 100vh for snap scrolling, it limits the page height, causing the scroll progress to always show 100%. One workaround is to adjust the document's height to be greater than 100vh, allowing users to scroll through the content. Alternatively, you could explore using a custom scroll progress bar that triggers based on scroll events rather than viewport height. This would provide a more accurate representation of the user's progress through the page. Let me know if you need further assistance or if you'd like to explore other solutions!
@emersonvisuals 5 ай бұрын
If you have a live site of the issue you're facing, feel free to send it through and I can have a look for you if you need!
@mehedihassan6904 5 ай бұрын
after deployment the video does not appears, how to fix this issue?
@emersonvisuals 5 ай бұрын
Hey there - what website / platform are you using to deploy the video? If you are using netlify, you shouldn't have any issues but let me know if you are using something else I can have a look for you!
@enoskyeza1000 5 ай бұрын
@@emersonvisuals Hello, thank you for sharing. I am facing the same issue and i deployed to netlify with video size of 12mbs. Edit: I just added "use client" and it fixed the issue.
@timothyroberts5622 6 ай бұрын
Thanks so much for the awesome tutorial! Goes to show how powerful framer motion is when using it with Next.js or React!
@emersonvisuals 6 ай бұрын
You're very welcome!
@dopetag 6 ай бұрын
What are the benefits of using next-videos indtead of explicitly coding a react component with video tag?
@emersonvisuals 5 ай бұрын
The next-videos npm package facilitates the loading and usage of videos locally within Next.js projects. In contrast to React, where the <video> tag can be used without issues, Next.js presents challenges when using this tag due to its server-side rendering (SSR) nature. Next.js determines whether components render on the server or client side, which can lead to errors and issues when using the <video> tag directly. Therefore, to manage video playback effectively in Next.js, utilizing packages like next-videos is recommended.
@mehedi_mosharrof 6 ай бұрын
great video, but i'm facing a problem. Video just works fine in localhost, but when i deploy to vercel, it does not show up
@sebastianrubina2586 6 ай бұрын
Gracias Luisito Comunica Programador
@emersonvisuals 6 ай бұрын
Thank you!
@mrajax_0101 6 ай бұрын
nice video!. Mobbin subscription is so expensive for us because of our country's low purchasing power, idk what is great alternative or cheap alternative, i find refero little cheaper with student discount what do you recommend? is refero is good as mobbin? or any other free platform for ux flows etc? thank you
@emersonvisuals 6 ай бұрын
Hey there! look, if it’s too expensive you can always use their free versions! Alternatively, you could always stick to the first two options I mentioned in the video since these are completely free and you have full access. Hope this helps!
@voldemortvi4264 6 ай бұрын
Great tutorial
@emersonvisuals 6 ай бұрын
Thank you so much!
@Samuelsongwe 6 ай бұрын
How am I only finding this channel now . Beautiful content 💯
@carloscodling5084 6 ай бұрын
This is amazing!! This video has inspired me to create my first portfolio, thank you so much and keep it up!!!
@emersonvisuals 6 ай бұрын
I’m so happy to have helped! thank you!
@emersonvisuals 6 ай бұрын
ATTENTION EVERYONE: If you are using a next.config.mjs file RATHER than a next.config.js file the syntax shown in the video will not work. If you wish to use the next.config.mjs file then use the following syntax as an alternative to solve the issue: /** @type {import('next').NextConfig} */ import withVideos from "next-videos"; const nextConfig = { /* config options here */ }; export default { ...nextConfig, ...withVideos(), }; Thanks everyone - happy coding
@sim10die Ай бұрын
You're a legend for this, happily subscribed.
@fernandomata4242 7 ай бұрын
nice video, i didnt know about the second and third website
@emersonvisuals 6 ай бұрын
Glad I could help! 😊
@mobinadanshvar7558 7 ай бұрын
tnQ,🥰 it was really useful to me thanks a lot😍😍
@emersonvisuals 7 ай бұрын
Thanks so much!
@kevyyar 7 ай бұрын
what about performance? example does it affect the video loading if a user lands on the page and has slow internet. i know it depends on the video size but does it matter if its just added on the hero as a background like the example you provided?
@emersonvisuals 7 ай бұрын
I would say it would depend on the file size! The higher the mb, the slower and poorer the performance becomes :)
@emersonvisuals 7 ай бұрын
Learn more about framer motion in react/nextJS projects by checking out my latest video here: kzbin.info/www/bejne/ioLGiYaBZdBoaNU
@MichaelYagudaev 7 ай бұрын
Great video! Thanks for showing the workflow. I'm curious if you tried any tools for designers to make the website live, like Webflow for Figma or any of the AI tools that generate code from Figma
@emersonvisuals 7 ай бұрын
Hey there - yeah I’ve tried web-flow! But I personally prefer coding - it really just depends on your preference! If I come across any other AI tools to generate the code I’ll definitely create a future video on it! Glad you enjoyed it!
@MichaelYagudaev 7 ай бұрын
@@emersonvisualsyeah I tried Anima Figma Pluign app, it does a decent job as long as you convert layers into auto-layout and group them similar to code. I'm actually a Figma Plugin developer and doing research on next set of tools to build 😊. So if any painpoints come to mind, love to take a look at those. Another thing I noticed is when you implement it, you'll need to create a responsive design as well. Did you find any tools that help you automate that part? Or a workflow that helps create the responsive design more quickly?
@Diego_Cabrera 7 ай бұрын
Framer motion is sweet.
@emersonvisuals 7 ай бұрын
100%
@mgriffes 7 ай бұрын
Thank you for putting this together and offering it up. I am interested in learning Framer Motion, so this was great. It was helpful for me to comment out the 'prefers-color-scheme: dark' media query in the global.css file. That way I could follow along and produce the same result in the browser. Also, the burger menu effect, developed from scratch, is straightforward but very cool. Really enjoyed working through this. Thanks again!
@emersonvisuals 7 ай бұрын
Thanks so much for the amazing feedback! I’m glad you enjoyed the video!
@1942Bombay 7 ай бұрын
A 44-minute video, and what I did was watch and copy everything like you were doing, adapting it to my project. It took me about 3 hours since I was going back and forth, but I've learned a lot. I understanded some CSS concepts that I didn't before and at the same time, learned more React. I know I can't reproduce this menu on my own just yet, but I surely have a better idea now of many elements. If I continue practicing and writing code, I know I'll start creating my own sidebars. So, thanks a lot!
@emersonvisuals 7 ай бұрын
I’m glad you enjoyed it!!
@igoraguiar00 7 ай бұрын
Can I use router with .js files or just .jsx?
@emersonvisuals 7 ай бұрын
I’ve never done it with a .js file - but give it a go! I reckon you should be able to! Let me know how it goes :)
@igoraguiar00 7 ай бұрын
I realized that next.js does that too so I will try differently but I really appreciate all the CSS content you posted on this video ! @@emersonvisuals
@emersonvisuals 7 ай бұрын
@@igoraguiar00 it’s my pleasure 😊
@timkocik 8 ай бұрын
Great video! I am excited to start using some of these tools.
@emersonvisuals 8 ай бұрын
Thanks so much!
@Saturae 8 ай бұрын
How do you import a color palette from AI color into Figma?
@emersonvisuals 8 ай бұрын
Hello! Simply take a screenshot on your computer, copy, and paste it onto your Figma board. Afterward, utilise the eyedropper tool to select the colors from the palette :)