Instructions

Customizing the "Images collapse and move while scrolling" on the Home page

• You can replace any image with your own photos or app mockups by clicking on the images and clicking "Replace image" in the toolbox that opens.
• You can add or reduce the number of images. The important thing is to ensure that the width of your images and the width of the mobile frame into which they must fit, are equal. It is also a good idea to keep these widths in the "VW" size units so that they adjust as the screen size increases or decreases.
• Once you have finalized your images, you can adjust the speed and extent to which the images move and rotate as you scroll down the page. You can do this by clicking on the "Hero Images Grid" and going to the Interactions tab located on the top right corner in the Webflow Designer.
• You can adjust how smoothly the animation takes place by adjusting the "Smoothing" in the Interactions tab as well.
• Pro tip: Toggle on the "Live Preview is On" option while editing the interaction so you can see exactly how it behaves as you scroll through the page.
• Remember: There are two versions of this animation for different screen sizes to give the best experience: One for desktop and larger screens, and another for Tablet and Mobile. If you customize one, please remember to customize the other.
• If you need further help, don't hesitate to reach out to me at zoyaqib@gmail.com.

How to customize SVG icons

Icons are set up using SVGs (Scalable Vector Graphics) inside embeds. They are easy to use and customize (change color, size etc.) without losing quality.

• To change the color of an SVG icon, simply head over to the "Typography" section in the Style panel, and change the "Color" property.
• To change the size of an SVG icon, open the code embed and make your desired changes to the "height" and "width properties".