GSAP Animations Documentation - Investflow Webflow Template

Before working with these animations, you need to enable the correct GSAP plugins in Webflow:

To enable GSAP plugins:

1. Click on the Settings icon in the left sidebar
2. Navigate to the GSAP section
3. Toggle on Enable GSAP
4. Select the required plugins:

For Marquee Scroll Animation:

• ScrollTrigger
• Observer

For Number Counter Animation:

• ScrollTrigger
• SplitText

Important Note: Only enable the plugins you need. Adding unnecessary plugins can slow down your website by loading extra code.

What It Does

The marquee animation creates a continuously scrolling strip of logos (or any content) that:

• Scrolls automatically from right to left
• Speeds up or slows down based on your scroll speed
• Reverses direction when you scroll up - if you scroll down, it moves right to left; if you scroll up, it moves left to right
• Returns to normal speed when you stop scrolling

How to Set It Up

Required Structure:

Your marquee section needs these elements in this order:

1. A wrapper element with the class Logo Strip Marquee Wrapper
2. Multiple child elements (at least 4-5 copies) with the class Marquee Scroll Item
3. Each Marquee Scroll Item contains your logos or content

Step-by-Step Setup

1. Select your marquee wrapper element
2. Add the class Logo Strip Marquee Wrapper
3. Add your first logo strip element as a child
4. Add the class Marquee Scroll Item to this element
5. Duplicate this element 4-5 times (all siblings inside the wrapper)
6. Make sure all duplicates have identical content

Why Multiple Copies?

Because the animation can move in either direction (left or right depending on scroll), you need multiple copies of your logo strip to ensure smooth looping. Without enough copies, you'll see empty space when the animation reverses direction.

Recommended: Use at least 4-5 identical copies of your Marquee Scroll Item.

Adjusting Speed

If you want to change the marquee's speed, you'll need to modify the duration value in the custom code. The value is measured in seconds (eg. 50 gives it a duration of 50 seconds), and you need to look for this line:

What It Does

The number counter animation makes numbers count up from 0 to a target value when they scroll into view. Perfect for statistics, achievements, or any numeric data.

How to Set It Up

Required Structure:

You need two things:

1. A text element or span with the class Count Up Number Animation
2. A custom attribute on that same element: data-count with your target number

Step-by-Step Setup

1. Select the text element that will display your number
2. If you want only part of the text to animate (like "200+" where only "200" animates), wrap just the number portion in a Span
3. Add the class Count Up Number Animation to the span (or text element)
4. Click on the element's settings on the right sidebar and add a custom attribute:
   • Name: data-count
   • Value: your target number (e.g., 200)

Adjusting Speed

If you want to change the counter's speed, you'll need to modify the duration value in the custom code. The value is measured in seconds (eg. 2 gives it a duration of 2 seconds), and you need to look for this line:

Number formatting

The counter automatically formats the values into thousands:

• data-count="5000" will be displayed as 5,000
• the data-count number shouldn't be separated by commas, the counter will do it automatically

Decimal Numbers

The counter automatically detects if your target number has decimals:

• data-count="5" will count whole numbers: 0, 1, 2, 3, 4, 5
• data-count="5.5" will count with one decimal: 0.0, 1.1, 2.2... 5.5

Multiple Counters

You can have multiple counters on the same page. Each counter:

• Animates independently when it enters the viewport
• Has a small staggered delay so they don't all start at once
• Only animates once (won't re-animate if you scroll back up)

Designer visualization

The number that you see in the designer will be overridden by the value set on the Custom Attribute, but you may still set the correct number on the designer for easier visualization.

Marquee Animation Not Working

Problem: The logos aren't scrolling

• Check: Do all child elements have the class Marquee Scroll Item?
• Check: Are ScrollTrigger and Observer plugins enabled in Settings > GSAP?

Problem: I see gaps or jumps in the animation

• Solution 1: Add more copies of your Marquee Scroll Item (aim for 4-5 identical copies)
• Solution 2: Make sure each element contains the exact same content in the same order

Problem: The animation is too fast or too slow

• Solution: Adjust the duration value in the custom code (line with duration: 50)

Counter Animation Not Working

Problem: Numbers don't count up

• Check: Does your element have the class Count Up Number Animation?
• Check: Did you add the custom attribute data-count with a number value?
• Check: Are ScrollTrigger and SplitText plugins enabled in Settings > GSAP?

Problem: Counter shows "0" or "NaN"

• Check: The data-count value should only contain numbers (and optionally one decimal point)
• Wrong: data-count="200+"
• Right: data-count="200" (add the "+" as regular text outside the counter element)

Problem: Multiple counters start at the same time

• This is expected behavior. The slight stagger is automatic but subtle.

If you need help customizing these scripts or run into any issues not covered in this documentation, please email us at:

contact@brixtemplates.com

We're here to help you make the most of your Investflow Webflow template!