StringTune: The JavaScript Library Born from a Design Company’s Workflow

We’ve invited the creators of StringTune to offer us a deeper look into their highly effective animation library. Initially constructed as an inside instrument at Fiddle.Digital Design Company, it’s grown into a versatile system for dealing with clean scrolling, animation hooks, and performance-friendly results—all with out bloated dependencies.

Of their case research, they shared how it began—now, they’re right here to indicate what it’s and what you may construct with it.

What’s StringTune?

StringTune is a modular JavaScript library designed for the handy and quick software of generally used animations and animation hooks in internet improvement. It affords a versatile system that lets you mix, customise, or create your individual results with out limitations.

It consists of a number of prebuilt modules:

• StringTune
• StringLoading
• StringFPSTracker
• StringPositionTracker
• StringResponsive
• StringScrollbar
• StringLazy
• StringVideoAutoplay
• StringAnchor
• StringParallax
• StringProgress
• StringLerp
• StringLerpTracker
• StringDelayLerpTracker
• StringGlide
• StringCursor
• StringMagnetic
• StringSplit

StringTune isn’t only a assortment of predefined results—it’s a versatile framework that lets you create customized modules that work simply as effectively because the built-in ones. Whether or not you want fine-tuned management over animations or need to construct completely new interactions, StringTune gives the instruments to combine them easily into your venture.

Why it exists

StringTune is an alternative choice to fashionable libraries, however not like them, it addresses all of the challenges we encounter in day by day internet improvement. By consolidating every little thing in a single place, we’ve improved effectivity, diminished file dimension, and eradicated pointless computations.

It acts as a centralized system that connects and manages every little thing taking place on an online web page from a single hub—Tune.

Learn extra in our Case Research to be taught why we created StringTune and the way it got here to be.

What it will possibly do

Let’s undergo the modules presently out there and clarify what they do:

• StringTune – The core module that permits scroll occasions, creates hooks, and provides clean scrolling (which will be disabled if wanted). All of the modules under are constructed on high of Tune.
• StringLoading – Determines when the web page has completed loading to set off animations. (guide hook)
• StringFPSTracker – Measures FPS in real-time for efficiency evaluation. (for improvement stage)
• StringPositionTracker – Tracks the scroll place and motion course of the web page. (for improvement stage)
• StringResponsive – Adjusts factor habits based mostly on display dimension.
• StringScrollbar – Creates customized scrollbars with versatile styling and habits settings.
• StringLazy – Delays picture loading to cut back web page load burden.
• StringVideoAutoplay – Robotically performs movies with out consumer interplay.
• StringAnchor – Defines anchor factors for factor transformations.
• StringParallax – Provides a easy parallax impact with minimal setup.
• StringProgress – Determines a component’s place within the viewport to set off animations.
• StringLerp, StringLerpTracker, StringDelayLerpTracker – Controls animation speeds utilizing scroll values.
• StringGlide – Provides inertia results to components when scrolling.
• StringCursor – Creates a customized cursor that reacts to interactions.
• StringMagnetic – Provides a magnetic impact, pulling components towards the cursor.
• StringSplit – Splits textual content into phrases, characters, or traces.

And now, it’s time for Vlad, our lead engineer, to dive deeper into the way it all works.

Tech Options

StringTune is extra than simply an animation library. It’s constructed as a versatile ecosystem that enables seamless animation integration with out compromising efficiency or management. The core concept is declarative administration by HTML and CSS, eliminating the necessity to write JavaScript for traditional results.

Modular Structure

StringTune is constructed on a modular system the place every element capabilities independently however integrates inside a shared setting. This permits for:

• Simple activation and deactivation of options with out modifying the core library.
• Impartial modules that may be prolonged as wanted.
• All modules sharing a typical event-handling system.
• World knowledge accessibility, guaranteeing seamless synchronization.

Declarative Method (HTML & CSS-Based mostly)

Considered one of StringTune’s standout options is its capacity to regulate animations declaratively, with out writing JavaScript. You outline behaviors utilizing HTML attributes and handle them by CSS variables, permitting real-time updates.

For instance, including an animation is so simple as:

<div class="factor" string="progress"></div>

The animation is then managed by way of CSS:

.factor {
  rework: translateX(calc(var(--progress) * 20px));
}

This strategy provides full flexibility with out requiring extra JavaScript logic.

Minimal Influence on Efficiency

StringTune is optimized for prime efficiency, guaranteeing animations stay clean whereas decreasing browser workload. Key optimizations embody:

• Updating solely obligatory parameters as a substitute of recalculating total types.
• Decreasing format shifts and repaints to take care of a excessive FPS.
• Enabling modules solely when required, avoiding pointless computations.
• Adapting dynamically based mostly on gadget efficiency to make sure clean rendering.

Integration Flexibility

StringTune is framework-agnostic, that means it may be utilized in any improvement setting with ease:

• HTML + CSS: Merely embody the library and use attributes.
• Nuxt / Vue / React / Angular: Simply integrates because it has no world dependencies.
• Versatile Configuration: Management habits by way of setting variables or API.

Primary Use Instances

Many of the modules are showcased on the demo web page: See the Dwell Demo.

For extra particulars, examine the official documentation.

Superior Instance – Creating Your Personal Module in StringTune

On this instance, we’ll create a customized module for StringTune that modifications a component’s colour throughout scrolling, easily transitioning between two shades.

Combine StringTune

<script src="https://unpkg.com/@fiddle-digital/string-tune@0.0.61/dist/index.js"></script>

Creating Your Personal Class and Inheriting from StringProgress

To combine our module into the StringTune system, we create the StringColorChange class and inherit it from StringProgress. This permits entry to the scroll monitoring mechanism and interplay with components.

class StringColorChange extends StringTune.StringProgress {
    ...
}

Defining the HTML Key for the Module

To permit StringTune to find out which components to connect with the module, we have to set a novel HTML key (htmlKey). On this case, we use “color-change,” that means all components with the attribute string="color-change" shall be processed by this module.

constructor(customer) { 
    tremendous(customer); 
    this.htmlKey = "color-change";
}

Object Initialization and Colour Storage

When the module is linked to a component, we need to retailer the preliminary and closing colours to keep away from studying them every time throughout scrolling. To do that, we use the initObject() methodology, which is named in the course of the factor initialization.

initObject(globalId, object, el, attributes) {
    tremendous.initObject(globalId, object, el, attributes);

    const startColor = this.attribute.course of(el, "string-start-color", 10);
    const endColor = this.attribute.course of(el, "string-end-color", 10);

    const startColorValues = this.parseColor(startColor);
    const endColorValues = this.parseColor(endColor);

    object.setProperty("start-color", startColorValues);
    object.setProperty("end-color", endColorValues);
}

Helper Strategies for Working with Colours

These strategies should not a part of StringTune, however they may assist us in our work.

• hexToRgb(hex) – converts a colour from HEX to RGB format.
• interpolateColor(begin, finish, progress) – calculates the intermediate colour between two given colours utilizing the progress worth.

parseColor(colour) {
    if (colour.startsWith("#")) {
        return this.hexToRgba(colour);
    } else if (colour.startsWith("rgb")) {
        return this.rgbToArray(colour);
    }
    return [0, 0, 0, 1];
}

hexToRgba(hex) {
    let r = 0, g = 0, b = 0, a = 1;
    if (hex.size === 4) {
        r = parseInt(hex[1] + hex[1], 16);
        g = parseInt(hex[2] + hex[2], 16);
        b = parseInt(hex[3] + hex[3], 16);
    } else if (hex.size === 7) {
        r = parseInt(hex.substring(1, 3), 16);
        g = parseInt(hex.substring(3, 5), 16);
        b = parseInt(hex.substring(5, 7), 16);
    }
    return [r, g, b, a];
}

rgbToArray(rgb) {
    const match = rgb.match(/d+(.d+)?/g);
    return match ? match.map(Quantity) : [0, 0, 0, 1];
}

interpolateColor(begin, finish, progress) {
    const r = Math.spherical(begin[0] + (finish[0] - begin[0]) * progress);
    const g = Math.spherical(begin[1] + (finish[1] - begin[1]) * progress);
    const b = Math.spherical(begin[2] + (finish[2] - begin[2]) * progress);
    const a = (begin[3] + (finish[3] - begin[3]) * progress).toFixed(2);
    return `rgba(${r}, ${g}, ${b}, ${a})`;
}

Making use of the Scroll-Based mostly Colour Transition

Right here’s the place the magic occurs; the colour modifications throughout scrolling.

The onScroll() methodology is named each time the consumer scrolls the web page. It retrieves the scroll progress worth, calculates the intermediate colour, and modifications the factor’s background.

onScroll(knowledge) {
  tremendous.onScroll(knowledge);
  this.objects.forEach((object) => {
    const progress = object.getProperty('progress');
    if (progress !== undefined) {
      const startColor = object.getProperty('start-color');
      const endColor = object.getProperty('end-color');

      if (startColor && endColor) {
        const interpolatedColor = this.interpolateColor(startColor, endColor, progress);
        object.el.fashion.backgroundColor = interpolatedColor;
      }
    }
  });
}

Registering the Module in StringTune

Now we join our module to StringTune.

Then, we have to register our module with StringTune in order that the library can use it.

const stringTune = StringTune.StringTune.getInstance();
stringTune.use(StringColorChange);
stringTune.begin(0);

HTML Instance

<physique>
  <div fashion="top: 100vh; show: flex; align-items: middle; justify-content: middle;">
    <h1>Scroll down</h1>
  </div>

  <div fashion="top: 100vh; show: flex; align-items: middle; justify-content: middle;" 
    string="color-change" string-start-color="#ff0000" string-end-color="rgba(0,255,0,0.5)">
  </div>

  <div fashion="top: 100vh; show: flex; align-items: middle; justify-content: middle;">
    <h1>Footer</h1>
  </div>
</physique>

Challenge Supply Code

Take a look at the supply code on GitHub.

Dwell Demo

Actual Dwell Utilization

At Fiddle.Digital Design Company, we used StringTune to develop a customized module for Xe.Works, bridging two worlds: 2D and 3D.

Our module dynamically integrates scroll values, mouse place, and DOM factor positions, routinely transferring this knowledge right into a 3D setting. The movement curve of the WebGL factor is synchronized with these inputs, guaranteeing seamless interplay inside Three.js.

Conclusion

StringTune will not be a easy animation library—it’s a skilled instrument designed for builders who want environment friendly calculations and hooks. As a substitute of providing predefined results, it gives a sturdy basis for constructing customized animation options.

From right here, it’s all about your creativity. We, for one, make full use of ours.

Credit

Fiddle.Digital Design Company