Тёмный

Parallax Scroll Animation Figma | Smart Animate tutorial 

Yariv BE
Подписаться 4,1 тыс.
Просмотров 13 тыс.
50% 1

In this amazing figma tutorial you will learn how to create Parallax Scrolling animation using Smart Animate, by clicking and dragging trigger in desktop and with the drag trigger in mobile to simulate a swipe action.
This tutorial is great to sharpen your animation abilities in figma.
If you are not so familiar with interaction types in figma, i suggest to check out this tutorial -
• Figma tutorial for beg...
More knowledge about components can be seen in tutorial -
• Figma tutorial: compon... .
#yarivbe #parallaxscroll #smaranimate #figmatutorial

Опубликовано:

 

10 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 12   
@SaiArts2000
@SaiArts2000 Год назад
Great to know that you have a Channel of Figma Tutorials. Btw I'm your student from Internshala. Keep Posting the Videos Sir!!😍
@YarivBE
@YarivBE Год назад
Thanks a lot for the great feedback Sai! I really appreciate it ⚡Great to know you are from Internshala 🙂
@farzanehtabibi1970
@farzanehtabibi1970 2 года назад
thanks for the nice and complete explanation, How to add the scrollbar for the rest of the pages?
@YarivBE
@YarivBE 2 года назад
Thanks a lot Farzaneh for this great feedback :) I appreciate it 😊 To add the scroll bar to all pages, you copy and paste it to the next/another page, placed in the same exact place (of course) and change the position of the scroll handle, like i did between the first two pages, meaning, position it a bit more down and create a drag interaction to previous and next page (except the last page which will be only interaction to previous page). Basically, its an interaction between the scroll handle to the next, or next and previous page (frame). Let me know if it worked for you and also if it didnt - i'll make sure it will 😊
@marocopa
@marocopa 2 года назад
Nice explanation.
@YarivBE
@YarivBE 2 года назад
Thanks a lot for the feedback! I appreciate it 🙂
@utpaltank2529
@utpaltank2529 Год назад
Hi yariv, All the tutorials of yours are excellent and understanding, thank you. Like I got one query in website Nav bar in fixed position but I want a section in middle of webpage that has left and right, left is text and in the right multiple images stacks one after another vertically so there I need to scroll to view the images.
@YarivBE
@YarivBE Год назад
Hi Utpal and thank you so much for the great feedback! I highly appreciate it 🙂⚡ To your question - You can create an interactive component that does it in a specific area or create any type of interaction between main frames (screens) - basically it doesnt matter to which direction you create it - horizontally or vertically - technically and the logic is the same :) I hope it answers your question - let me know if yes or not and feel free to ask further.
@utpaltank2529
@utpaltank2529 Год назад
@@YarivBE Ya sure I will try and let you know once achieved the desired one and thank you for your quick response
@YarivBE
@YarivBE Год назад
@@utpaltank2529 You are most welcome my friend! Let me know if all went ok.
@condemime1
@condemime1 Год назад
but you scrolling website by mouse, not buttons. So...
@YarivBE
@YarivBE Год назад
Hi Dmitry. You can scroll websites by jumping from frame to frame, form one viewport to another. You do the same exact animation with a draggable scroll bar - animation happens when you drag form one frame to another. Here i am showing the technic of using it with clickable elements - you can choose how you want to do it. In a programmed website, of course its very easy to do "Y position" triggers. The whole idea is to demonstrate what do i want that will happen on the screen, animation wise, when the user either clicks or drags a scroll bar. Thats the whole point of the tutorial. Thanks :)
Далее
iPhone 16 для НИЩЕБРОДОВ!
00:51
Просмотров 313 тыс.
Parallax Scroll effect - Figma Tutorial
23:53
Просмотров 28 тыс.
Parallax Scroll Effect - Figma Tutorial
13:45
Просмотров 95 тыс.
Figma Smart Animate Carousel + Free Design File
29:14
Figma 3D Parallax Animations! - 3 Easy Ways
9:03
Просмотров 58 тыс.
Only Noobs Build Beautiful Websites
18:13
Просмотров 125 тыс.
How to make a text animation loop in Figma
15:19
Просмотров 9 тыс.