Add diagram and a simple example

Author: majido

scroll-animations-1/Overview.bs

@@ -562,6 +562,51 @@ target is adjacent to the scrollport but not yet visible. The upcoming threshold
 value will allow authors to control the amount of target that needs to be
 visible.
 
+<div class="example">
+Here is a basic example showing how element-based offsets can be used to declare
+an scroll-linked animation that occurs when an element enters the scroller
+scrollport and ends once it exits the scrollport.
+
+<figure>
+<img src="img/example-element-based.svg" width="600"
+alt="Example usage of element-based offset.">
+ <figcaption>
+  Usage of element-based offsets to create enter/exit triggers.<br>
+  The left figure shows the scroller and target being aligned at 'end' edge.<br>
+  The right figure shows them being aligned at 'start' edge.
+ </figcaption>
+</figure>
+
+
+Note that here we are expecting a typical top to bottom scrolling and thus
+consider the entrance to coincide when target's start edge is flushed with
+with scrollport's <strong>end edge</strong> and viceversa for exit.
+
+<pre class='lang-javascript'>
+if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
+  const scrollableElement = document.querySelector('#container');
+  const image = document.querySelector('#image');
+
+  const timeline = new ScrollTimeline({
+    source: scrollableElement,
+    start: {target: image, edge: 'end'},
+    end: {target: image, edge: 'start'},
+  });
+
+  const slideIn = target.animate({
+      transform: ['translateX(0)',q 'translateX(50vw)'],
+      opacity: [0, 1]
+    }, {
+      timeline:timeline,
+      duration: 1000
+    }
+  );
+}
+</pre>
+
+
+</div>
+
 ### The effective time range of a {{ScrollTimeline}} ### {#effective-time-range-algorithm}
 
 The <dfn>effective time range</dfn> of a {{ScrollTimeline}} is calculated as