Instructions
Short video guides explaining the advanced interactions and reusable systems included in the Bacaro template.
Changing the Brand Accent colors
This guide explains how to update the Brand Accent color within the template. By adjusting the global color variable, you can instantly apply the new accent across content, buttons, links, overlay and gradient colors, background colors, highlights, and key interface elements - ensuring consistent branding throughout the entire site.
How to access mobile/fullscreen Menu
How to Edit GSAP Animations
Bacaro uses custom GSAP animations for floating form labels. The animation code is located in the Footer component.
Floating Form Labels
Form labels move upwards and become smaller when an input is focused. If the field is empty, the label returns to its original position when focus is lost. Filled fields keep their labels elevated.
Element map:
form-field-wrap - Parent container for the field and label
field - Input or textarea that triggers the animation.
field-label - Label animated by GSAP.
is-radio - Excludes radio labels from the animation.
How to Edit the Animation
1. Open the Footer component in Webflow Designer.
2. In the Navigator, select GSAP Embed Code.
3. Open the HTML Embed editor and modify the animation values:
y: -18 - Vertical movement in pixels.
scale: 0.75 - Label size (75%).
duration: 0.3 - Animation duration in seconds.
ease: "power2.out" - Animation easing.
transformOrigin: "left top" - Scaling origin.
4. When changing y or scale, update both the moveUp animation and the initial gsap.set() values to keep filled fields consistent.
5. Save and publish to test your changes.
- How to Remove the Animation
- Open the Footer component in Webflow Designer.
- Locate and delete the GSAP Embed Code element.
- Adjust the default form label styling if necessary.
- Publish your site.
Removing this code disables the floating label animation without affecting the form's submission functionality. Other GSAP interactions remain unaffected.
Lenis Smooth Scrolling
This template uses Lenis to provide smooth, natural scrolling throughout the website. It is enabled globally and works automatically across all pages without any additional setup.
Where to find Lenis
Open Webflow Site settings → Custom code:
Head code: Contains the Lenis CSS stylesheet.
Footer code: Contains the Lenis JavaScript library and its initialisation settings.
How to disable Lenis
If you prefer native browser scrolling:
- Remove the Lenis CSS stylesheet from the Head code.
- Remove the Lenis JavaScript library and its initialisation script from the Footer code.
- Save your changes and republish the website.
Lenis is a third-party library. For additional configuration options, visit the official Lenis documentation.
Webflow template support
Do you need help or assistance with a template? Feel free to contact me for support.
