Unlocking Figma's Prototyping Gems: Scroll To Animations and Anchor Points

Want to stay up to date on new developments, tips and tricks? Make sure to follow me!
And don't forget to subscribe right here on Youtube for more!

-----------------------------------------------------------------------------------

The Power of Scroll To: Unleashing the Potential of Figma Animations

00:00 - Introduction to scroll to animations in Figma
00:10 - Get the Figma working file
00:16 - One pager navigation or menu with anchor points in Figma
00:48 - Animated picker with horizontal scroll
01:39 - Google map in Figma with scrolling both directions on click
02:47 - Advanced Prototyping

Let me show you a little more about the Scroll To action. It's actually often overlooked, but there is so much you can do with it. Make sure you download the free Figma exercise file so you can experiment with all of these animations yourself. You'll find the link in the description below.

I will show you how to:

1. Connect navigation seamlessly with different sections on a one-pager website, creating anchor points with Figma and easing to various locations on the same page.

2. Creating Horizontal Scroll Effects
But the Scroll Tool doesn't only work in one direction. You can also create nice little effects, such as clicking on a button and scrolling to a specific image, like a carousel or a selector with different colors.

3. Scroll To in Multiple Directions
And we can even take this a step further and create Scroll To in multiple directions, as seen with this map. We can set location pins, and once we click on them, scroll to different locations on a map automatically. All we really need is nested frames with clipped content and our Scroll To magic.

Make sure to download the free exercise file (link above).

Keywords
moonlearning, figma scroll to action, figma exercise file, one pager website, navigation, sections, easing animation, offset, fixed menu bar, clip content, scrolling behavior, vertical scrolling, horizontal scrolling, nested frame, prototyping, multiple directions, map, pins, hidden part, size of the nested frame, subscribe button, New Learning IO, prototyping with figma working files