I’ve recently been learning how to create animations in Webflow. I’ve chosen to focus on creating scrolling and parallax animations because they have the ability to keep users engaged with a website and encourage users to continue scrolling. They are also a great way to create perspective and depth, allowing you to highlight key aspects or products within a website.
Animating the Day-In-The-Life Instagram Series with Webflow
Another designer at Clique, Keymoni, has been posting a series on Instagram that showcases a Day-In-The-Life of the various roles here at Clique. The layered and collage style of the designs was perfect to experiment with creating parallax and scrolling animations in Webflow.
Creating the Animations
To achieve a parallax scrolling animation in Webflow I first placed all the image assets within a contained section. Next, I set an element trigger of “While Scrolling in View”. Then I added scroll actions of “Move” and “Scale” to each of the various image layers giving each one a unique initial and final position.
Future Plans
The goal is to eventually create a microsite for the entire Day-In-The-Life Instagram series, complete with parallax effects and scrolling animations.
