Linksys was one of my favorite projects to work on. The client was very design forward, and wanted to embrace the most modern web trends. At first, it seemed like it would be a standard SFRA implementation, but it quickly became a project that challenged my abilities and allowed me to build some really fun solutions.
As Front-Technical Lead for this project, I worked alongside the clients chosen third party design team to develop the site's theme & style guide. Once these were in place, I assisted the Product Manger in crafting tickets dividing into sprints. Each sprint, I would review tickets, clarify complexities, and delegate tickets to my front-end team. Alongside tickets I chose to take on my own, I was responsible for pull-requests and merging front-end code.
Using Google's website as standard, Linksys decided they wanted to enhance their homepage solution, and approved a change request that included heavy use of parallax animation. Our team lacked any specific resources with experience in this type of work, so I jumped at opportunity to research and implement the solution myself, despite having no previous experience of my own with the technology.
Utilizing GreenSock (GSAP) and ScrollMagic libraries and working alongside the clients design team, I engineered several parallax components that were not only functional, but also responsive, extending experiences across both mobile and desktop devices.
In the end, the client was extremely pleased with both the site and the homepage. While I got a new skill to add to my toolkit.
Notable Customizations
-
Parallax Animation Capabilities
- Created using ScrollMagic & GreenSock(GSAP) libraries
- Animations build to be responsive. Experiences made available for both Mobile and Desktop
-
SFCC Accelerator
- Templates for Single Use CLP, PLP, PDP pages. (At the time, out-of-the-box SFRA required templates be defined category wide)
- Customizations to OOTB SFRA cartridge for optimization of both time and capabilities
- Themed suite of components and layouts.
- "Code Block" component compatible with parallax animation scripts
- Video components for use with multiple sources, auto-play capabilities tied to scroll position and page load.
-
Parallax Animated Homepage Template
- Interwoven with Page Designer enabled regions for client merchandising