Add new demo

Author: stephane-monnot

docs/index.js

@@ -16,7 +16,7 @@ import '../style.css';
 // Add your documentation imports here. These are available to
 // React specimen. Do NOT pass React here as Catalog does that.
 const documentationImports = {};
-const timelineElements = [
+const timelineElements = params => [
   <VerticalTimelineElement
     onTimelineElementClick={() => {
       // eslint-disable-next-line no-alert
@@ -28,6 +28,7 @@ const timelineElements = [
     date="2011 - present"
     iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
     icon={<WorkIcon />}
+    {...params}
   >
     <h3 className="vertical-timeline-element-title">Creative Director</h3>
     <h4 className="vertical-timeline-element-subtitle">Miami, FL</h4>
@@ -41,6 +42,7 @@ const timelineElements = [
     date="2010 - 2011"
     iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
     icon={<WorkIcon />}
+    {...params}
   >
     <h3 className="vertical-timeline-element-title">Art Director</h3>
     <h4 className="vertical-timeline-element-subtitle">San Francisco, CA</h4>
@@ -53,6 +55,7 @@ const timelineElements = [
     date="2008 - 2010"
     iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
     icon={<WorkIcon />}
+    {...params}
   >
     <h3 className="vertical-timeline-element-title">Web Designer</h3>
     <h4 className="vertical-timeline-element-subtitle">Los Angeles, CA</h4>
@@ -63,6 +66,7 @@ const timelineElements = [
     date="2006 - 2008"
     iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
     icon={<WorkIcon />}
+    {...params}
   >
     <h3 className="vertical-timeline-element-title">Web Designer</h3>
     <h4 className="vertical-timeline-element-subtitle">San Francisco, CA</h4>
@@ -75,6 +79,7 @@ const timelineElements = [
     date="April 2013"
     iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
     icon={<SchoolIcon />}
+    {...params}
   >
     <h3 className="vertical-timeline-element-title">
       Content Marketing for Web, Mobile and Social Media
@@ -87,6 +92,7 @@ const timelineElements = [
     date="November 2012"
     iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
     icon={<SchoolIcon />}
+    {...params}
   >
     <h3 className="vertical-timeline-element-title">
       Agile Development Scrum Master
@@ -99,6 +105,7 @@ const timelineElements = [
     date="2002 - 2006"
     iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
     icon={<SchoolIcon />}
+    {...params}
   >
     <h3 className="vertical-timeline-element-title">
       Bachelor of Science in Interactive Digital Media Visual Imaging
@@ -109,6 +116,7 @@ const timelineElements = [
   <VerticalTimelineElement
     iconStyle={{ background: 'rgb(16, 204, 82)', color: '#fff' }}
     icon={<StarIcon />}
+    {...params}
   />,
 ];
 
@@ -333,13 +341,15 @@ const pages = [
   {
     path: '/demo',
     title: 'Demo',
-    content: () => <VerticalTimeline>{timelineElements}</VerticalTimeline>,
+    content: () => <VerticalTimeline>{timelineElements()}</VerticalTimeline>,
   },
   {
     path: '/demo-single-column-left',
     title: 'Demo single column left',
     content: () => (
-      <VerticalTimeline layout="1-column">{timelineElements}</VerticalTimeline>
+      <VerticalTimeline layout="1-column">
+        {timelineElements()}
+      </VerticalTimeline>
     ),
   },
   {
@@ -368,7 +378,21 @@ const pages = [
     title: 'Demo custom line color',
     content: () => (
       <VerticalTimeline className="vertical-timeline-custom-line">
-        {timelineElements}
+        {timelineElements()}
+      </VerticalTimeline>
+    ),
+  },
+  {
+    path: '/demo-effect',
+    title: 'Demo effect trigger multiple times',
+    content: () => (
+      <VerticalTimeline className="vertical-timeline-custom-line">
+        {timelineElements({
+          intersectionObserverProps: {
+            rootMargin: '0px 0px -40px 0px',
+            triggerOnce: false,
+          },
+        })}
       </VerticalTimeline>
     ),
   },

package.json

@@ -25,12 +25,12 @@
   "module": "dist-es6",
   "jsnext:main": "dist-es6",
   "devDependencies": {
-    "@babel/cli": "^7.12.10",
-    "@babel/core": "^7.12.10",
+    "@babel/cli": "^7.26.4",
+    "@babel/core": "^7.26.0",
     "@babel/eslint-parser": "^7.5.4",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.10.1",
-    "@babel/preset-react": "^7.12.10",
+    "@babel/preset-react": "^7.26.3",
     "@material-ui/core": "^4.10.0",
     "@material-ui/icons": "^4.9.1",
     "babel-jest": "^27.3.1",
@@ -103,8 +103,8 @@
     "test:lint"
   ],
   "dependencies": {
+    "@babel/preset-es2015": "^7.0.0-beta.53",
     "classnames": "^2.2.6",
-    "prop-types": "^15.7.2",
     "react-intersection-observer": "^8.26.2"
   },
   "browserslist": [