Adding Interactions and Fixed Sections
One thing I wanted to do on Webflow that I couldn’t figure out on Figma, was making a section on one side stay fixed to the page, whilst the other scrolled.
Before I was able to do this, I had to look up how to do it. I watched a few different Youtube videos, and read a few articles, but I found this one to be the most helpful.
Here are some screenshots demonstrating the left side scrolling, as the image on the right stays fixed (along with the background):
I also really wanted to add a number counter to two of my screens, but after watching a LOT of Youtube videos on how to do this, I realised that it was unfortunately not possible to do without having access to adding custom code via a Webflow package. I was initially really bothered by this, as it was one of the immersive elements that I was most excited for. However, I remembered that Kyle told me it’s okay if there are some things I can’t do on Webflow.
Timed Interactions
I then went on to trying some timed interactions, one I really wanted to include was on a page where the Saturn V flies from Earth to the Moon.
I figured out how to do this using the “move element” option, and added a timed delay to the Saturn V for after the page loads.
.
I also have the “Click next to continue” button timed to come up a couple of seconds after Saturn V moves. I am thinking, though, that I might make this button more obvious by making it the yellow feature colour at a lower opacity – rather than white at a lower opacity.
I think I might also add a little icon to show which elements have interactions on them, such as the things that you must hover over to reveal what’s hidden underneath. I might also make an icon for clickable elements – possibly using a little asterisk-looking star icon or mouse arrow. This imagery, to me, is reminiscent of a click.
I am currently in the midst of doing some more research about how to make certain Webflow interactions and things like horizontal scrolling, so I will show my updates once I use the advice given.
Leave a Reply