| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#named-timeline-range"> |
| <link rel="stylesheet" href="support/animation-range.css"> |
| <style> |
| .meter { |
| animation: active-interval linear 100s paused; |
| animation-timeline: auto; |
| } |
| |
| .bar { |
| animation: slide-in linear 100s paused; |
| animation-timeline: auto; |
| } |
| </style> |
| </head> |
| <body> |
| <h3>View timeline</h3> |
| <template id="meters"> |
| <div class="meters"> |
| <div class="cover"><div class="meter"><div class="bar"></div></div><div>Cover</div></div> |
| <div class="contain"><div class="meter"><div class="bar"></div></div><div>Contain</div></div> |
| <div class="entry"><div class="meter"><div class="bar"></div></div><div>Entry</div></div> |
| <div class="exit"><div class="meter"><div class="bar"></div></div><div>Exit</div></div> |
| </div> |
| </template> |
| <div class="flex"> |
| <div> |
| <div class="scroller"> |
| <div class="subject" style="margin-top: 90px;" data-progress=".08333,-1,.5,-1"></div> |
| <div class="spacer"></div> |
| </div> |
| </div> |
| <div> |
| <div class="scroller"> |
| <div class="subject" style="margin-top: 70px;" data-progress=".25,.125,2,-1"></div> |
| <div class="spacer"></div> |
| </div> |
| </div> |
| <div> |
| <div class="scroller"> |
| <div class="subject" style="margin-top: 10px;" data-progress=".75,.875,2,-1"></div> |
| <div class="spacer"></div> |
| </div> |
| </div> |
| <div> |
| <div class="scroller"> |
| <div class="subject" style="margin-top: -10px;" data-progress=".91667,2,2,.5"></div> |
| <div class="spacer"></div> |
| </div> |
| </div> |
| </div> |
| </body> |
| <script> |
| let template = document.querySelector('#meters'); |
| let subjects = document.querySelectorAll('.subject'); |
| for (let i = 0; i < subjects.length; i++) { |
| let clone = template.content.cloneNode(true); |
| let meters = clone.querySelectorAll('.meter'); |
| let progress = subjects[i].getAttribute('data-progress').split(',').map(s => parseFloat(s)); |
| for (let meter of meters) { |
| let bar = meter.querySelector('.bar'); |
| let startTime = -progress.splice(0, 1)[0] * 100; |
| meter.style.animationDelay = `${startTime}s`; |
| bar.style.animationDelay = `${startTime}s`; |
| } |
| subjects[i].appendChild(clone); |
| } |
| </script> |
| </html> |
