Popping Feedback With CSS Anchor Positioning And View-Pushed Animations

The State of CSS 2024 survey wrapped up and the outcomes are fascinating, as all the time. Though every part is price analyzing, we’re often most hyped concerning the part on probably the most used CSS options. And in case you are eager about writing about net growth (perhaps begin writing with us 😉), you’ll particularly need to take a look at the function’s Studying Record part. It holds the options that survey respondents want to examine after finishing the survey and is often composed of up-and-coming options with low group consciousness.

One of many options I used to be excited to see was my 2024 high choose: CSS Anchor Positioning, rating within the survey’s Prime 4. Just under, yow will discover Scroll-Pushed Animations, one other wonderful function that gained broad browser help this yr. Each are elegant and provide good DX, however combining them opens up new prospects that clearly fall into what most of us would have thought of JavaScript territory simply final yr.

I need to present a kind of prospects whereas studying extra about each options. Particularly, we’ll make the next weblog publish through which footnotes pop up as feedback on the edges of every textual content.

For this demo, our necessities will likely be:

• Pop the footnotes up after they get into the display.
• Connect them to their corresponding texts.
• The footnotes are on the edges of the display, so we want a cellular fallback.

The Basis

To begin, we’ll use the next on a regular basis instance of a weblog publish structure: title, cowl picture, and physique of textual content:

The one factor to note concerning the markup is that at times we now have a paragraph with a footnote on the finish:

<major class="publish">

  <!-- and so on. -->

  <p class="notice">
    Tremendous intereseting data!
    <span class="footnote"> A footnote about it </span>
  </p>
</major>

In that demo, the footnotes are situated contained in the physique of the publish simply after the textual content we need to notice. Nevertheless, we would like them to be hooked up as floating bubbles on the aspect of the textual content. Previously, we might most likely want a mixture of absolute and relative positioning together with discovering the right inset properties for every footnote.

Nevertheless, we are able to now use anchor positioning for the job, a function that enables us to place absolute parts relative to different parts — somewhat than simply relative to the containment context it’s in. We will likely be speaking about “anchors” and “targets” for some time, so slightly terminology as we get going:

• Anchor: That is the component used as a reference for positioning different parts, therefore the anchor title.
• Goal: That is an absolutely-positioned component positioned relative to a number of anchors. The goal is the title we’ll use any further, however you’ll usually discover it as simply an “completely positioned component” in different assets.

I gained’t get into every element, however if you wish to study extra about it I extremely advocate our Anchor Positioning Information for full data and examples.

The Anchor and Goal

It’s simple to know that every .footnote is a goal component. Choosing our anchor, nevertheless, requires extra nuance. Whereas it might appear to be every .notice component must be an anchor component, it’s higher to decide on the entire .publish because the anchor. Let me clarify if we set the .footnote place to absolute:

.footnote {
  place: absolute;
}

You’ll discover that the .footnote parts on the publish are faraway from the traditional doc circulation they usually hover visually above their .notice parts. That is nice information! Since they’re already aligned on the vertical axis, we simply have to maneuver them on the horizontal axis onto the edges utilizing the publish as an anchor.

That is after we would want to search out the right inset property to put them on the edges. Whereas that is doable, it’s a painful alternative since:

1. You would need to depend on a magic quantity.
2. It will depend on the viewport.
3. It will depend on the footnote’s content material because it modifications its width.

Parts aren’t anchors by default, so to register the publish as an anchor, we now have to make use of the anchor-name property and provides it a dashed-ident (a customized title beginning with two dashes) as a reputation.

.publish {
  anchor-name: --post;
}

On this case, our goal component can be the .footnote. To make use of a goal component, we are able to maintain absolutely the positioning and choose an anchor component utilizing the position-anchor property, which takes the anchor’s dashed ident. This can make .publish the default anchor for the goal within the following step.

.footnote {
  place: absolute;
  position-anchor: --post;
}

Transferring the Goal Round

As an alternative of selecting an arbitrary inset worth for the .footnote‘s left or proper properties, we are able to use the anchor() perform. It returns a <size> worth with the place of 1 aspect of the anchor, permitting us to all the time set the goal’s inset properties appropriately. So, we are able to join the left aspect of the goal to the appropriate aspect of the anchor and vice versa:

.footnote {
  place: absolute;
  position-anchor: --post;

  /* To put them on the appropriate */
  left: anchor(proper);

  /* or to put them on the left*/
  proper: anchor(left);

  /* Simply one among them at a time! */
}

Nevertheless, you’ll discover that it’s caught to the aspect of the publish with no house in between. Fortunately, the margin property works simply as you’re hoping it does with goal parts and provides slightly house between the footnote goal and the publish anchor. We will additionally add slightly extra types to make issues prettier:

.footnote {
  /* ... */

  background-color: #fff;
  border-radius: 20px;
  margin: 0px 20px;
  padding: 20px;
}

Lastly, all our .footnote parts are on the identical aspect of the publish, if we need to prepare them one on all sides, we are able to use the nth-of-type() selector to pick out the even and odd notes and set them on reverse sides.

.notice:nth-of-type(odd) .footnote {
  left: anchor(proper);
}

.notice:nth-of-type(even) .footnote {
  proper: anchor(left);
}

We use nth-of-type() as a substitute of nth-child since we simply need to iterate over .notice parts and never all of the siblings.

Simply keep in mind to take away the final inset declaration from .footnote, and tada! We now have our footnotes on all sides. You’ll discover I additionally added slightly triangle on every footnote, however that’s past the scope of this publish:

The View-Pushed Animation

Let’s get into making the pop-up animation. I discover the best half since each view and scroll-driven animation are constructed to be as intuitive as doable. We’ll begin by registering an animation utilizing an on a regular basis @keyframes. What we would like is for our footnotes to begin being invisible and slowly develop into greater and visual:

@keyframes pop-up {
  from {
    opacity: 0;
    remodel: scale(0.5);
  }

  to {
    opacity: 1;
  }
}

That’s our animation, now we simply have so as to add it to every .footnote:

.footnote {
  /* ... */
  animation: pop-up linear;
}

This by itself gained’t do something. We often would have set an animation-duration for it to begin. Nevertheless, view-driven animations don’t run by a set time, somewhat the animation development will rely on the place the component is on the display. To take action, we set the animation-timeline to view().

.footnote {
  /* ... */
  animation: pop-up linear;
  animation-timeline: view();
}

This makes the animation end simply because the component is leaving the display. What we would like is for it to complete someplace extra readable. The final contact is setting the animation-range to cowl 0% cowl 40%. This interprets to, “I need the component to begin its animation when it’s 0% within the view and finish when it’s at 40% within the view.”

.footnote {
  /* ... */
  animation: pop-up linear;
  animation-timeline: view();
  animation-range: cowl 0% cowl 40%;
}

This wonderful device by Bramus targeted on scroll and view-driven animation higher reveals how the animation-range property works.

What About Cellular?

You’ll have observed that this strategy to footnotes doesn’t work on smaller screens since there isn’t any house on the sides of the publish. The repair is straightforward. What we would like is for the footnotes to show as regular notes on small screens and as feedback on bigger screens, we are able to try this by making our feedback solely accessible when the display is larger than a sure threshold, which is about 1200px. If it isn’t, then the notes are displayed on the physique of the publish as another notice chances are you’ll discover on the internet.

.footnote {
  show: flex;
  hole: 10px;

  border-radius: 20px;
  padding: 20px;

  background-color: #fce6c2;

  &::earlier than {
    content material: "Notice:";
    font-weight: 600;
  }
}

@media (width > 1200px) {
  /* Kinds */
}

Now our feedback must be displayed on the edges solely when there’s sufficient house for them:

Wrapping Up

If you happen to additionally like writing about one thing you’re captivated with, you’ll usually end up going into random tangents or wanting so as to add a remark in every paragraph for additional context. No less than, that’s my case, so having a solution to dynamically present feedback is a good addition. Particularly after we achieved utilizing solely CSS — in a method that we couldn’t only a yr in the past!