I was looking for something dynamic to aesthetically anchor on of the services pages of my site.  A layout that could creatively marry a bit of portfolio content within it - since at the moment, bits are all I have for many of them - and something like @tomisloading's Opposite Scroll React component perfectly fit the bill.

The only problem is that it wasn't all that responsive and, considering the unconventional presentation, I also wanted to ensure users effortlessly connected the content on the left to the related photo on the right so let's dig into it a bit.

Disclaimer: Tom's Opposite Scroll is a paid component, so I'll only be sharing some custom bits here. However, I highly recommend checking out his site as it's not only a great library but also a brilliant model for how to compose your own clean React and Tailwind CSS components.

I thought about getting cute here by completely overlaying semi-opaque content atop the reverse scrolling images underneath but the implementation was a bit tricky and I wasn't sure I'd necessarily be satisfied with the result so I kept it simple: duplicate the image on the content side and dump the opposite scroll completely.   

const Content = ({ content }) => {
  return (
    <div className="w-full">
      {content.map(({ id, title, description, img }, idx) => (
        <div
          key={id}
          className={`p-8 h-screen flex flex-col justify-center ${
            idx % 2 ? "bg-white text-black" : "bg-black text-white"
          }`}
        >
          <h3 className="text-3xl font-medium">{title}</h3>
          <p className="font-light w-full max-w-md my-4">{description}</p>
          <NextImage 
            src={img} 
            width={350} 
            height={100}
            className="mt-2 block sm:hidden"
            />
        </div>
      ))}
    </div>
  );
};

Hide image above mobile width with sm:hidden

Swap justify-between to justify-center for improved readability

Drop the mobile w-24 from the image column so it stretches full (not pictured).

Now on to the fun stuff.   Since it's a free-scrolling component with two columns traveling in opposite directions on scrub, as mentioned earlier, I wanted to take it a bit further to help users immediately connect the image on the right to its corresponding content on the left. 

To accomplish that I went with an opacity dip and a (probably unnecessary) grayscale fade for images as they leave the viewport to drill user focus in the center when the sides meet.

From there, you just take the newly created ImageWithFilter component and swap that for the HTML img control used in the original project and Framer Motion handles the rest.   You can check out a live demo on some of my services pages.

@tomisloading's React component with a scoop of Intersection Observer and an extra dash of responsiveness.

Opposite Scroll with a bit of Spice

Back in the halcyon days, before TikTok, NFTs, and Conde Nast gutting Wired Magazine like a Thanksgiving turkey, their website utilized this blue highlighter underline effect for hyperlinks that I always found attractive.

What if we took that but applied a modern makeover by making it seem as if some invisible, digital elf was highlighting them in real-time as we scrolled down the page?

Like this! (I'm sure you already saw it but let's just pretend it was a well-timed reveal)

Anyway, the implementation is pretty trivial.  

First some CSS.  The effect here is just a background image, shaped using linear-gradient to mimic the look of a underline, and then animating it across using CSS transitions when the active class is added to it. 

:root {
  --color-text-highlight: #333;
  --bg-color-highlight: #87d49a;
  --bg-color-highlight-hover: #a1e3b2;
  --line-size: 0.25em;
  --ease: cubic-bezier(0.30, 1, 0.5, 1);
  --duration: 1.5s;
}

.digital-elf-link {
  background-repeat: no-repeat;
  background-size: 0% 100%;
  cursor: pointer;
  font-weight: 300;
  color: #000;

  background-image: linear-gradient(
    transparent calc(100% - var(--line-size)),
    var(--bg-color-highlight) var(--line-size)
  );

  transition:
    background-color calc(var(--duration) / 4) var(--ease),
    background-size var(--duration) var(--ease);

  &.active {
    background-size: 100% 100%;
  }

  &:hover {
    background-image: linear-gradient(
      transparent calc(100% - var(--line-size)),
      var(--bg-color-highlight-hover) var(--line-size)
    );
  }
}

And for that, we'll use GSAP.  Let's create a custom hook and toss our GSAP code in there.  ScrollTrigger has a light lift here, only being leveraged to 'activate' the links as they appear so CSS can work its magic.

// useLinkHighligher.js

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { useGSAP } from '@gsap/react';

gsap.registerPlugin(ScrollTrigger);

const useLinkHighlighter = () => {
  useGSAP(() => {
    const highlights = gsap.utils.toArray("p .digital-elf-link");

    highlights.forEach((highlight) => {
      ScrollTrigger.create({
        start: "-120px center",
        trigger: highlight,    
        onEnter: () => highlight.classList.add("active")
      });
    });
  }, []);
};

export default useLinkHighlighter;

From there, just import, call, and Bob's your uncle.  Happy highlighting.

import useLinkHighlighter from "@/src/lib/useLinkHighlighter";
// ...
useLinkHighlighter();

Replicate the old Wired Magazine highlighter underline link effect in minutes using Greensock's GSAP library

Create animated links using GSAP and ScrollTrigger in React / Next.js

Sex up your links with GSAP ScrollTrigger

Within a few weeks of management’s (wise) decision to entrust the marketing fate of one of the most anticipated product launches in company history to their versatile web developer, I was on a plane to Los Angeles. First steps were to help my colleague polish his storyboard and wrestle Valley traffic procuring all the gear we needed for the shoot—a one-day affair at a stunning Malibu canal house.

Our budget was as tight as the meticulously staggered call times for our talent, making ruthless efficiency not just a goal, but a near necessity. In the end however, I managed to navigate near-calamitous natural lighting conditions to get the shots we needed and I was quickly back on a plane with most of the edit wrapped before wheels touched in Hong Kong. 

My promise was a professional-quality video that showcased the pen’s accessibility and versatility, and I confidently delivered. All stakeholders agreed.

Entrusted with a major product launch, I delivered a professional-quality video under tight budget and time constraints, showcasing the product’s accessibility and versatility.

The 3Doodler Flow Video

From its inception, 3Doodler had largely relied on a WordPress stack to manage its array of web properties. However, as we grew, so did our e-commerce needs, and so around 2016 I convinced the team to dip its toes in Shopify's pond. Exciting as this transition was, it came with challenges. The largest was the number of active WordPress projects that would now require a Shopify retrofit, as tight launch deadlines made full Liquid rebuilds unfeasible.

This was one such project. Fortunately for me, Shopify had just released its JavaScript Buy SDK. Despite being buggy and sparsely documented—as libraries fresh out of beta tend to be—it ultimately provided what I needed to bring Faraz's sublime design to life (in PHP) while seamlessly integrating it into our nascent Shopify eco-system. This approach met all requirements while preserving not only my bandwidth but sanity by no longer having to toil with WooCommerce.

Transitioning 3Doodler to Shopify in 2016, I integrated the JavaScript Buy SDK to marry their WordPress stack and nascent Shopify eco-system.

The 3Doodler Pro Website

Time is rarely on your side in this game, but here it was looming over me like a piano tenuously hanging out a window. Fresh off a successful Kickstarter—and after months of internal deliberation—it was belatedly decided that our highly anticipated Sugar Pen would, in fact, need a dedicated digital home, and for a variety of reasons, wanted to move in yesterday.

By the time the final design was signed off on, my development runway was less than a week. So, over a long, caffeinated holiday weekend, I decided to bunker down and turn it around in full to ensure I had headroom for any revisions. To my wondrous surprise, few, if any, were needed.

With less than a week to develop our Sugar Pen's website following a successful Kickstarter, I worked over a holiday weekend to deliver a final product with minimal revisions.

Projects

Useful links

Snail Mail

Contact

Random Ruminations

Opposite Scroll With a Bit of Spice

Easy-Peasy GSAP Link Animations in React

This is where you might subscribe for my newsletter one day!

Snail Mail

Contact