Synco is a multi-page creative agency template built for web design studios, digital agencies, and freelancers. It includes 10+ fully designed pages with CMS collections, a blog, portfolio/projects, services, pricing, team section, and a contact page.
This guide will help you understand how the Synco template is structured and how to customize it for your own brand or project.We recommend reading this documentation before making major changes, especially to the Style Guide, CMS Collections, and GSAP animations.
Before diving into customization, it helps to know how Synco is structured. The entire template is powered by a unified design system — all colors, fonts, spacing, and components are defined in the Style Guide page and Webflow's Variables panel. Edit from there and everything updates automatically.
-> Headings (H1–H6) and paragraphs pull from global typography variables
-> Brand, neutral, and accent colors are pre-set as variables — just swap in your palette
-> Reusable buttons, sections, grids, and containers keep the design consistent throughout
Before adjusting any typography, it helps to understand how Synco's fonts are set up. All font families are controlled through the Variables Panel, so changing a typeface in one place updates it consistently across the entire template.
To change a font:
-> Head over to Site Settings → Fonts to manage your font library
-> From there you can upload custom fonts, browse Google Fonts, or connect your Adobe Fonts account
-> Once your font is added, go back to the Variables Panel and select the font family variable you want to update
-> Assign your newly added font and it will apply across the site automatically
Add Animation: just apply Animation class, you will find it in integration panel
Remove Animation: simply delete that class from the element.
Disable Animation: You can also disable animation completely by removing the GSAP script or commenting it out.
Process Card Toggle Animation (Home Page)
1<script>
2document.addEventListener("DOMContentLoaded", () => {
3 const cards = document.querySelectorAll(".process-card");
4
5 cards.forEach(card => {
6 const imageWrap = card.querySelector(".process-image-wrap");
7 const descWrap = card.querySelector(".process-card-description-wrap");
8
9 card.addEventListener("click", () => {
10 const isOpen = card.classList.contains("active");
11
12 // Close all cards
13 cards.forEach(other => {
14 other.classList.remove("active");
15
16 gsap.to(other, {
17 borderLeftColor: "#f2f2f2",
18 duration: 0.6
19 });
20
21 gsap.to(
22 other.querySelector(".process-image-wrap"),
23 {
24 height: 0,
25 duration: 0.6,
26 ease: "power3.out"
27 }
28 );
29
30 gsap.to(
31 other.querySelector(".process-card-description-wrap"),
32 {
33 height: 0,
34 duration: 0.6,
35 ease: "power3.out"
36 }
37 );
38 });
39
40 // Open clicked card
41 if (!isOpen) {
42 card.classList.add("active");
43
44 gsap.to(card, {
45 borderLeftColor: "#0963d8",
46 duration: 0.6
47 });
48
49 gsap.to(imageWrap, {
50 height: imageWrap.scrollHeight,
51 duration: 0.6,
52 ease: "power3.out"
53 });
54
55 gsap.to(descWrap, {
56 height: descWrap.scrollHeight,
57 duration: 0.6,
58 ease: "power3.out"
59 });
60 }
61 });
62 });The script turns the Process Cards into an accordion, allowing only one card to be expanded at a time.When a user clicks a .process-card:
• All other cards collapse.
• The clicked card expands its .process-image-wrap and .process-card-description-wrap.
• The left border color changes from #f2f2f2 to #0963d8.
• Clicking another card automatically closes the previously opened card.
Default State
• The first .process-card is expanded automatically.
• Its left border is set to #0963d8.
• All other cards remain collapsed.
Key GSAP Properties
• height:0 - Collapses content
• scrollHeight - Expands content to its full natural height
• borderLeftColor - Changes the active card border color
• duration:0.6 - Controls animation speed
• ease:"power3.out" - Creates a smooth, natural animation
This setup creates a clean, interactive process section with smooth animations and a single-open-card behavior.
FAQ Accordion Animation - Componenet
1<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
2
3<script>
4document.addEventListener("DOMContentLoaded", () => {
5 const items = document.querySelectorAll(".faq-accordion");
6
7 items.forEach(item => {
8 const trigger = item.querySelector(".faq-accordion-question-wrapper");
9 const content = item.querySelector(".faq-accordion-answer-wrap");
10 const verticalBar = item.querySelector(".faq-icon-vertical-bar");
11
12 gsap.set(content, {
13 height: 0,
14 overflow: "hidden"
15 });
16
17 trigger.addEventListener("click", () => {
18 const isOpen = item.classList.contains("active");
19
20 // Close all items
21 items.forEach(other => {
22 other.classList.remove("active");
23
24 gsap.to(other.querySelector(".faq-accordion-answer-wrap"), {
25 height: 0,
26 duration: 0.3,
27 ease: "power2.out"
28 });
29
30 const otherVertical = other.querySelector(".faq-icon-vertical-bar");
31
32 gsap.to(otherVertical, {
33 rotate: 0,
34 duration: 0.3,
35 ease: "power2.out"
36 });
37 });
38
39 // Open clicked item
40 if (!isOpen) {
41 item.classList.add("active");
42
43 gsap.to(content, {
44 height: content.scrollHeight,
45 duration: 0.3,
46 ease: "power2.out"
47 });
48
49 gsap.to(verticalBar, {
50 rotate: 90,
51 duration: 0.3,
52 ease: "power2.out"
53 });
54 }
55 });
56 });
57});
58</script>The script automatically finds all .faq-accordion elements and adds a click event to each .faq-accordion-question-wrapper.
When a question is clicked:
.faq-accordion-answer-wrap height to 0..faq-icon-verticalbar back to 0°.active class..faq-accordion-answer-wrap to its natural height using content.scrollHeight..faq-icon-vertical-bar to 90°, transforming the + icon into a − icon.Key GSAP Properties
• height:0 - Collapses the content
• content.scrollHeight - Expands content to its full height
• rotate:90 - Changes the plus icon to a minus
• duration:0.3 - Animation speed (0.3 seconds)
• ease:"power2.out - "Creates a smooth animation effect
This setup creates a clean accordion where only one FAQ can be open at a time.
Before taking Synco live, it's worth going through a few housekeeping steps. These small checks can make a big difference in performance, accessibility, and how your site ranks on search engines
To change a font:
-> SEO — Take a moment to update the Title Tag and Meta Description for every page before publishing.
-> Image Formats — Synco uses two main image formats throughout. Use JPEG for images with a flat or solid background, and PNG for anything that requires a transparent background.
-> Compress Images — For faster load times, run your images through Webflow's built-in Image Conversion tool to convert them to AVIF or WebP format before publishing.
-> Clean Up — Once you're done customizing, use Webflow's Clean Up Interactions and Clean Up CSS tools to remove any unused styles or animations that may have been left behind.
-> Accessibility Audit — Before going live, run your site through the Webflow Audit Panel to catch and fix any accessibility issues so your site is usable by everyone.
