@titelmedia/bricks-article-aggregator - npm Package Compare versions

Comparing version 1.0.91 to 1.3.2

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [1.3.2](https://github.com/titel-media/bricks-lerna/compare/v1.3.1...v1.3.2) (2022-10-17)
+
+
+### Bug Fixes
+
+* Fixed the article aggregator so it works with the new smooth scroll ([4de516a](https://github.com/titel-media/bricks-lerna/commit/4de516afcac6e1539ec967d7caafdd43c1fbdc29))
+
+
+
+
+
 ## [1.0.91](https://github.com/titel-media/bricks-lerna/compare/v1.0.90...v1.0.91) (2022-06-14)
@@ -8,0 +19,0 @@

dist/index.js

@@ -20,3 +20,3 @@ "use strict";
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -61,8 +61,5 @@ _all.gsap.registerPlugin(_all.ScrollTrigger);
   subtitle,
-  articleAggregatorItems,
-  scrollContainerId,
-  initTimelines
+  articleAggregatorItems
 }) => {
   const [minHeight, setMinHeight] = (0, _react.useState)(null);
-  const tlRef = (0, _react.useRef)(null);
   const containerRef = (0, _react.useRef)(null);
@@ -83,62 +80,22 @@ const wrapperRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
-    if (initTimelines) {
-      var _window;
-
-      window.addEventListener('resize', debounceResize);
-
-      if (((_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth) >= 768) {
-        initTl();
-      }
-
-      return () => {
-        window.removeEventListener('resize', debounceResize);
-
-        if (tlRef.current) {
-          tlRef.current.kill();
-        }
-      };
+    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+      setTimeout(addAnimation, 1500);
     }
-  }, [initTimelines]);
-  const debounceResize = (0, _lodash.debounce)(() => {
-    var _window2;
+  }, []);
 
-    if (((_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.innerWidth) >= 768) {
-      initTl();
-    } else {
-      if (tlRef.current) {
-        tlRef.current.kill();
-      }
-    }
-  }, 200);
-
-  const initTl = () => {
+  const addAnimation = () => {
     var _containerRef$current, _containerRef$current2;
 
-    console.log('init timeline!!!', scrollContainerId);
+    const offset = `-=${(containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth) - window.innerWidth}px`;
 
-    if (tlRef.current) {
-      tlRef.current.clear();
-      containerRef.current && _all.gsap.set(containerRef.current, {
-        x: 0
-      });
-    }
-
-    let scrollTriggerOptions = {
-      trigger: wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current,
-      start: 'top top',
-      end: `+=${containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth}`,
-      scrub: true,
-      pin: true
-    };
-
-    if (scrollContainerId && document.querySelector(`#${scrollContainerId}`)) {
-      scrollTriggerOptions.scroller = document.querySelector(`#${scrollContainerId}`);
-    }
-
-    const offset = `-${(containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetWidth) - window.innerWidth}px`;
-    tlRef.current = _all.gsap.timeline({
-      scrollTrigger: scrollTriggerOptions
-    }).to(containerRef.current, {
+    _all.gsap.to(containerRef.current, {
       x: offset,
-      ease: 'power2.inOut'
+      ease: 'power2.inOut',
+      scrollTrigger: {
+        trigger: wrapperRef.current,
+        start: 'top top',
+        end: `+=${containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetWidth}`,
+        scrub: true,
+        pin: true
+      }
     });
@@ -154,4 +111,5 @@ };
         srcSet: fluid.srcSet,
-        titleImage: fluid.src
-      }), _react.default.createElement(_styles.TitleContainer, null, _react.default.createElement("div", null, _react.default.createElement(_styles.Title, null, "hello ", title), _react.default.createElement(_styles.Subtitle, null, subtitle)), _react.default.createElement(_styles.ScrollExperienceContainer, null, _react.default.createElement("div", null, _react.default.createElement("span", null, "SCROLL TO CONTINUE")), _react.default.createElement("div", null, _react.default.createElement("span", null, "SCROLL TO CONTINUE")))));
+        titleImage: fluid.src,
+        aspectRatio: fluid.aspectRatio
+      }), _react.default.createElement(_styles.TitleContainer, null, _react.default.createElement("div", null, _react.default.createElement(_styles.Title, null, title), _react.default.createElement(_styles.Subtitle, null, subtitle)), _react.default.createElement(_styles.ScrollExperienceContainer, null, _react.default.createElement("div", null, _react.default.createElement("span", null, "SCROLL TO CONTINUE")), _react.default.createElement("div", null, _react.default.createElement("span", null, "SCROLL TO CONTINUE")))));
     }
@@ -158,0 +116,0 @@ };

dist/styles.js

@@ -248,3 +248,2 @@ "use strict";
   display: flex;
-  flex-direction: column;
   & > * {
@@ -266,2 +265,3 @@ width: 100%;
   flex-direction: column;
+  height: 100%;
 
@@ -268,0 +268,0 @@ @media (min-width: 768px) {

lib/index.js

@@ -67,8 +67,4 @@ import React, {
   articleAggregatorItems,
-  scrollContainerId,
-  initTimelines,
 }) => {
   const [minHeight, setMinHeight] = useState(null);
-  //const [headlineMinHeight, setHeadlineMinHeight] = useState(null);
-  const tlRef = useRef(null);
   const containerRef = useRef(null);
@@ -95,60 +91,25 @@ const wrapperRef = useRef(null);
   useEffect(() => {
-    if (initTimelines) {
-      window.addEventListener('resize', debounceResize);
-      if (window?.innerWidth >= 768) {
-        initTl();
-      }
-      return () => {
-        window.removeEventListener('resize', debounceResize);
-        if (tlRef.current) {
-          tlRef.current.kill();
-        }
-      };
+    // Not sure if needed. The start/end was not being
+    //calculated accordingly, so I set a timer
+    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+      setTimeout(addAnimation, 1500);
     }
-  }, [initTimelines]);
+  }, []);
 
-  const debounceResize = debounce(() => {
-    if (window?.innerWidth >= 768) {
-      initTl();
-    } else {
-      if (tlRef.current) {
-        tlRef.current.kill();
-      }
-    }
-  }, 200);
-
-  const initTl = () => {
-    console.log('init timeline!!!', scrollContainerId);
-    if (tlRef.current) {
-      tlRef.current.clear();
-      containerRef.current && gsap.set(containerRef.current, { x: 0 });
-    }
-
-    let scrollTriggerOptions = {
-      trigger: wrapperRef?.current,
-      start: 'top top',
-      end: `+=${containerRef?.current?.offsetWidth}`,
-      scrub: true,
-      pin: true,
-    };
-
-    // if provided, use this one. if not, not
-    if (scrollContainerId && document.querySelector(`#${scrollContainerId}`)) {
-      scrollTriggerOptions.scroller = document.querySelector(
-        `#${scrollContainerId}`
-      );
-    }
-
-    const offset = `-${
+  const addAnimation = () => {
+    const offset = `-=${
       containerRef?.current?.offsetWidth - window.innerWidth
     }px`;
 
-    tlRef.current = gsap
-      .timeline({
-        scrollTrigger: scrollTriggerOptions,
-      })
-      .to(containerRef.current, {
-        x: offset,
-        ease: 'power2.inOut',
-      });
+    gsap.to(containerRef.current, {
+      x: offset,
+      ease: 'power2.inOut',
+      scrollTrigger: {
+        trigger: wrapperRef.current,
+        start: 'top top',
+        end: `+=${containerRef?.current?.offsetWidth}`,
+        scrub: true,
+        pin: true,
+      },
+    });
   };
@@ -165,2 +126,3 @@
               titleImage={fluid.src}
+              aspectRatio={fluid.aspectRatio}
             />
@@ -170,3 +132,3 @@ )}
             <div>
-              <Title>hello {title}</Title>
+              <Title>{title}</Title>
               <Subtitle>{subtitle}</Subtitle>
@@ -173,0 +135,0 @@ </div>

lib/styles.js

@@ -232,3 +232,2 @@ import styled from 'styled-components';
   display: flex;
-  flex-direction: column;
   & > * {
@@ -250,2 +249,3 @@ width: 100%;
   flex-direction: column;
+  height: 100%;
 
@@ -252,0 +252,0 @@ @media (min-width: 768px) {

package.json

 {
   "name": "@titelmedia/bricks-article-aggregator",
-  "version": "1.0.91",
+  "version": "1.3.2",
   "description": "Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth is in ya face when ya hear the British cannons go / BOOM",
@@ -33,3 +33,3 @@ "keywords": [],
   },
-  "gitHead": "0694498c166cd1e7df256ef30df28d295e15e786"
+  "gitHead": "d805c32fa666d54bb5b3782216373a2e4d2c6983"
 }

No alert changes

Worsened metrics

Total package byte prevSize

52215

decreased by-6.93%

Lines of code

893

decreased by-7.08%

No dependency changes