Over the weekend I had an idea to create a site where you would navigate by panning and zooming as if the whole site was one large interactive canvas. This would have been trivial to create using Flash or JavaScript, but I wanted to challenge myself by prototyping it in Figma using my site as a reference.
One of the reasons for exploring this design experiment is that Figma isn’t built to support this sort of navigation and creating the canvas illusion would be a fun challenge.
Figma prototyping is built for focused screens interactions and often don’t share components from screen to screen other than common components like navigation or shopping carts. Even creating really complex websites with long scroll behaviors can be difficult.
Making the prototype even more difficult is the fact Figma doesn’t allow using peripheral scrolling as a interaction trigger, which meant I couldn’t use “scroll-jacking”, where you force a the view frame to move more like a slide presentation rather than scrolling smoothly. For this reason, I had to rely on clicking and keyboard to navigate the site.
Getting the components and animations to zoom from screen to screen appropriately was a challenge as Figma is not built to handle complex scaling interactions. Not only is it difficult to manage such large elements on Figma’s canvas, I had to make sure all my components could scale during animations and interactions, which Figma also had difficulty rendering.
Screens of scaled components
Wireframes of scaled components
To maintain consistency across screens I made complex components of each layout (which also contains components) and scaled them to create the zoom effect. Each component gets larger as the user drills down through the site. This made the canvas very cumbersome.
One of the most difficult interactions was getting the marquee to keep animating on hover, which should show a text masked animated gradient when doing so. In the first few attempts the mask would break or the timing of the animation would be off when swapping between the black mode and gradient hover.
Marquee animation
I found that I could use two animation components, one of the black marquee and one of the animated gradient, and by running them both they would stay in sync. Then in another component, I referenced both marquee components, masking the gradient out of the frame and keeping the black one in frame, then swapping components on hover. This allowed for the mask to be present across the whole animation and kept the animation synchronized and smooth.
Marquee animaton, gradient animation, & integration