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 2018 I had a brilliant idea.  What if I threw a few photos up on Unsplash to see what, if any, traction they'd gain on a website that absolutely didn't need any more.  I don't quite recall what my end game was as I didn't have a website up at the time so it's not like I was farming for traffic.  Perhaps I simply wanted another feed for my digital dopamine drip.  Another honey jar to occasionally dip my finger in for some of that syrupy-sweet validation.

I fired up Adobe Lightroom, plucked three of my favorites from a smart collection aaaand... after a few weeks of unremarkable download metrics I grew bored of the experiment and impulsively moved on to my next ADHD-driven indulgence. Fin.

Whether engrossed in other creative pursuits or reeling from a global pandemic, those photos completely slipped from my mind. That is, until a few weeks ago when a friend sent me a link to a local charity 'fun-run,' likely hoping I'd participate so he wouldn't have to.  

It was a high quality site, commensurate with the Sisyphean task of convincing users to pay for the privilege of running on Hong Kong asphalt under the midday sun but it was the hero image peeking from behind the tagline that immediately halted my hamster wheel.

Yup... my Unsplash photo!   A sunrise skyline shot taken from the very asphalt on which the race was to be held.

My initial feeling was actually one of relief - viewing this as my 'contribution to the cause,' conveniently assuaging any irrational guilt for inevitably declining an event I was never formally invited to by organizers I've never met.

But once I came down from riding the tiny wave of pseudo moral victories I quickly paddled over to Unsplash to see how many other fun-runs I may have just indirectly brokered a exit strategy from.

Now, is this a backdoor flex? An indirect way to creatively showcase some work? Sure, but for all I know, these are modest numbers as Unsplash doesn't share stats. However, there's a big scab here I've really wanted to pick at for a while now, one that I was only ready to rip after becoming both culprit and cautionary case study.

It's the Faustian bargain suckers like me make when submitting to sites like this. Unsplash promotes itself as a vehicle for professional exposure through dissemination when it's transparently little more than another repackaged rat race to the bottom for what is, paradoxically, still the most worthless yet coveted currency in the world: likes.

With that said, it will likely come as no surprise that despite having an Unsplash profile page with my Instagram handle and email, after millions of views and tens of thousands of downloads: zero new followers, zero contacts.

It's not like exposure pays the bills anyway. I'm fortunate to not have to rely on it, but many photographers do. For them, sites like Unsplash fundamentally upend their economy, devaluing truly great photography by saturating the market with free, 'good enough' alternatives like mine.

And to be clear, we're not just talking about Mommy bloggers and charities hunting for heroes but Fortune 500 companies with marketing budgets that rival the GDP of small countries.

Case in point: A reverse image search revealed that everyone from major outlets like RT International, CoinDesk, Yahoo Finance, New Zealand Herald, London Evening Standard and Morningstar, to smaller operations like Tatler Asia, Harvard University, Lartisien, Thrillist, Forbes.cz, and TEFL.org have been but a few of the thousands free-feeding from the RyanMac photo bar. 

The irony? Had I not been a lazy web developer then, and provided a site like this to link back to, I might've at least had a few quality backlinks to show for my minor moral misgivings. 

Instead, I'm left contemplating the peculiar economics of giving away something I didn't realize had value and the guilt of my tiny contribution to a deleterious shift in an industry no amount of free photos can undo all from under the shadow of an AI tsunami that may have already rendered this diatribe academic. 

All just desserts for someone who was probably just in it for the honey.

A 6 year experiment with a moderately interesting yet wholly predictable ending.

Unsplash: A Cautionary Tale

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

 <p>Remember that creativity is at the core of graphic design. Embrace your creativity, experiment with different ideas, and think outside the box to create unique and impactful designs. Don't be afraid to take risks and push the boundaries of traditional design. Steve Jobs once said:</p> <blockquote>Design is not just what it looks like and feels like. Design is how it works. So go ahead, unleash your creativity, and embark on your path to becoming a graphic designer! </blockquote> <p>In addition to the aforementioned steps, other important aspects of becoming a graphic designer include networking with industry professionals, staying updated on design trends and technologies, and continuously learning and improving your skills.</p> <p>Becoming a graphic designer is an exciting journey that requires dedication, hard work, and a genuine passion for design. By following these 10 simple steps, you'll be well on your way to establishing yourself as a skilled graphic designer and opening doors to a rewarding and fulfilling career.</p> 

Play to Your Strengths and<br> <span class="mil-thin">Supercharge</span> Your <span class="mil-thin">Business</span>

Play to Your Strengths and Supercharge Your Business

 <h5>Voluptatem odit ullam veritatis</h5> <p>Modi sint reprehenderit vitae officiis pariatur, ab debitis voluptate ea eius assumenda beatae, tempora, dolores deserunt, ipsam ipsum! Quod ipsam consequuntur distinctio velit sed ipsum quisquam, itaque placeat error non animi quam aut similique nulla ab. Quaerat dicta, dolores veritatis magnam quae aut omnis in porro.</p> 

5 Steps to Create an Outstanding<br> <span class="mil-thin">Marketing</span> Plan

5 Steps to Create an Outstanding Marketing Plan

10 Content Proofreading Tips to <span class="mil-thin">Catch</span><br> More Avoidable <span class="mil-thin">Goofs</span>

10 Content Proofreading Tips to Catch More Avoidable Goofs

16 Best Graphic <span class="mil-thin">Design</span><br> Online and Offline <span class="mil-thin">Courses</span>

16 Best Graphic Design Online and Offline Courses

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

Featured Posts

Opposite Scroll With a Bit of Spice

Unsplash: A Cautionary Tale

Categories:

Opposite Scroll With a Bit of Spice

Unsplash: A Cautionary Tale

Easy-Peasy GSAP Link Animations in React

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

Snail Mail

Contact