Neographe Factory
Client:
Neographe Factory
Webflow Animation
Custom CSS
Finsweet Attributes
Swiper JS
Overview
Choosing and Setting up CSS framework
After analyzing the design, we realize that the designer use a moderately small aboard for the layout. Therefore, the CSS framework approach for this project is a full-out scalable CSS for every screen size. The ratio of the original design would be on both HD screen (1920x1080px) and 2k or 4k monitor screen.
Challenging sections:
Layout Effect with Posistion Sticky CSS
- Many section designed with a trendy on scroll effect can be complete by setting the Sticky Posistion
- Webflow Pre-Build Interaction such as Slide In, Fade In or a custom Timeline is added to complete the second phase of the required animation or to make the section more alive
Repeat Slide Testimonial using Webflow Tab Component
- Webflow Tab Component & Webflow Interaction is used to create slide effect whenever the user click on the other name.
- Finsweet Mirror Click is added to mirror the first tab clicked event in order to take advantage of the pre-build loop function from Webflow Tab
Circular CMS Carousel
- For CMS Carousel, we want and infinite loop carousel that also animate with a circular rotate part instead of slide.
- Swiper JS is used as the core to create the Carousel, loop function is also made with Swiper JS properties
- Custom CSS is added to create the circular layout and the animation when change Slide with the Active Slide switching to another color
Result