Parallaxing Effect on Scroll in Figma
Вставка
- Опубліковано 29 січ 2023
- In this tutorial, we look at how to create multi-layered, and different types of components that parallax on scroll. At the time, this is only possible through dragging to scroll the page, but with a smart layout, and well-designed components this experience is very slick and perfect for mobile app prototyping.
Subscribe : / @darrennorthcott
Patreon: / darrennorthcott
Sign Up for Updates, Tips & Tricks : northcott.substack.com/
Download Figma: bit.ly/41F6yaS
#figma #tutorial #UX #appdesign #ui #animation
Чувак, у тебя не голосовые связки, а две толстенные мясные котлеты!! Спасибо за видео
Luv It!!
Thank you bro, God bless you
I love your work sir pls make video on auto layout or make a full course video on figma thank you 🥰
Workin' on it.
Hello is it possible to upload this into html or website directly from figma ?
I really love your video, do you teach any courses?
Could you add separate on hover animations to this? Like let’s say you get to the bottom of the page and you want an on hover effect to happen when you get to that section (bottom section) of the page
Should be able to, might be best to put those in a component between variant states and it should work no problem.
Hey Darren, thanks for the sharing your method on parallaxing. I have a question on your mockup. How are you using a phone mockup without inserting your content into a mock up frame? When you preview, the content automatically is placed inside a mockup
Auto layout
Hey, I am trying to figure something similar out on figma. I do not want that overlay, but for a frame on the right of my page to stay fixed for a particular section while scrolling down. You see it a lot on car websites. Where when you scroll down, the price stays on the ride side and as you continue scrolling to read the information on the left hand side, it stays parallel until you get to a certain point where it stops, but you can keep scrolling to the bottom. Not sure if this makes any sense.
Yeah man, I know what you're talking about. Something Figma has been - and STILL is - lacking from the beginning, the ability to set a fixed position within a scroll range. The only way you do it now, is maybe break your flow into 2 screens (one with the side nave fixed, and one with it scrollable) and then use a drag even at the part you want it to transition ... if that makes sense..
@@DarrenNorthcott Thanks for the response. I am just starting to use figma for a project, so know very little about it
I can't seem to drag to next section even I follow your tutorial. It always do 1>2. then 2>1. it doesn't proceed to 3.
Make sure you are putting the interaction on the same component (the Stack) for both interactions, sometimes it can get tricky with nested auto layouts.
Hi. Is it possible to apply this technique on but when you hover over the image (within a dashboard for example)? Then once it is selected, apply exactly what you have done in the video?
I'm not quite sure what you mean... do you mean only have the parallax effect on scroll when you hover over the element? Or do you mean when you hover over the image, the parallax effect automatically plays?
Hi! I'm trying to make this, maintaining a status bar with fixed position when scrolling. But it's not working. Could you show how?
Hmmm, yeah, I think you would have to have it on each of the screens, then the smart animate feature will maintain it's position through each scroll animation
@@DarrenNorthcott And have I them on each screen. I have the animation on the components, but it still doesn't work. At the beginning of this video (1'29'') you show the status bar, on the top of the screen, but during the process it's not there. Do you have a video where you show the whole process, adding the status bar? Thank you
I tried it again but with a difference. I didn't turn the Home frame into a component. This way I can scroll the whole page up, underneath the status bar, which I couldn't if I had made a component of the Home frame. Though it may work, I don't know if it's the best way. If you have a video where you show the whole process please tell me. Thanks!
Hey! I-m new into this and my question might come across as rude or something but it's a serious question.
As far as I understand you cannot export anything to code using figma (only Css). so what's the purpose of doing a parallax effect if the developer will have to recreate it. isn't it easier to just tell the dev what you want? or do you do it for aesthetic proposes to show your work and scope? thanks
Great question. There's a number of reasons, one being to show the client what the expected result is. It's always better to not have surprises once it's developed. This can also be helpful in usability testing as sometimes, parallax effects can be distracting from a UX perspective. As for developers, it's ALWAYS beneficial to show them what the intended effect is, rather than just describe it, this way they can see the amount of parallax, when it's triggered etc.
I don't code. But I just want to know if it's easy or difficult for codes to code all the animations ?
Haha depends on the developer ;) to be fair, figma is a web-based tool so all of these are accomplished through HTML, so definitely doable. Figma also shows the code for each component so that should help.
@@DarrenNorthcott thanks. I'm learning UI UX by myself and I've done a couple of designs for my school work. I love the content on your page.
I've subscribed.
Another drag (not scroll) parallax effect video.
Another youtuber who doesnt seem to understand the difference between SCROLL and DRAG. Change your title