6. Replace Annoying Instant Popups With an Engagement-Based Dialog

I’m not against popups.

I’m against popups that attack visitors before they’ve even discovered what the website is about.

JavaScript lets you wait until someone has actually engaged with the page.

For example, create a native dialog:

<dialog id="offer-dialog">
    <h2>Enjoying this?</h2>
    <p>Get more web tips delivered occasionally.</p>

    <a href="/newsletter/">Join the List</a>

    <button id="close-dialog">
        No Thanks
    </button>
</dialog>

Then wait until the visitor has both spent some time on the page and scrolled through part of it:

const dialog =
    document.getElementById('offer-dialog');

let enoughTime = false;

setTimeout(() => {
    enoughTime = true;
    checkEngagement();
}, 45000);

function checkEngagement() {
    const total =
        document.documentElement.scrollHeight -
        window.innerHeight;

    const progress = total > 0
        ? window.scrollY / total
        : 0;

    if (
        enoughTime &&
        progress > 0.25 &&
        !sessionStorage.getItem('offerShown')
    ) {
        dialog.showModal();
        sessionStorage.setItem('offerShown', '1');
    }
}

window.addEventListener(
    'scroll',
    checkEngagement,
    { passive: true }
);

document.getElementById('close-dialog')
    .addEventListener('click', () => {
        dialog.close();
    });

This version waits 45 seconds, checks that the visitor has explored at least part of the page, and displays the message only once during that session.

That’s a very different experience from:

WELCOME! SIGN UP! HERE’S 10% OFF! ALLOW NOTIFICATIONS! CHAT WITH US!

before the visitor has managed to read the first sentence.

Great for: newsletters, discounts, consultations, gated resources, downloads, and membership offers.

7. Remember What the Visitor Chose

One of the easiest ways to make a website feel more personal is simply to remember what someone already told you.

Suppose your portfolio lets people filter projects by category:

<button class="filter" data-filter="websites">
    Websites
</button>

<button class="filter" data-filter="branding">
    Branding
</button>

<button class="filter" data-filter="software">
    Software
</button>

You can store their choice:

const buttons =
    document.querySelectorAll('.filter');

function selectFilter(value) {
    buttons.forEach(button => {
        button.classList.toggle(
            'active',
            button.dataset.filter === value
        );
    });

    // Your filtering code would go here.
}

buttons.forEach(button => {
    button.addEventListener('click', () => {
        const value = button.dataset.filter;

        localStorage.setItem(
            'preferredFilter',
            value
        );

        selectFilter(value);
    });
});

const saved =
    localStorage.getItem('preferredFilter');

if (saved) {
    selectFilter(saved);
}

Now when the visitor returns, the site can restore their preferred category.

The same technique can remember:

• list versus grid layouts
• dismissed notices
• font-size preferences
• selected categories
• recently viewed content
• game settings
• interface preferences
• tutorial progress

The key is to use remembered preferences to save people work, not to become creepy.

Great for: web apps, portals, games, directories, dashboards, stores, and content-heavy websites.

8. Add Smooth Transitions When Content Changes

Modern browsers give developers increasingly powerful ways to transition between interface states without bringing in an entire animation framework.

For example, imagine a portfolio grid that can switch between normal and compact views.

<button id="change-view">
    Change View
</button>

<div id="portfolio-grid">
    ...
</div>

Your JavaScript might look like:

const button =
    document.getElementById('change-view');

const grid =
    document.getElementById('portfolio-grid');

button.addEventListener('click', () => {

    const changeLayout = () => {
        grid.classList.toggle('compact');
    };

    if (document.startViewTransition) {
        document.startViewTransition(changeLayout);
    } else {
        changeLayout();
    }
});

Notice the feature check.

If the browser supports the transition feature, visitors get the enhanced effect. If it doesn’t, the layout still changes normally.

That’s called progressive enhancement, and it’s an excellent way to use newer browser capabilities without making your site dependent upon them.

Great for: galleries, filtering systems, product selections, dashboards, menus, tabs, and app-like interfaces.

9. Turn Static Numbers Into an Interactive Calculator

Want someone to spend longer on a service page?

Give them something useful to calculate.

Even a basic estimator can turn passive reading into active participation.

<label for="pages">
    How many pages?
</label>

<input
    id="pages"
    type="range"
    min="1"
    max="30"
    value="5"
>

<p>
    Estimated project:
    <strong id="estimate">$1,500</strong>
</p>

Then calculate instantly:

const pages =
    document.getElementById('pages');

const estimate =
    document.getElementById('estimate');

function calculate() {
    const count = Number(pages.value);

    const basePrice = 500;
    const pagePrice = 200;

    const total =
        basePrice + (count * pagePrice);

    estimate.textContent =
        total.toLocaleString(
            'en-US',
            {
                style: 'currency',
                currency: 'USD',
                maximumFractionDigits: 0
            }
        );
}

pages.addEventListener('input', calculate);
calculate();

Obviously, you’d replace the example numbers with your own formula.

You could build:

• website cost estimators
• savings calculators
• ROI calculators
• calorie calculators
• mortgage estimates
• shipping estimates
• project timelines
• product configurators
• quiz results

The magic isn’t the math.

It’s that the visitor stops reading your website and starts using your website.

That’s an important distinction.

Great for: professional services, financial sites, contractors, SaaS companies, agencies, ecommerce, healthcare, and educational sites.

10. Reward Actions With Tiny Micro-Animations

People like interfaces that acknowledge them.

If someone completes a task, adds something to a wishlist, saves a setting, finishes a lesson, earns an achievement, or submits a form, give the action a little visual payoff.

You don’t need fireworks.

For example:

<button id="save-button">
    Save Favorite
</button>

<span id="saved-message">
    Saved!
</span>

Then:

const saveButton =
    document.getElementById('save-button');

const savedMessage =
    document.getElementById('saved-message');

saveButton.addEventListener('click', () => {

    savedMessage.animate(
        [
            {
                transform: 'scale(.7)',
                opacity: 0
            },
            {
                transform: 'scale(1.2)',
                opacity: 1
            },
            {
                transform: 'scale(1)',
                opacity: 1
            }
        ],
        {
            duration: 500,
            easing: 'ease-out'
        }
    );
});

It’s tiny.

But tiny rewards are surprisingly powerful.

Consider adding a little bounce when something is added to a cart. Let a heart briefly grow when a favorite is saved. Animate an achievement badge when it’s earned. Give a completed checklist item a satisfying checkmark.

Your visitor pressed the button.

Let the website say, “Yep. I got it.”

Great for: almost everything.

The Best JavaScript Doesn’t Call Attention to JavaScript

It’s tempting to think interactive websites need more movement, more animation, more popups, and more effects.

Usually they don’t.

Good interactivity is less about showing visitors what JavaScript can do and more about making the website respond intelligently to what the visitor is doing.

Show progress.

Remember choices.

Provide immediate feedback.

Make difficult tasks easier.

Reveal additional information at the right time.

Reward interaction.

And occasionally add something unexpected simply because it’s fun.

The best result is when someone doesn’t leave your website thinking:

“Wow, that site had a lot of JavaScript.”

They leave thinking:

“That was a really nice website to use.”

That’s the kind of interactivity worth adding.