Cookie Consent by Free Privacy Policy Generator ๐Ÿ“Œ CSS Scroll-Driven Animations: First Look

๐Ÿ  Team IT Security News

TSecurity.de ist eine Online-Plattform, die sich auf die Bereitstellung von Informationen,alle 15 Minuten neuste Nachrichten, Bildungsressourcen und Dienstleistungen rund um das Thema IT-Sicherheit spezialisiert hat.
Ob es sich um aktuelle Nachrichten, Fachartikel, Blogbeitrรคge, Webinare, Tutorials, oder Tipps & Tricks handelt, TSecurity.de bietet seinen Nutzern einen umfassenden รœberblick รผber die wichtigsten Aspekte der IT-Sicherheit in einer sich stรคndig verรคndernden digitalen Welt.

16.12.2023 - TIP: Wer den Cookie Consent Banner akzeptiert, kann z.B. von Englisch nach Deutsch รผbersetzen, erst Englisch auswรคhlen dann wieder Deutsch!

Google Android Playstore Download Button fรผr Team IT Security



๐Ÿ“š CSS Scroll-Driven Animations: First Look


๐Ÿ’ก Newskategorie: Programmierung
๐Ÿ”— Quelle: dev.to

In this post weโ€™re going to look at a really exciting new CSS feature, scroll driven animations. Weโ€™ll take some, boring, scrolling content, and give it an upgrade to something a little more interesting. And weโ€™ll do it all with CSS. No JavaScript. Alright, letโ€™s get to it!

Ok, so hereโ€™s what we are starting with. Weโ€™ve got this content with some basic info about NBA teams. And, when we scroll down to see the list and it looks, not only a little boring, but almost broken. The headers are sticky but before they stick to the top, they have extra space next to them. As they stick, they sit next to each other and look ok.

Wouldnโ€™t it be great if we could transition these as we scroll? Well, we actually can with scroll driven animations.

What are CSS Scroll-Driven animations?

Scroll-driven animations in CSS provide effects that used to require JavaScript to pull off. They allow us to animate items tied to their visibility within a given scroll container. And the possibilities are endless.

Using the CSS animation-timeline Property and view() Function

The first thing we want to do is animate our headers so that they look better as we scroll. To do this, we start by adding the animation-timeline property. This is the brand new property that makes all of this possible.
Itโ€™s what allows us to bind animations to a scroll container as it scrolls. Now there are many ways to use this property, but for this example we are going to keep it simple.

.title {
    animation-timeline
}

Weโ€™re going to use the also brand new, view() function. This allows us to tie animations to the nearest parent scrolling container. Now, there are many different options we can pass to the view function, but weโ€™re just going to pass it the direction of scroll that we want to animate along. In our case itโ€™s the block direction because thatโ€™s the way that our content scrolls. If it were scrolling horizontally, we could use inline instead.

.title {
    animation-timeline: view(block);
}

Ok, now letโ€™s create a key frame animation for how we want these headers to animate. What weโ€™ll do is have the containers start at full width and animate to the final fifty percent width. So, letโ€™s call it shrink. Ok, weโ€™ll go from a width of one hundred percent to a width of fifty percent, but we also have a four pixel gap between the headers when theyโ€™re pinned, so weโ€™ll make it a calc and subtract half of that gap, 2px.

Letโ€™s also scale from eighty percent to one hundred percent. And, letโ€™s also fade it in from an opacity of zero to an opacity of one.

@keyframes shrink {
    from {
        width: 100%;
        scale: 0.8;
        opacity: 0;
    }
    to {
        width: calc(50% - 2px);
        scale: 1;
        opacity: 1;
    }
}

Now, letโ€™s add this animation to our element with the animation name property.

.title {
    ...
    animation-name: shrink;
}

Using the CSS animation-range Property

Ok, the last piece is to add an animation-range. With this property we can define when we want our animation to begin and when we want it to end. This property is actually a shorthand for the new animation-range-start and animation-range-end values.

Now, this is a little tricky to understand, but weโ€™ll give it a value of entry negative ten percent for the start, and contain forty percent for the end.

.title {
    ...
    animation-range: entry -10% contain 40%;
}

Wait what? You can use this tool to explore what this means.This is a tool created by a developer relations engineer at google. It allows us to easily see how the animation range settings work.

When you scroll in that example, you can see where our animation starts and ends while scrolling within the view.
This tool really helped me understand how these settings work.

Ok, when we go back over to our example, when we scroll down, we can see our animation is applied correctly. Much better.

And, if we scroll slowly, we can see how the animation gets applied. As it enters the view, itโ€™s full width and by the time it reaches about two thirds of the scroll height itโ€™s nearly fifty percent wide, fully opaque, and fully scaled in. And if we stop scrolling anywhere in here the items freeze at their current spot in the animation. I mean, to me, this is mind blowing. Crazy that this is all done with a few lines of CSS.

Adding Scroll Animations to the List Items

Now, this isnโ€™t looking exactly how I want it yet. I want to animate the list items on scroll as well.
For these items, I want to do the opposite of the titles. I want to start them smaller and grow them as they scroll in. So, we start by adding our animation-timeline again. Weโ€™ll use the view function again with a value of block.

li {  
    animation-timeline: view(block);
}

Now we add our new keyframe animation, letโ€™s call it grow this time. Weโ€™ll start with a scale of eighty percent and an opacity of zero. And weโ€™ll animate to a scale of one hundred percent and opacity of one.

@keyframes grow {
    from {
        scale: 0.8;
        opacity: 0;
    }
    to {
        scale: 1;
        opacity: 1;
    }
}

Now we can add it with the animation name property.

li {
    ...
    animation-name: grow;
}

And, weโ€™ll add our range. Weโ€™ll use the same value as our previous animation, to start, entry negative ten percent, and to end, contain forty percent.

li {
    ...
    animation-range: entry -10% contain 40%;
}

Ok so how does it look now?

Nice, I like this effect. It looks a lot smoother than it did before the animation.

Adding Scroll Animations to the Scroll Label

Ok, now the last thing I want to do for this example is, I want to do something with the label that says "Scroll Down to See the List" as I scroll down. I think we should animate it out as we scroll since itโ€™s telling us to scroll and thatโ€™s what weโ€™re doing.

So, you know the deal by now, letโ€™s add the animation timeline with view, block.

.label {
    animation-timeline: view(block);
}

Now we need another keyframe animation, this one weโ€™ll call fadeout.It will start from a scale of one and an opacity of one. And itโ€™ll animate to a vertical translate of negative two hundred and fifty percent, a scale of eighty percent, and an opacity of zero.

@keyframes fadeout {
    from {
        scale: 1;
        opacity: 1;
    }
    to {
        translate: 0 -250%;
        scale: 0.8;
        opacity: 0;
    }
}

Now we need to add it to our label element.

.label {
    ...
    animation-name: fadeout;
}

And then we need to add our range. This time itโ€™ll be a little different, weโ€™ll start with contain at zero percent, and end with contain at one hundred percent.

.label {
    ...
    animation-range: contain 0% contain 100%;
}

Ok, so how does this look now?

Nice, I like that better.

Scroll-Driven Animations Browser Support

Hopefully this gets you going and inspires you for whatโ€™s possible with the stuff that youโ€™re building.

One last note on scroll-driven animations, browser support is not super great at the moment. Chrome and edge are good, but they are only available behind a flag in firefox and not at all in safari.

Hopefully weโ€™ll get there soon, but in the meantime, youโ€™ll need to keep that in mind.

Ok, I think thatโ€™s all for now. Until next time. Thanks for reading.

...



๐Ÿ“Œ How to Create Scroll Animations with React, Tailwind CSS, and Framer Motion


๐Ÿ“ˆ 43.18 Punkte

๐Ÿ“Œ Scroll Improvement - An Epiphany extension to scroll more pixels smoothly


๐Ÿ“ˆ 33.21 Punkte

๐Ÿ“Œ How to Scroll on Mac Easier by Always Showing Scroll Bars


๐Ÿ“ˆ 33.21 Punkte

๐Ÿ“Œ Smart Scroll 4.6.2 - Scroll more smoothly, more quickly, and more comfortably.


๐Ÿ“ˆ 33.21 Punkte

๐Ÿ“Œ JavaScript Scroll Animation Tutorial: Web Animations API


๐Ÿ“ˆ 33.08 Punkte

๐Ÿ“Œ Scroll-Linked Animations with ScrollTimeline and ViewTimeline | HTTP 203


๐Ÿ“ˆ 33.08 Punkte

๐Ÿ“Œ Subtle, yet Beautiful Scroll Animations


๐Ÿ“ˆ 33.08 Punkte

๐Ÿ“Œ How to Add Scroll Animations to a Page with JavaScript's Intersection Observer API


๐Ÿ“ˆ 33.08 Punkte

๐Ÿ“Œ Using the ScrollTimeline API for scroll-linked animations


๐Ÿ“ˆ 33.08 Punkte

๐Ÿ“Œ Control Lazy Load, Infinite Scroll and Animations in React


๐Ÿ“ˆ 33.08 Punkte

๐Ÿ“Œ CSS Grid: Moving From CSS Frameworks To CSS Grid (2018 and beyond)


๐Ÿ“ˆ 30.3 Punkte

๐Ÿ“Œ Stylify CSS: Automagic CSS bundles splitting into CSS layers in Astro.build


๐Ÿ“ˆ 30.3 Punkte

๐Ÿ“Œ New in Chrome 69: CSS Scroll Snapping, Notches, Web Locks and more


๐Ÿ“ˆ 26.7 Punkte

๐Ÿ“Œ New in Chrome 63: Dynamic Module Imports, Async Iterators and Generators, and CSS Over-Scroll!


๐Ÿ“ˆ 26.7 Punkte

๐Ÿ“Œ Creating an Interactive Scroll Page Progress Bar with CSS to Enhance User Engagement


๐Ÿ“ˆ 26.7 Punkte

๐Ÿ“Œ Create a Gradient Text Reveal on Scroll with Tailwind CSS and JS


๐Ÿ“ˆ 26.7 Punkte

๐Ÿ“Œ CSS Scroll Snapping Aligned With Global Page Layout: A Full-Width Slider Case Study


๐Ÿ“ˆ 26.7 Punkte

๐Ÿ“Œ Implementing scroll-aware UI state with CSS


๐Ÿ“ˆ 26.7 Punkte

๐Ÿ“Œ Creating Scroll Progress Bar using CSS and JavaScript in React


๐Ÿ“ˆ 26.7 Punkte

๐Ÿ“Œ http://ncra.gov.sl/old/js/animations/css/hc.txt


๐Ÿ“ˆ 26.57 Punkte

๐Ÿ“Œ DevTools Tips: How to inspect and modify CSS animations


๐Ÿ“ˆ 26.57 Punkte

๐Ÿ“Œ How To Create Advanced Animations With CSS


๐Ÿ“ˆ 26.57 Punkte

๐Ÿ“Œ New in Chrome 117: CSS for smooth entry & exit animations, array group, streamlined local overrides


๐Ÿ“ˆ 26.57 Punkte

๐Ÿ“Œ Creating Interactive Web Animations with CSS and JavaScript


๐Ÿ“ˆ 26.57 Punkte

๐Ÿ“Œ Mastering Advanced CSS: A Guide to Animations and Transitions for Engaging Web Experiences


๐Ÿ“ˆ 26.57 Punkte

๐Ÿ“Œ How to Create Custom CSS Animations with Examples


๐Ÿ“ˆ 26.57 Punkte

๐Ÿ“Œ Creating Animations and Transitions with CSS


๐Ÿ“ˆ 26.57 Punkte

๐Ÿ“Œ CSS Transitions and Animations: Adding Life to Your Web Designs


๐Ÿ“ˆ 26.57 Punkte

๐Ÿ“Œ Creating animations and transitions in frontend development with CSS and JavaScript


๐Ÿ“ˆ 26.57 Punkte

๐Ÿ“Œ Customizing Tailwind CSS Animations: Advancing Your Web Designย Skills


๐Ÿ“ˆ 26.57 Punkte

๐Ÿ“Œ Revealing Imagesย Withย CSS Maskย Animations


๐Ÿ“ˆ 26.57 Punkte

๐Ÿ“Œ How to Effortlessly Migrate from Styled Components CSS-in-JS to Stylify Utility-First CSS for Better React Development.


๐Ÿ“ˆ 26.4 Punkte

๐Ÿ“Œ [Plasma] Animations for Plasma - Look and Feel


๐Ÿ“ˆ 25.02 Punkte

๐Ÿ“Œ Apple TV+ shares first look at โ€˜The New Look,โ€™ starring Glenn Close; coming February 14, 2024


๐Ÿ“ˆ 23.3 Punkte











matomo