Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="progress" role="progressbar" aria-label="progress"></div>
  <main>
  <article class="main-page-content" lang="en-US">
    <header><h1>CSS scroll-driven animations</h1></header>
    <div class="section-content"><p>The <strong>CSS scroll-driven animations</strong> module provides functionality that builds on top of the <a href="/en-US/docs/Web/CSS/CSS_animations">CSS animations module</a> and <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>. It allows you to animate property values based on a progression along a scroll-based timeline instead of the default time-based document timeline. This means that you can animate an element by scrolling a scrollable element, rather than just by the passing of time.</p>
<p>There are two types of scroll-based timelines:</p>
    </div>
 <div class="section-content">
<ul>
  <li><em>scroll progress timeline</em>: You progress this timeline by scrolling a scrollable element (<em>scroller</em>) from top to bottom (or left to right) and back again. The position in the scroll range is converted into a percentage of progress — 0% at the start and 100% at the end.</li>
  <li><em>view progress timeline</em>: You progress this timeline based on the change in visibility of an element (known as the <em>subject</em>) inside a scroller. The visibility of the subject inside the scroller is tracked as a percentage of progress — by default, the timeline is at 0% when the subject is first visible at one edge of the scroller, and 100% when it reaches the opposite edge.</li>
</ul>
<p>When one of these two timelines is applied to an animated element, the animation progresses along that timeline instead of following the default time-based timeline.</p>
<p>It is possible to adjust the effective placement of the animation along the scroll progress and view progress timelines, i.e., you can define the position at which the animation starts and ends. This can be done in a couple of different ways:</p>
<ul>
  <li>Start and end animation range values can be applied to the animation to adjust the position of the animation's starting and ending position along the timeline.</li>
  <li>View progress timelines can have a start and/or end inset (or outset) applied to them to adjust the position of the scrollport (see <a href="/en-US/docs/Glossary/Scroll_container">Scroll container</a> for more details) in which the subject element is deemed to be visible. Put another way, this allows you to specify start and/or end inset (or outset) values that offset the position of the timeline itself.</li>
</ul></div>
    <section aria-labelledby="scroll-driven_animations_in_action"><h2 id="scroll-driven_animations_in_action"><a href="#scroll-driven_animations_in_action">Scroll-driven animations in action</a></h2><div class="section-content"><p>You can find several tools and demos showing scroll-driven animations in action at <a href="https://scroll-driven-animations.style/" class="external" target="_blank">Scroll-driven Animations tools and demos</a>.</p></div></section>
    <section aria-labelledby="reference"><h2 id="reference"><a href="#reference">Reference</a></h2><div class="section-content"></div></section>
    <section aria-labelledby="properties"><h3 id="properties"><a href="#properties">Properties</a></h3><div class="section-content"><p>Set the timeline that will control the progress of an animation, and set its attachment range along that timeline:</p>
<ul>
  <li><a href="/en-US/docs/Web/CSS/animation-timeline"><code>animation-timeline</code></a></li>
  <li><a href="/en-US/docs/Web/CSS/animation-range"><code>animation-range</code></a></li>
  <li><a href="/en-US/docs/Web/CSS/animation-range-start"><code>animation-range-start</code></a></li>
  <li><a href="/en-US/docs/Web/CSS/animation-range-end"><code>animation-range-end</code></a></li>
</ul>
<p>Define <em>named scroll progress timelines</em>:</p>
<ul>
  <li><a href="/en-US/docs/Web/CSS/scroll-timeline"><code>scroll-timeline</code></a></li>
  <li><a href="/en-US/docs/Web/CSS/scroll-timeline-axis"><code>scroll-timeline-axis</code></a></li>
  <li><a href="/en-US/docs/Web/CSS/scroll-timeline-name"><code>scroll-timeline-name</code></a></li>
</ul>
<p>Define <em>named view progress timelines</em>:</p>
<ul>
  <li><a href="/en-US/docs/Web/CSS/view-timeline"><code>view-timeline</code></a></li>
  <li><a href="/en-US/docs/Web/CSS/view-timeline-axis"><code>view-timeline-axis</code></a></li>
  <li><a href="/en-US/docs/Web/CSS/view-timeline-inset"><code>view-timeline-inset</code></a></li>
  <li><a href="/en-US/docs/Web/CSS/view-timeline-name"><code>view-timeline-name</code></a></li>
</ul>
<p>Modify timeline scope:</p>
<ul>
  <li><a href="/en-US/docs/Web/CSS/timeline-scope"><code>timeline-scope</code></a></li>
</ul></div></section>
    <section aria-labelledby="at-rules"><h3 id="at-rules"><a href="#at-rules">At-rules</a></h3><div class="section-content"><p>CSS scroll-driven animations adds the ability to include <code>&lt;timeline-range-name&gt;</code>s in <a href="/en-US/docs/Web/CSS/@keyframes"><code>@keyframes</code></a> blocks, to place keyframes at specific positions inside named timeline ranges.</p></div></section>
    <section aria-labelledby="functions"><h3 id="functions"><a href="#functions">Functions</a></h3><div class="section-content"><p>Possible values of the <a href="/en-US/docs/Web/CSS/animation-timeline"><code>animation-timeline</code></a> property for defining <em>anonymous scroll progress timelines</em> and <em>anonymous view progress timelines</em> (i.e. implicitly defined by the browser rather than being explicitly named and defined using the <code>scroll-timeline-*</code> and <code>view-timeline-*</code> properties):</p><ul>
  <li><a href="/en-US/docs/Web/CSS/animation-timeline/scroll"><code>scroll()</code></a></li>
  <li><a href="/en-US/docs/Web/CSS/animation-timeline/view"><code>view()</code></a></li>
</ul></div></section>
    <section aria-labelledby="javascript_features"><h3 id="javascript_features"><a href="#javascript_features">JavaScript features</a></h3><div class="section-content"><ul>
  <li><a href="/en-US/docs/Web/API/Element/animate"><code>Element.animate()</code></a></li>
  <li><a href="/en-US/docs/Web/API/AnimationTimeline"><code>AnimationTimeline</code></a></li>
  <li><a href="/en-US/docs/Web/API/ScrollTimeline"><code>ScrollTimeline</code></a></li>
  <li><a href="/en-US/docs/Web/API/ViewTimeline"><code>ViewTimeline</code></a></li>
</ul></div>
</section>
    <h2 id="specifications"><a href="#specifications">Specifications</a></h2>
    <table class="standard-table"><thead><tr><th scope="col">Specification</th></tr></thead><tbody><tr><td><a href="https://drafts.csswg.org/scroll-animations-1/">Scroll-driven Animations <br></a></td></tr><tr><td><a href="https://drafts.csswg.org/css-animations-2/">CSS Animations Level 2<!-- --> <br></a></td></tr><tr><td><a href="https://drafts.csswg.org/web-animations-2/">Web Animations Level 2 <br></a></td></tr></tbody></table>
    <section aria-labelledby="see_also"><h2 id="see_also"><a href="#see_also">See also</a></h2><div class="section-content"><ul>
  <li><a href="https://developer.chrome.com/docs/css-ui/scroll-driven-animations" class="external" target="_blank">Animate elements on scroll with Scroll-driven animations</a> on developer.chrome.com</li>
  <li><a href="/en-US/docs/Web/CSS/CSS_animations">CSS animations</a></li>
  <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
</ul></div>
</section>
</article>
</main>

<!-- Sección de Artículos Relacionados -->
<footer>
  <section class="related-articles">
    <h3>Related Articles</h3>
    <ul>
      <li>
        <img width="220" src="https://marianabeldi.github.io/scroll-driven-sardinas/img/lisboa1.svg" alt="caja de sardinas">
        <a href="#">How to improve your CSS with Flexbox</a>
      </li>
      <li>
       <img width="220" src="https://marianabeldi.github.io/scroll-driven-sardinas/img/lisboa2.svg" alt="caja de sardinas">
        <a href="#">Complete Guide on Scroll-driven animations</a>
      </li>
      <li>
       <img width="220" src="https://marianabeldi.github.io/scroll-driven-sardinas/img/lisboa3.svg" alt="caja de sardinas">
        <a href="#">Responsive design with Grid Grid Layout</a>
      </li>
    </ul>
  </section>
  <hr>
  <div class="footer-info">
    <p>&copy; 2024 Your website. All rights reserved.</p>
    <p>
      <a href="#">Privacy</a> |
      <a href="#">Terms and Conditions</a>
    </p>
  </div>
</footer>

              
            
!

CSS

              
                *, *::before, *::after { box-sizing: border-box; }
body { 
  background-color: #d5edeb;
  color: #1c140c;
  font-family: arial, sans-serif;
  line-height: 1.5;
  margin: 0; 
}
a { color: #1c140c; }
a:hover { color: #55a586; }
main {
  margin: 2rem auto;
  max-width: 70ch;
}
footer {
  background-color: #55a586;
  padding: 30px;
  text-align: center;
  font-family: Arial, sans-serif;
  min-height: 500px;
}
.related-articles h3 {
  font-size: 1.5em;
  margin-bottom: 30px;
}
.related-articles ul {
  display: flex;
  gap: 2rem;
  justify-content: center;
  list-style: none;
  padding: 0;
}
.related-articles ul li {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 10px;
}
.related-articles ul li a {
  font-size: 1rem;
  max-width: 220px;
}
hr {
  border: none;
  border-top: 1px solid #ACBFBD;
  margin-bottom: 15px;
  opacity: 0.4;
}
footer a:hover { color: black; text-decoration: none; }
.footer-info {
  font-size: 0.9em;
}
.footer-info p {
  margin: 5px 0;
}
.footer-info a {
  margin: 0 10px;
}

/* animation */
#progress {
  background-color: #55a586;
  height: 20px;
  position: fixed;
  top: 0;
  left: 0;
  transform-origin: left center;
  width: 100%;
  z-index:9;
  
  animation: progressBar linear;
  animation-timeline: scroll(root block);
  animation-range: 0% calc(100% - 500px);
}

@keyframes progressBar {
  from { transform: scaleX(0); }
}
              
            
!

JS

              
                
              
            
!
999px

Console