GSAP ScrollTrigger - Marquee Page Border

gsap-scrolltrigger-marquee-page-border.markdown

GSAP ScrollTrigger - Marquee Page Border

A Pen by Ryan Mulligan on CodePen.

License.

index.html

<div class="marquee-container">
  <div class="marquee marquee--top">
    <div></div>
  </div>
  <div class="marquee marquee--right">
    <div></div>
  </div>
  <div class="marquee marquee--bottom">
    <div></div>
  </div>
  <div class="marquee marquee--left">
    <div></div>
  </div>
</div>

<main class="page-content">
  <h1>You'll <u>never</u> believe how chill it is!</h1>
  <p>The chill zone is where all the things are copacetic. Think about all the unchill things in your life. Think about them, just for a moment. And now? Just forget about 'em. Why? Because, my friend: you've just entered the <em>Chill Zone</em>. The following passages of text are pulled from this <a href="https://www.wikihow.com/Be-Chill">wikiHow article</a>.</p>

  <section class="page-content__section" data-bg-color="#17202A">
    <h2>Welcome to the chill zone</h2>

    <p>Do your own thing, and let others do theirs. If they're not hurting anyone, what's the problem? Chill people don't look for reasons or opportunities to hate on others just for being different. There's no reason to bully or tread on other people's territory. Try to be happy with yourself and encourage self-love in others, too and remember be yourself.</p>

    <p>Unless someone is rude to you, your day should go by smoothly by being polite, considerate, and nice. Chill people don't antagonize for the sake of it or stir up a bunch of negative emotions by being jerks; chill people are generally kind and get along well with others. However, try to avoid going overboard so you don't become a people-pleaser or pushover.</p>

    <p>Don't sweat the small stuff. Take your life in stride. Roll with the punches and be accepting of the little things life throws your way, reserving your passion for what matters to you most. This is pretty much the defining feature of a chill person.</p>
  </section>

  <section class="page-content__section" data-bg-color="#1C2833">
    <h2>Prepare your chill</h2>

    <p>Be fun to hang out with. Don't be someone who is really boring and afraid to try new things. Go out and do stuff you consider fun and be someone that other people want to spend time with. Talk with people, go see movies, play games, go on hikes or go camping: it's all good!</p>

    <p>Make and follow your own trends. Be unique. A chill person doesn't feel the need to follow all the trends set by others, they just do what they want and what makes them happy. This laid back attitude inspires others to be more laid back and people will want to be around you more often.</p>
  </section>

  <section class="page-content__section" data-bg-color="#212F3D">
    <h2>The best chills are those most chilled</h2>

    <p>Pick your battles. Some things in life are bound to upset or anger you, and while it's okay to have those feelings, it's best not to nosedive into every argument that presents itself. Stop, take a deep breath, and decide whether an unpleasant situation is worth getting into. Catch yourself before you get stuck in a pointless argument or a big scene. From here, you can redirect the situation to be in your favor.</p>

    <p>Redirect your thoughts. Distract yourself from your immediate feelings by redirecting your thoughts. There are lots of ways you can do this. You can count your breaths. You can even sing a song (inside your head is probably better than out loud).</p>
  </section>

  <section class="page-content__section" data-bg-color="#273746">
    <h2>Chill all day and night</h2>

    <p>Chew some gum. Studies have shown that we can reduce a significant amount of stress by chewing gum. Pop a stick of that winter fresh if you’re just not feeling calm in the moment.</p>

    <p>Evaluate how much this matters. Think about how much your problem matters in the grand scheme of things. Will it still affect you a year from now? Does it even help to be so hard on yourself? If you made it out alive, chances are you’ll find a way to get through it and move on to more happiness and hardships.</p>

    <p>Do what your grandma would do. By the time we’re much older, we usually don’t get so worried when things don’t go our way, because we get used to it. Think of how your grandma would react in a situation and do that. She’d probably say something funny and then move on to the next thing, which is really the best thing to do if you want to stay sane.</p>
  </section>

  <section class="page-content__section" data-bg-color="#2C3E50">
    <h2>When the chill gets chiller</h2>

    <p>Go somewhere else. If you just can’t handle the situation, take yourself out of it. No reason to stick around if you’re going to lose your cool and make some mistakes. Remove yourself from the room for a few minutes and then try again once you’ve managed to work through the initial anger or fear (or whatever you’re feeling).</p>

    <p>
      Stay away from toxic people and situations. Avoiding such things is the best way to be chill in life. Just say no to all the bullies, liars, and trash-talkers. You don’t need that in your life! Cut toxic people out of your life and don’t go around causing trouble yourself.</p>

    <p>Get proactive. There's a difference between being chill and being passive. Instead of sitting around thinking your problems could be worse, always try to make things better for yourself. It'll be a lot easier to be genuinely laid-back when you're satisfied with your life as opposed to settling for less.</p>
  </section>
  <section class="page-content__section" data-bg-color="#34495E">
    <h2>Should I bring a jacket?</h2>

    <p>Maybe. But be confident. When you have lots of self confidence and comfort with who you are, you will have a much easier time being chill. You will know that it’s okay if you make a mistake, that it doesn’t make you worthless or something like that. You will know you can handle whatever crazy life manages to throw at you.</p>

    <p>
      Find enjoyment in life. Do things in life that make you happy. Don’t do things that stress you out just to accommodate others and not yourself. Doing things that make you happy will make you more calm and relaxed, helping you deal with all your problems in a better way.</p>

    <p>
      Ignore ignorant opinions. Not caring what others think will make many situations in your life less stressful, like arguments and rumors.</p>

    <p>
      Keep a sense of humor. You’ve got to laugh about stuff in life, especially the stuff that doesn’t go your way, or you’re going to spend life grumpy and stressed out. When someone is a jerk to you, relieve your anger through humor. Just laugh at them because they are clearly very boring and miserable.</p>
  </section>
</main>

script.js

gsap.registerPlugin(ScrollTrigger);

const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion)");
const sections = document.querySelectorAll(".page-content__section");
const marquees = document.querySelectorAll(".marquee div");
let marqueeText = "";

const updateMarqueeText = () => {
  [...marquees].forEach((marquee) => {
    marquee.classList.add("active");
    marquee.addEventListener("transitionend", () => {
      marquee.classList.remove("active");
      marquee.innerText = `${marqueeText} 😎 `.repeat(20);
    });
  });
};

const updateBgColor = (color) =>
  document.documentElement.style.setProperty("--color-background", color);

const setActiveSection = (section) => {
  marqueeText = section.querySelector("h2").textContent;
  [...sections].forEach((section) => section.classList.remove("active"));
  section.classList.add("active");
  !prefersReducedMotion.matches && updateBgColor(section.dataset.bgColor);
  updateMarqueeText();
};

if (!prefersReducedMotion.matches) {
  gsap.to(".marquee div", {
    scrollTrigger: {
      trigger: ".page-content",
      scrub: 0.25,
      start: "top bottom",
      end: "bottom top",
      ease: "power2"
    },
    xPercent: -50
  });
}

gsap.utils.toArray(".page-content__section h2").forEach((heading) => {
  ScrollTrigger.create({
    trigger: heading,
    start: "top center",
    end: "bottom 200px",
    toggleActions: "play reset play reset",
    ease: "power2",
    onEnter: () =>
      marqueeText !== heading.textContent &&
      setActiveSection(heading.parentElement),
    onEnterBack: () =>
      marqueeText !== heading.textContent &&
      setActiveSection(heading.parentElement)
  });
});

scripts

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js"></script>

style.scss

:root {
  --color-background: #151818;
  --color-text: whitesmoke;
  --color-chill: #ecf232;
  --marquee-font-size: min(max(12px, 2vw), 22px);
  --headline-font-size: min(max(40px, 6vw), 70px);
  --paragraph-font-size: min(max(16px, 4vw), 22px);
  --section-heading-font-size: min(max(30px, 4vw), 50px);
  --duration: 300ms;
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--color-background);
  font-family: "Inter", sans-serif;
  color: var(--color-text);
  width: 100%;
  transition: background-color var(--duration) var(--ease);
}

.page-content {
  max-width: 90ch;
  padding: 4rem;
  margin: 8rem auto;

  * + * {
    margin-top: 2.5rem;
  }

  a {
    color: var(--color-chill);
  }

  h1 {
    font-size: var(--headline-font-size);
    font-weight: 700;
    line-height: 1.2;
  }

  h2 {
    margin-top: 6rem;
    font-size: var(--section-heading-font-size);
    font-weight: 700;
    line-height: 1.2;
  }

  em {
    font-style: italic;
  }

  p {
    font-size: var(--paragraph-font-size);
    line-height: 1.75;
    letter-spacing: 0.0125rem;
  }
}

.page-content__section {
  transition: opacity var(--duration) var(--ease);

  h2 {
    transform-origin: 50% 100%;
  }
}

.page-content__section.active {
  opacity: 1;

  h2 {
    animation: activate calc(var(--duration) * 2) var(--ease) forwards;

    @keyframes activate {
      25% {
        color: var(--color-chill);
        transform: translateY(-12px);
      }
      40% {
        transform: translateY(2px);
      }
      50% {
        transform: translateY(-4px);
      }
      60% {
        color: var(--color-text);
        transform: translateY(1px);
      }
      65%,
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }
  }
}

.marquee-container {
  position: fixed;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-weight: 700;
  font-family: "Karla", sans-serif;
  text-transform: uppercase;
  z-index: 1;
}

.marquee {
  position: absolute;
  font-size: var(--marquee-font-size);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.25rem;
  overflow: hidden;
  padding: 2vmin 0;
  min-width: 100%;
  user-select: none;
  background-color: var(--color-background);
  box-shadow: var(--color-background) 0 2vmin 2vmin 1vmin;
  transition: background-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);

  &--top {
    top: -1px;
  }

  &--left {
    left: -1px;
    bottom: -6vmin;
    transform: rotate(-0.25turn);
    transform-origin: 0 0;
  }

  &--right {
    left: calc(100% + 1px);
    top: 0;
    transform: rotate(0.25turn);
    transform-origin: 0 0;
  }

  &--bottom {
    bottom: -1px;
    right: 0;
    transform: rotate(0.5turn);
  }

  div {
    opacity: 1;
    transition: opacity var(--duration) var(--ease);

    &.active {
      opacity: 0;
    }
  }
}