DEV Community: Johnson Fash

One query language for SQL, Mongo, and the browser: the case for Forge

Johnson Fash — Sun, 28 Jun 2026 16:28:35 +0000

There's a moment in most TypeScript backend projects when the data layer stops being one thing.

Maybe you started on Postgres, then a feature shipped where audit events made more sense as a flat Mongo document. Maybe your mobile app needs to work on the train, so you added SQLite in the browser. Maybe a "find me the three nearest locations" endpoint forced you to drop into raw ST_Distance_Sphere() because your ORM didn't know what a geo point was. Maybe you added embeddings for an AI search box and now half your query path is a $queryRaw with a hand-rolled vector cosine clause.

Each of those moments seems small in isolation. Stacked, they're how a typed data layer becomes four data layers — a Prisma client over here, a Mongoose schema over there, Dexie wrapping IndexedDB, and a folder full of raw SQL strings nobody wants to touch. Each layer has its own concept of "model," its own migration story, its own way of describing a where clause. The code in your services is suddenly half plumbing.

I built Forge because every other TypeScript ORM I tried forced me to pick one surface and treat the rest as a foreign country.

(https://www.npmjs.com/package/forge-orm)

The constraint that produced it

I was working on a multi-tenant SaaS that had to:

Run Postgres for transactional state
Use Mongo for high-volume nested documents that didn't want a schema
Work fully offline in the browser on a Tauri-packaged client, including a point-of-sale flow that took payments without a network
Geocode every location and answer nearest-neighbor queries on them
Eventually add embeddings so an operator could type "blue cotton tee" and find products without exact keyword matches

Pick any two of those and the existing ORMs work. Pick three and you start writing glue. Pick all five and you spend more time keeping four data layers in sync than building features.

Prisma covers Postgres beautifully and treats Mongo as a second-class adapter. It has no browser story at all. Geo is raw SQL. Vector is raw SQL.

Drizzle is the cleanest TS-native SQL builder I've ever used — but it's SQL-only. No Mongo. No browser. Geo and vector escape into hand-written fragments.

Kysely has the best types of any query builder, but it's also SQL-only and intentionally not an ORM. You write joins. No relations sugar. No browser.

TypeORM has Mongo support, but the types degrade to any so often the TypeScript story is barely real, and decorators don't compose with edge runtimes.

Mongoose handles Mongo well. It does not handle Postgres at all.

Dexie handles IndexedDB. It does not handle anything else.

So you stack them. And you write a small in-house abstraction layer on top so service code doesn't have to know which one it's hitting. And that layer eats a month every year just keeping up.

Forge is what happens when you decide that's not acceptable and try to put one query language under all of it.

Video: https://youtu.be/FpOaneoCzpw

What you actually get

*One vocabulary across six dialects
*
Forge has adapters for Postgres, MySQL, SQLite, Mongo, DuckDB, and MSSQL. The same query method names work on all six:

// Postgres
await db.User.findMany({ where: { tier: "pro" }, limit: 20 })

// Mongo
await db.User.findMany({ where: { tier: "pro" }, limit: 20 })

// DuckDB (analytical)
await db.User.findMany({ where: { tier: "pro" }, limit: 20 })

That's not "compatible-ish." Those are byte-identical service-layer calls. The adapter underneath translates where, limit, orderBy, select, include, groupBy, upsert, transaction, and the rest into the dialect's native form. A Mongo $or becomes a SQL OR. A SQL NOT IN becomes Mongo's $nin. JSON path access becomes ->> on Postgres and dotted-key access on Mongo.

The point isn't that you'll switch databases (you mostly won't). The point is that when a feature lands that needs the other database, you don't relearn an ORM. You point a different db at the same schema and write the same code.

The browser is a first-class target

This is the part I haven't seen elsewhere.

Forge ships a browser adapter built on sqlite-wasm + OPFS, running in a Web Worker. It mounts as opfs:/your-db.sqlite or opfs-sahpool:/... for synchronous-access-handle mode, or :memory: for tests. There are Vite, Next.js, and Webpack plugins that handle the wasm loading without you wiring it.

// In the browser. Same API as the server.
const db = await createBrowserDb({ schema, url: "opfs:/dallio.sqlite" })
await db.Invoice.create({ data: { number: "INV-3308", total: 4250 } })
const drafts = await db.Invoice.findMany({ where: { status: "draft" } })

The query you wrote for your server's Postgres works in the user's browser against SQLite. You stop maintaining two data layers because the same model is the same model. Offline drafts, offline POS sales, offline product catalogs — all queryable with the same findMany your service code uses, no IndexedDB wrapper, no Dexie schema duplicated from your Postgres schema.

For a Tauri app or a PWA that needs to keep working when the network drops, this collapses an entire architectural sub-project into a config flag.

Geo, vector, and JSON path are typed


const Place = f.model("places", {
  id: f.id(),
  name: f.string(),
  location: f.geoPoint({ srid: 4326 }),
  embedding: f.vector(1536),
  details: f.json<{ openingHours: string[]; tags: string[] }>(),
})

// Nearest 10 places to a point — Postgres uses PostGIS, MySQL uses
// ST_Distance_Sphere, Mongo uses $near. Same query call.
const nearby = await db.Place.findMany({
  where: { location: { nearTo: { point: [3.42, 6.45], withinMeters: 5000 } } },
  limit: 10,
})

// Vector similarity — same vocabulary as geo
const similar = await db.Place.findMany({
  where: { embedding: { nearTo: { vector: queryEmbedding, take: 5 } } },
})

// Typed JSON path — no string fragments
const cafes = await db.Place.findMany({
  where: { "details.tags": { contains: "cafe" } },
})

None of those require raw SQL. None require a separate vector library. None require a PostGIS adapter package. The results are typed — nearby[0].location is a [number, number], similar[0].embedding is number[], details.tags is string[].

If you've ever written a cosine_similarity() SQL fragment by hand or tried to thread PostGIS through Prisma raw queries, you know what the absence of this costs.

No binary engine, no codegen step

Forge is pure TypeScript. There is no Rust query engine that needs to be downloaded per platform, no prisma generate step in your CI, no .prisma schema file written in a custom DSL.

Your schema is a TS file. Models are values. Importing them gives you typed query methods. That's the whole setup.

Cold start on Lambda or Vercel Functions is under 50ms, the same as Drizzle and Kysely, an order of magnitude faster than Prisma's historical baseline. Edge runtimes (Workers, Vercel Edge, Bun, Deno) work natively because nothing about Forge requires Node-specific APIs.

Drift detection that works in production

const report = await db.$migrate()
// {
//   alteredColumns: [{ table: "users", column: "phone", action: "added" }],
//   pending: [{ table: "users", column: "legacy_id", action: "drop" }],
// }

db.$migrate() walks the live schema against the model definitions. Safe drift (an added column, a new index) gets applied automatically. Destructive drift (a column that no longer exists in the model) is surfaced under pending for your migration tool to handle deliberately. You can opt out with db.$migrate({ alter: false }).

db.$diff(driver, { schema }) returns the same report without applying anything. db.$doctor() runs a live probe — checks extensions, indexes, encoding, latency — and tells you what's wrong. Both work in the browser too, against the user's OPFS SQLite.

In practice this means the day a new feature ships with two new columns, you don't need to ship a migration file. You can let $migrate() apply the additions on boot and ship a migration for the destructive part next sprint. Or, if you're more conservative, you can run $diff() in CI and refuse to deploy when drift is detected. Both flows work.

Atomic upsert that actually is atomic

await scopedDb.User.upsert({
  where: { email },
  create: { email, name, tier: "free" },
  update: { lastSeenAt: now },
})

That call compiles to INSERT ... ON CONFLICT DO UPDATE on Postgres, INSERT ... ON DUPLICATE KEY UPDATE on MySQL, MERGE on MSSQL,

findOneAndUpdate({ upsert: true }) on Mongo, and the SQLite equivalent. One round trip. No find-then-branch race condition. No accidental double-insert under concurrency.

I mention this because it's not glamorous, but every ORM that doesn't do it correctly produces a class of intermittent production bugs you can never reproduce locally and your tracing tool blames on "user double-clicked." Forge does it correctly across all six dialects.

What Forge is not

I'll be direct about this because honest tradeoffs are part of why anyone trusts a recommendation.

There is no Studio. Prisma Studio is a category-defining piece of tooling. db.$doctor is CLI-only and doesn't browse data. If your team includes people who want to click around tables in a GUI, Forge will frustrate them until a Studio ships.

There is no SaaS company behind it. That has good and bad sides. No paid Accelerate/Pulse/Optimize tier means the OSS roadmap isn't shaped by upsell pressure. No SaaS company also means no support contract, no enterprise SLA, no Salesforce conference booth, no team of dedicated maintainers if I get hit by a bus.

The community is tiny. If you Google a Forge error, you'll mostly find the README. Stack Overflow won't help. There are no YouTube tutorials. Onboarding a junior engineer takes longer because the answer to "how do I do X" is "read the source," not "watch this 20-minute video."

Depth versus breadth. Drizzle has gone deeper into Postgres-specific edge cases than Forge has. Mongoose has gone deeper into Mongo's aggregation pipeline. Forge covers six dialects well, but a dialect-specific ORM will always go deeper into its one dialect. If you need Postgres logical replication consumer slots or Mongo's exact change-stream resume semantics surfaced as a first-class API, you'll write that integration yourself in Forge.

It's young. First release was 2024. 2.5.3 is the current version. The shape is stable, the test suite is large (the test file count crossed 470 in 2.5.3, mostly per-dialect parity), but five-year battle scars accumulate things you can't get faster. Expect a few rough edges.

If those are dealbreakers, Drizzle or Prisma is your answer. That's a real choice, not a consolation prize.

When Forge is the right answer

Pick Forge when:

Your data already lives in more than one place. Postgres + Mongo. Postgres + SQLite (mobile sync). DuckDB for analytics over a transactional Postgres. MSSQL for a legacy system plus Postgres for the new one. Forge collapses the abstraction tax of running multiple ORMs.
You're building an offline-first or local-first app. Tauri desktop apps, Capacitor mobile apps, PWAs that need to work on flaky connections. Forge's browser adapter means you maintain one data layer instead of one server data layer plus one client IndexedDB layer plus the sync code between them.
Geo or vector is on your roadmap. Even if you don't need them today, building them on raw SQL fragments is a permanent tax. Forge surfaces both as typed primitives.
You care about cold starts. Lambda, Vercel Functions, Cloudflare Workers — Forge is pure TS, no binary, no codegen runtime. Drizzle and Kysely match it; Prisma still doesn't.
You like writing code more than configuration. The schema is a TS file. The migration story is "the live schema and the models disagree, here's what changed." There's no DSL, no codegen step, no separate migration CLI to learn.

Don't pick Forge when:

You have a senior Postgres-only team that already loves Drizzle. Forge wouldn't make their day better.
You need Studio and your stakeholders aren't going to budge.
You're shipping inside a company that requires a vendor with a support contract.

Getting started

npm install forge-orm@^2.5.3

Define a model file:

// schema.ts
import { f } from "forge-orm"

export const User = f.model("users", {
  id: f.id(),
  email: f.string({ unique: true }),
  name: f.string(),
  tier: f.enum(["free", "pro", "enterprise"]).default("free"),
  createdAt: f.timestamp().defaultNow(),
})

export const schema = { User }

Connect from your server:

import { createPostgresDb } from "forge-orm/postgres"
import { schema } from "./schema"

export const db = createPostgresDb({ schema, url: process.env.DATABASE_URL! })
await db.$migrate() // applies safe drift on boot

Or from the browser:

import { createBrowserDb } from "forge-orm/browser"
import { schema } from "./schema"

export const db = await createBrowserDb({ schema, url: "opfs:/app.sqlite" })
await db.$migrate()

The same db.User.findMany({ where: { tier: "pro" } }) works in both. That is the entire setup.

A statement about TypeScript data layers in 2026

The data layer should follow your data, not the other way around. When a feature pushes you toward a different database — analytical, document, offline — the ORM should come with you, not force you to maintain a second one.

Most TypeScript ORMs were built when "the database" meant Postgres or maybe MySQL. They optimize for the depth of that single relationship. That's an honest tradeoff and it produces excellent tools for the case where it's correct.

But TypeScript apps in 2026 aren't single-database anymore. They run partially in the browser. They store transactional data in one engine and analytical data in another. They pull embeddings out of vector indexes and locations out of geo indexes. They sync some state offline and reconcile it when the network returns.

Forge is what an ORM looks like if you take that reality as the starting point.

It is not the safe choice. The safe choice is Prisma. The cool choice is Drizzle. The purist choice is Kysely.

Forge is the choice when none of those covers your data's actual shape, and you'd rather pay the cost of a younger tool than the cost of running four mature ones in parallel for the rest of the project's life.

If that's where you are, forge-orm@^2.5.3 (https://www.npmjs.com/package/forge-orm) is one npm install away.

How I Built a Chrome Extension to Extract Emails and Phone Numbers – A Developer’s Journey

Johnson Fash — Sat, 29 Nov 2025 08:55:17 +0000

As a fullstack developer, I’m always on the lookout for tools that save time and automate repetitive tasks. One thing I noticed early in my career is that collecting contact information—emails and phone numbers—from websites can be tedious, especially if you’re doing it manually. Whether it’s for outreach, research, or building a curated contact list, manually scanning pages is slow, error-prone, and frankly, exhausting.

That’s when I decided to create my very first Chrome extension: an Email and Phone Extractor. This project wasn’t just about scraping data; it was about building a lightweight, user-friendly, and reliable tool that anyone could use ethically and efficiently.

You can add the Extension to your chrome browser here!

Why I Built This Extension

The idea came from my own workflow frustrations. I often needed contact information from company websites, portfolio pages, or public directories. Copying and pasting each email or number was draining. I wanted a tool that would scan the page automatically, organize the results, and give me a clean output I could use immediately.

I envisioned a simple Chrome extension that could:

Detect all email addresses and phone numbers on the current page.
Provide a clear interface to view, copy, or save the extracted contacts.
Handle dynamically loaded content without slowing down the browser.
Be easy for anyone to install and use, even without a technical background.

Getting Started with Chrome Extension Development

Building a Chrome extension was a new adventure for me. I started by diving into Chrome’s extension APIs. Chrome extensions have three main components:

Manifest file – defines the extension’s metadata and permissions.
Content scripts – allow the extension to interact with the web page’s DOM.
Background scripts – handle messaging, persistent storage, and long-running tasks.

Building a Clean and Intuitive Interface

One of my main goals was user experience. I wanted the extension to be simple but functional. The popup displays:

Emails and phone numbers in separate sections
A button to copy all results to the clipboard
A count of unique emails and phone numbers

Optional filters to remove duplicates

I wanted users to feel in control. They can extract all contacts with a single click and copy them without dealing with messy page content.

Ethical Considerations

While the extension can extract public information, I wanted to make ethical use clear. I added a disclaimer reminding users to respect privacy laws and not misuse the tool for spam. Emails and phone numbers collected should only be used for legitimate purposes, like reaching out professionally or conducting research.

Challenges Along the Way

Building this extension wasn’t without hurdles:

Handling large pages: Some websites have thousands of DOM nodes. I had to ensure the extension scanned efficiently without freezing the browser.
Dynamic content: Modern sites often load data asynchronously. Mutation observers were critical here.
False positives: Regex sometimes matched text that looked like emails or phone numbers but weren’t. I added filtering and validation to minimize this.
Cross-browser quirks: While building primarily for Chrome, I ensured that the extension’s logic could be adapted for other Chromium-based browsers like Edge and Brave.

Real-Life Use Cases

Here are some ways developers and professionals can benefit from this extension:

Sales and Business Development: Quickly gather leads from public directories and websites.
Recruitment: Extract contact information of potential candidates from company pages or LinkedIn profiles (respecting platform policies).
Networking: Build professional connections by compiling contact lists for outreach.
Research & Data Collection: Academics and researchers can collect emails for surveys or collaborations.

Because of these use cases, the extension isn’t just a productivity tool—it’s a way to automate routine tasks and focus on what truly matters.

Sharing My Work

After testing extensively and refining the features, I published the extension on the Chrome Web Store. The process taught me a lot about packaging, metadata, and compliance with Google’s publishing rules. I also shared it with friends and colleagues, who found it immediately useful.

For those interested, you can try it here: Email & Phone Extractor Chrome Extension

Lessons Learned

Building this Chrome extension was more than a coding exercise—it was a lesson in user experience, problem-solving, and ethical development. Some key takeaways:

Even small projects can have complex technical challenges
Regex is powerful but requires careful testing
Handling dynamic content is critical for modern web tools
Ethical considerations should never be overlooked

Conclusion

Creating the Email and Phone Extractor Chrome extension was a fulfilling journey. It started as a personal tool to save time and evolved into a polished extension that can help other developers, researchers, and professionals streamline their workflows.

If you’re a developer looking for a practical project, Chrome extension development is a fantastic way to combine front-end skills with practical problem-solving. And who knows—you might just build a tool that thousands of people end up using!

Email & Phone Extractor — One-Click Contact Collection for Any Website

Johnson Fash — Tue, 25 Nov 2025 10:04:03 +0000

A friend of mine spent hours manually collecting emails and phone numbers from websites. If you have, then you know it can drive one insane.

After watching a friend on a google meet “speed-run” through LinkedIn, and opened a couple of company websites for lead generation, I realized something: the tools that automate this were either too expensive or too limited.

So, as a developer, i built a solution — a Chrome extension that extracts emails and phone numbers from any webpage with just one click.

Here’s the story behind it, how it works, and why it could change the way you handle web-based contacts.

The Story Behind Email & Phone Extractor

About two months ago, a friend of mine, a digital marketer, was giving me tips on LinkedIn optimization.

While talking, he opened Google Maps, lists of companies, multiple website tabs, and internal links — basically navigating a maze while multitasking. I asked him,

“Bro, why is this so manual?”
He laughed and said:

“The extensions that automate this are too expensive for Nigerians.”
That one sentence sparked an idea. I love turning repetitive, manual tasks into clean, one-click solutions. That night, I started building the first version of Email & Phone Extractor, and now it’s a real Chrome extension that works today.

How It Works

Install the Extension
Available on the Chrome Web Store. One click installs it in seconds.

Navigate to Any Page
Works on LinkedIn, WhatsApp Web, company websites, and almost any Single Page Application (SPA).

Click the Extension Icon
Instantly extracts emails and phone numbers visible on the page, including content loaded dynamically via JavaScript.

View or Export Data
Export contacts as JSON or copy to clipboard. Manage them on your local machine or via our optional account sync feature.

Handles Complex Sites
Unlike simple scrapers, this tool digs into local and session storage, IndexedDB, and cached data to extract contacts even when they’re hidden from the DOM.

Why I Built It

The mission is simple: save time, reduce frustration, and make web contact collection accessible to everyone.

Whether you’re a marketer, sales professional, researcher, or just curious, this extension turns tedious manual scraping into a clean, one-click workflow.

Speed: Collect data in seconds, not hours.

Versatility: Works on almost any site.

Accessibility: No expensive subscriptions or complex setups.

Demo Video

Watch it in action:

https://youtu.be/GWFwXpZ9Tl4

Screenshots

Get Started

Install the Chrome extension, and start extracting emails and phone numbers in one click:

Let Me Introduce to You My Portfolio Website

Johnson Fash — Mon, 26 Apr 2021 14:45:59 +0000

Hello Everyone,

I have finally completed the built of my portfolio website

Features

Static Landing Page with CSS,HTML and JavaScript Custom Animation
Blog Posts
Custom Management System (WordPress Clone) with SEO Manager
Project Demo and more

Here is the Link: https://apluswebmaker.com

JavaScript On Scroll Animation Library

Johnson Fash — Thu, 22 Apr 2021 07:51:59 +0000

OnScroll Animation

On Scroll Animation Library is a simple JavaScript library for animation when element(s) are in view while scrolling the browser.

🚀 Demo

⚙ Installation

Option A.

NPM installation

npm install onscroll-animation --save

Import:

import OnScrollAnimation from "onscroll-animation";

const animate = new OnScrollAnimation({
  ...
});

Option B.

Use CDN - load directly from jsDelivr CDN

<script src="https://cdn.jsdelivr.net/npm/onscroll-animation@latest/dist/animate.bundle.js"></script>


<script>
var animate = new OnScrollAnimation({
  ...
});
<script>

Use

var animate = new OnScrollAnimation({
        ".grid11": {
          parameters: [
            "animation-duration: 0.8s",
            "animation-delay: 1s",
            "animation-fill-mode: forwards"
          ],
          to: ["transform: translateX(-150px)"]
        },
        "section.one .left, section.three .book, section.five .other": {
          from: ["left: -500px"],
          to: { left: "0px" }
        },
        "section.one .right, section.three .complex, section.five .person": {
          from: ["right: -500px"],
          to: ["right: 0px"]
        },
        "section.two": {
          from: ["opacity: 0", "transform: translateY(100px)"],
          to: [ "opacity: 1", "transform: translateY(0px)"]
        },
        ".grid10":{
          parameters: ["animation-duration: 0.8s", "animation-fill-mode: forwards"],
          to: ["transform: translateY(-110px)"]
        }
      });
      animate.defaultParam(["animation-duration: .8s", "run: once", "animation-fill-mode: forwards","pixel-correction: -100px", "animation-time-function: ease-out"]);
      animate.init();

Explanation

OnScrollAnimation class

OnScrollAnimation({....}) accept only an object {...}. This object contains css selectors like ".grid10", "section.two img, section.four img" etc.

Basically, this object properties can be any css selector, which a document.querySelector() method accepts.

The value for the CSS Selector i.e ".grid4" must be an object which holds various properties and values for animation to work.

Properties

1. `parameters:[...] or parameters: {...}` ;

This define @keyframes property for each element i.e parameters: [...] or parameters: {...) can be an array containing strings of regular css or object containing its javascript equivalent like the example below:

run

run can be omitted or included. This lets you determine if animation runs once or continous anytime an animated element is in view.

pixelCorrection

pixel-correction or pixelCorrection use to make correction (in pixel) to when animation starts for an element. i.e 100px means scroll 100px downward before animation starts for an element in viewport, and -100px the opposite.

parameters: [
  "animation-duration: 1s",
  "animation-delay: 2s",
  "animation-fill-mode: forwards",
  "animation-time-function: ease-in",
  "pixel-correction: -200px",  // makes correction to how far down or up to go before element in view animates
  "run: once",   //can be ommited. default is to run everytime element is in view
    ..........
  ]

  or using object

  parameters: {
  animationDuration: "1s",
  animationDelay: "2s",
  animationFillMode: "forwards",
  animationTimeFunction: "ease-in",
  pixelCorrection: "-200px",
  run: "once",
    ..........
  ]

NOTE:

There is non shortcut like "animation: drop 1s forwards" for now. Please specifically list out your @keyframes by name and function like in the example above.

Properties of a selector i.e parameters, **from**, to, 0%, **75%** and more can both be an array, containing string equivalent of your regular css property or an object containing its equivalent in javascript. i.e "max-width" is maxWidth when working with objects.

2. from: [...] or from:{...}

Similar to css property from {.....} used in @keyframe. i.e from: ["width: 0px","height:20px"....]

3. to: [...] or to: {....}

Similar to css property to: {.....} used in @keyframe after defining from {...} i.e to: {width: "100%",height: "200px"}

4. 0: [...], 50: [...], 100:{.....}

This is similar to using percentage in @keyframes, only difference is not including the % sign i.e

const animation = OnScrollAnimation({
  "#imag1": {
    parameters: [.....],
    0: ["width: 20px".....],
    30: [......],
    80: [.....]
  },
  ..........
});
animation.init();

Using custom css

Without defining animation @keyframes in javascript, custom css can be used with each element by including a class that defines the @keyframe in your stylesheet i.e

<body>
  <img alt="ball" scr="./asset/ball.jpg" class="image1"/>
</body>

<style>
  .move {
    animation: ballmove 1s forwards;
  }
  @keyframes ballmove{
    from {
      transform: -100px;
    }
    to {
      transform: 300px;
    }
  }
</style>

<script>
const animation  = new OnScrollAnimation({
  ".image1": {
    css: "move"  // adds custom css class only
  },
  "img": {
    css: "bounce"
  }
});
animation.init();
</script>

Animation.defaultParams()

The Animation method defaultParams() defines a default paramter for each selector. Meaning you can ommit the parameters property for every element if they are all thesame i.e

const animation = new OnScrollAnimation({
  ".grid1, .grid2": {
    from: [....],
    to: [....]
  },
  ".grid4": {
    0: [...],
    50: [...]
  }
  ........
});
animation.defaultParams(["animation-duration: 1s", "animation-fill-mode: forwards"]); // or animation.defaultParams({animationDuration: "2s".......});
animation.init();

You can also ovaride the defaultParams() method for an element by specifying its own parameters i.e

const animation = new OnScrollAnimation({
  ".grid1, .grid2": {
    from: [....],
    to: [....]
  },
  ".grid4": {
    parameters: [....]  // override defaultParams
    0: [...],
    50: [...]
  }
  ........
});
animation.defaultParams(["animation-duration: 1s", "animation-fill-mode: forwards"]); // or animation.defaultParams({animationDuration: "2s".......});
animation.init();

Animation.init()

The init() method initialize the animation to run after the page loads.

More Example:

const animation = new OnScrollAnimation({
        ".one": {
          parameters: [
            "animation-duration: 1s",
            "pixel-correction: -100px",
            "animation-delay: .5s",
            "animation-time-function: linear"
          ],
          from: [
            "transform: translateY(-1000px)"
          ],
          to: [
            "transform: translateY(0px)"
          ]
        },
        ".two": {
          parameters: [
            "animation-duration: 1s",
            "pixel-correction: -300px"
          ],
          from: {
            transform: "rotate(0deg)"
          },
          to: [
            "transform: rotate(360deg)"
          ]
        },
        "article.three": {
          parameters: {
            animationDuration: "1s",
            animationFillMode: "forwards",
            animationTimingFunction: "ease-in"
          },
          0: [
            "transform: translateX(-1000px)",
          ],
          50: [
            "transform: translateX(1000px)",
            "background-color: red"
          ],
          100: [
            "transform: translateX(0px)"
          ]
        },
        ".four": {
          parameters: [
            "animation-duration: 1s"
          ],
          from: [
            "transform: skewX(20deg) translateX(-1000px)"
          ],
          to: [
            "transform: skewX(0deg) translateX(0px)"
          ]
        },
        ".five": {
          parameters: [
            "animation-duration: 1s"
          ],
          from: [
            "position: relative",
            "right: -1000px",
            "transform: skewX(-20deg)"
          ],
          to: [
            "position: relative",
            "right: 0px",
            "transform: skewX(0deg)"
          ]
        },
        ".six": {
          parameters: [
            "animation-duration: 2s",
            "animation-fill-mode: forwards",
          ],
          0: [
            "transform: translateY(0)"
          ],
          75: [
            "transform: translateY(50vh)"
          ]
        },
        ".seven": {
          parameters: [
            "animation-duration: 1.5s"
          ],
          from: [
          "transform: rotateY(0deg)"
          ],
          to: [
          "transform: rotateY(360deg)"
          ]
        }
      });
      animation.init();