Popping Feedback With CSS Anchor Positioning and View-Pushed Animations

The State of CSS 2024 survey wrapped up and the outcomes are attention-grabbing, as at all times. Although every part is value analyzing, we’re normally most hyped concerning the part on probably the most used CSS options. And in case you are fascinated by writing about internet growth (perhaps begin writing with us 😉), you’ll particularly wish to try the characteristic’s Studying Record part. It holds the options that survey respondents want to examine after finishing the survey and is normally composed of up-and-coming options with low neighborhood consciousness.

One of many options I used to be excited to see was my 2024 prime decide: CSS Anchor Positioning, rating within the survey’s Prime 4. Slightly below, you could find Scroll-Pushed Animations, one other superb characteristic that gained broad browser assist this 12 months. Each are elegant and supply good DX, however combining them opens up new potentialities that clearly fall into what most of us would have thought of JavaScript territory simply final 12 months.

I wish to present a type of potentialities whereas studying extra about each options. Particularly, we are going to make the next weblog publish during which footnotes pop up as feedback on the perimeters of every textual content.

For this demo, our necessities shall be:

Pop the footnotes up once they get into the display screen.

Connect them to their corresponding texts.

The footnotes are on the perimeters of the display screen, so we’d like a cell fallback.

The Basis

To start out, we are going to 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 every now and then we’ve a paragraph with a footnote on the finish:

<important class=”publish”>

<!– and so forth. –>

<p class=”observe”>
Tremendous intereseting data!
<span class=”footnote”> A footnote about it </span>
</p>
</important>

Positioning the Footnotes

In that demo, the footnotes are situated contained in the physique of the publish simply after the textual content we wish to observe. Nonetheless, we wish them to be connected as floating bubbles on the facet of the textual content. Previously, we’d most likely want a mixture of absolute and relative positioning together with discovering the right inset properties for every footnote.

Nonetheless, we are able to now use anchor positioning for the job, a characteristic that enables us to place absolute components relative to different components — moderately than simply relative to the containment context it’s in. We shall be speaking about “anchors” and “targets” for some time, so a little bit terminology as we get going:

Anchor: That is the factor used as a reference for positioning different components, therefore the anchor identify.

Goal: That is an absolutely-positioned factor positioned relative to a number of anchors. The goal is the identify we are going to use any longer, however you’ll usually discover it as simply an “completely positioned factor” in different sources.

I received’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 factor. Selecting our anchor, nevertheless, requires extra nuance. Whereas it might seem like every .observe factor must be an anchor factor, 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 components on the publish are faraway from the conventional doc circulation they usually hover visually above their .observe components. 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 perimeters utilizing the publish as an anchor.

That is once we would want to seek out the right inset property to put them on the perimeters. Whereas that is doable, it’s a painful selection since:

You would need to depend on a magic quantity.

It is dependent upon the viewport.

It is dependent upon the footnote’s content material because it modifications its width.

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

.publish {
anchor-name: –post;
}

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

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

Shifting the Goal Round

As a substitute 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 facet of the anchor, permitting us to at all times set the goal’s inset properties appropriately. So, we are able to join the left facet of the goal to the suitable facet of the anchor and vice versa:

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

/* To position them on the suitable */
left: anchor(proper);

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

/* Simply one in every of them at a time! */
}

Nonetheless, you’ll discover that it’s caught to the facet of the publish with no house in between. Fortunately, the margin property works simply as you might be hoping it does with goal components and provides a little bit house between the footnote goal and the publish anchor. We will additionally add a little bit extra kinds to make issues prettier:

.footnote {
/* … */

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

Lastly, all our .footnote components are on the identical facet of the publish, if we wish to organize them one on either side, we are able to use the nth-of-type() selector to pick the even and odd notes and set them on reverse sides.

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

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

We use nth-of-type() as an alternative of nth-child since we simply wish to iterate over .observe components and never all of the siblings.

Simply bear in mind to take away the final inset declaration from .footnote, and tada! We have now our footnotes on either side. You’ll discover I additionally added a little bit 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 simplest half since each view and scroll-driven animation are constructed to be as intuitive as attainable. We are going to begin by registering an animation utilizing an on a regular basis @keyframes. What we wish is for our footnotes to start out being invisible and slowly grow to be larger 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 received’t do something. We normally would have set an animation-duration for it to start out. Nonetheless, view-driven animations don’t run by means of a set time, moderately the animation development will rely on the place the factor is on the display screen. 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 factor is leaving the display screen. What we wish 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 would like the factor to start out 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 superb device by Bramus targeted on scroll and view-driven animation higher exhibits how the animation-range property works.

What About Cellular?

You will have observed that this method to footnotes doesn’t work on smaller screens since there is no such thing as a house on the sides of the publish. The repair is straightforward. What we wish is for the footnotes to show as regular notes on small screens and as feedback on bigger screens, we are able to do this by making our feedback solely out there when the display screen 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 observe 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: “Observe:”;
font-weight: 600;
}
}

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

Now our feedback must be displayed on the perimeters solely when there may be sufficient house for them:

Wrapping Up

If you happen to additionally like writing about one thing you might be enthusiastic about, 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 option to dynamically present feedback is a superb addition. Particularly once we achieved utilizing solely CSS — in a manner that we couldn’t only a 12 months in the past!

Popping Feedback With CSS Anchor Positioning and View-Pushed Animations initially revealed on CSS-Tips, which is a part of the DigitalOcean household. You need to get the e-newsletter.