Instruction

How to Use

Instr.

Requirements & Setup

GSAP Configuration

This template uses GSAP (GreenSock Animation Platform) for advanced animations. The GSAP library and ScrollTrigger plugin are included automatically.

What is included:

  • GSAP Core — handles all animation tweens and timelines
  • ScrollTrigger — required for scroll-based animations and counter animations

Note: GSAP scripts are loaded via the layout. Do not manually add duplicate GSAP scripts to avoid conflicts.

1. Slider

What it does: Creates an auto-playing image slider with smooth transitions, thumbnail navigation, and circular progress indicators.

How to use:

  • Wrap your slide images in a container
  • Add class slide-item to each slide
  • Optional: Add slider-thumb for thumbnail navigation
  • Optional: Add hero-slider-thumb with .progress circle for hero-style progress indicators
  • Optional: Add slide-next-nav-block and slide-prev-nav-block for arrow navigation

Features:

  • Auto-advances every 5 seconds
  • Ken Burns zoom effect on transitions
  • Animated captions with stagger effect
  • Circular progress indicators (for hero sliders)

Example:

<div class="slider-container">
  <div class="slide-item">
    <img src="slide1.jpg" alt="Slide 1">
    <div class="foundation-slide-subtitle-block">Subtitle</div>
    <h2 class="foundation-slide-title">Title</h2>
    <p class="foundation-slide-sumamry">Description</p>
  </div>
  <div class="slide-item">
    <img src="slide2.jpg" alt="Slide 2">
  </div>
</div>

<!-- Optional: Thumbnail Navigation -->
<div class="slider-thumb"></div>

<!-- Optional: Arrow Navigation -->
<div class="slide-next-nav-block">Next</div>
<div class="slide-prev-nav-block">Prev</div>

For Hero Slider with Circular Progress:

<div class="hero-slider-thumb">
  <svg viewBox="0 0 36 36">
    <circle class="progress" stroke-dasharray="101" stroke-dashoffset="101" />
  </svg>
</div>

2. Counter Animation

What it does: Animates numbers from 0 to target value when scrolled into view, with comma formatting.

How to use:

  • Add class counter-animate to any element containing a number
  • Optional: Add data-duration="3" attribute to control animation speed (default: 2 seconds)

Features:

  • Automatic comma formatting (1,000)
  • Supports decimals (75.5)
  • Animates only once per counter
  • Staggered animation for multiple counters

Example:

<!-- Simple counter -->
<div class="counter-animate">1500</div>

<!-- Counter with decimals -->
<div class="counter-animate">75.5</div>

<!-- Counter with custom duration -->
<div class="counter-animate" data-duration="3">25000</div>

<!-- In context -->
<div class="stat-block">
  <h3 class="counter-animate">1000</h3>
  <p>Happy Clients</p>
</div>

3. Progress Bar

What it does: Automatically sets progress bar widths based on percentage text in items.

How to use:

  • Add a text element with percentage (e.g., "15%", "85%")
  • Add a progress bar element with class progress-bar-fill or similar
  • The script automatically finds and animates the bars

Features:

  • Auto-detects percentage values
  • Updates progress bars to match percentages
  • Supports multiple bars on one page

Example:

<section class="skill-item">
  <div class="percentage-text">75%</div>
  <div class="progress-bar-container">
    <div class="progress-bar-fill"></div>
  </div>
</section>

Supported class names for progress bars:

  • progress-bar-fill
  • progress-fill
  • bar-fill
  • Any element with [class*="progress-bar"] or [class*="fill"]

How to Update Variables

  1. Open the project in your code editor.
  2. Access the CSS variables:
    • Navigate to src/styles/global.css to find all CSS custom properties.
    • Variables are organized under the :root selector by category (colors, typography, spacing).
  3. Browse your variable groups such as color and typography. You will find items like --primary-color or --heading-font-size.
  4. Update any variable value.
    Once saved, the change applies across all elements that use that variable.
  5. Optional:
    You can still adjust colors or typography on individual elements directly by overriding styles in component-level CSS if you prefer not to rely on variables.

How to Update Text and Images

Updating Text

  1. Locate the data file for the page you want to edit.
    Content is managed in TypeScript files under src/data/.
  2. Open the relevant data file.
    For example, src/data/homeData.ts for the homepage.
  3. Edit the text values directly.
    You can update headings, paragraphs, button labels, and any other text content.
  4. Save the file.
    The dev server will automatically reload with your changes.

Updating Images

  1. Add your new image to the assets folder.
    Place it in src/assets/images/ for optimized processing, or public/ for static serving.
  2. Update the image reference in the data file.
    Change the import path or filename to point to your new image.
  3. Use the Astro Image component for optimization.
    Images imported from src/assets/ are automatically optimized at build time.
  4. The new image updates instantly in development mode after saving.

How to Replace an Icon (SVG)

  1. Locate the icon you want to replace.
    SVG icons are typically found inline within component files or as standalone .svg files in src/assets/.
  2. Open the component file containing the icon.
    Search for the existing <svg> markup in the relevant .astro component.
  3. Remove the existing SVG markup.
    You will see code that looks like <svg>...</svg>. Select and delete it.
  4. Paste your new SVG code.
    Insert the full markup for your new icon, starting with <svg> and ending with </svg>. Make sure to use currentColor for stroke or fill to inherit the parent color.
  5. Save your changes.
    The icon will update immediately in the development server.
  6. If the icon is used in a shared component, all instances across the site will update automatically.

How to Adjust Animations

  1. Locate the animation script.
    GSAP animations are defined in the JavaScript files under src/scripts/ or in inline <script> tags within components.
  2. Identify the animation you want to modify.
    Look for gsap.to(), gsap.from(), or gsap.timeline() calls targeting the relevant element.
  3. Update the animation properties.
    Change values such as duration, ease, delay, x, y, opacity, scale, or any other GSAP-supported property.
  4. Adjust ScrollTrigger settings if needed.
    Modify start, end, scrub, or markers values within the scrollTrigger configuration object.
  5. Preview the result.
    Refresh the development server to see how the updated animation behaves.

How to Update Page SEO

  1. Open the page file from src/pages/.
  2. Find the frontmatter section at the top of the .astro file (between the --- delimiters).
  3. Update the layout props to modify the following:
    • title — the page title shown in the browser tab and search results
    • description — the meta description for search engines
    • ogImage — the Open Graph image shown when the page is shared on social media
  4. Save your changes. These details improve visibility on search engines and control how your page appears when shared.

How to Add a Lottie Animation

  1. Obtain your Lottie JSON file.
    Export a Lottie animation from After Effects using the Bodymovin plugin, or download one from LottieFiles.
  2. Add the JSON file to your project.
    Place the .json file in public/lottie/ or src/assets/.
  3. Add a Lottie player to your component.
    Use the lottie-web library or the <lottie-player> web component to render the animation. Choose the playback type that fits your design:
    • Loop — plays continuously.
    • Scroll — moves through frames based on page scroll.
    • Click — starts when the element is clicked.
    • Hover — activates when the cursor enters the element.
  4. Adjust speed and direction if needed.
    Configure the player options to fine-tune the animation's timing or frame progression.
  5. Preview to confirm everything works.
    Check the development server to see how the animation behaves in real time.