@titelmedia/bricks-gallery - npm Package Compare versions

Comparing version 1.2.4 to 1.2.5

CHANGELOG.md

@@ -6,4 +6,7 @@ # Change Log
 
-## [1.2.4](https://github.com/titel-media/bricks-lerna/compare/v1.2.3...v1.2.4) (2022-09-28)
+## [1.2.5](https://github.com/titel-media/bricks-lerna/compare/v1.2.4...v1.2.5) (2022-09-29)
 
-**Note:** Version bump only for package @titelmedia/bricks-gallery
+
+### Features
+
+* Update the smooth scroll/horizontal gallery to use gsap ([4ac4840](https://github.com/titel-media/bricks-lerna/commit/4ac4840468d90140b401016c26ff12f45217a54e))

dist/galleries/horizontal/index.js

@@ -21,50 +21,25 @@ "use strict";
 const Horizontal = ({
-  items,
-  initTimelines,
-  scrollContainerId
+  items
 }) => {
-  const tlRef = (0, _react.useRef)(null);
   const containerRef = (0, _react.useRef)(null);
   const wrapperRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
-    return () => {
-      if (tlRef.current) {
-        tlRef.current.kill();
-      }
-    };
+    setTimeout(addAnimation, 1000);
   }, []);
-  (0, _react.useEffect)(() => {
-    if (initTimelines === true || typeof initTimelines === 'undefined') {
-      initTl();
-    }
-  }, [initTimelines]);
 
-  const initTl = () => {
+  const addAnimation = () => {
     var _containerRef$current;
 
-    if (tlRef.current) {
-      tlRef.current.clear();
-      containerRef.current && _all.gsap.set(containerRef.current, {
-        x: 0
-      });
-    }
+    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`;
 
-    let scrollTriggerOptions = {
-      trigger: wrapperRef.current,
-      start: 'top top',
-      end: `+=${containerRef.current.offsetWidth}px`,
-      scrub: true,
-      pin: true
-    };
-
-    if (scrollContainerId && document.querySelector(`#${scrollContainerId}`)) {
-      scrollTriggerOptions.scroller = document.querySelector(`#${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`;
-    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.current.offsetWidth}px`,
+        scrub: true,
+        pin: true
+      }
     });
@@ -71,0 +46,0 @@ };

dist/galleries/smooth-scroll/index.js

@@ -25,26 +25,8 @@ "use strict";
   src,
-  srcSet,
-  scrollContainerId
+  srcSet
 }) => {
   const isEven = index % 2;
-  const tlRef = (0, _react.useRef)(null);
-  const containerRef = (0, _react.useRef)(null);
-  const imageRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    let scrollTriggerOptions = {
-      trigger: containerRef.current,
-      start: 'top bottom',
-      end: 'bottom top',
-      scrub: true
-    };
-
-    if (scrollContainerId && document.querySelector(`#${scrollContainerId}`)) {
-      scrollTriggerOptions.scroller = document.querySelector(`#${scrollContainerId}`);
-    }
-  }, []);
   return _react.default.createElement(_styles.ImageContainer, {
-    ref: containerRef,
     isEven: isEven
   }, _react.default.createElement(_styles.ImageWrapper, null, _react.default.createElement(_styles.Image, {
-    ref: imageRef,
     src: src,
@@ -57,9 +39,7 @@ srcSet: srcSet,
 const SmoothScroll = ({
-  items,
-  scrollContainerId
+  items
 }) => {
   return _react.default.createElement("div", null, items.map((item, index) => _react.default.createElement(GalleryItem, _extends({
     key: `smooth-scroll-item--${index}`,
-    index: index,
-    scrollContainerId: scrollContainerId
+    index: index
   }, item))));
@@ -66,0 +46,0 @@ };

lib/galleries/horizontal/index.js

@@ -6,4 +6,3 @@ import React, { useRef, useEffect } from 'react';
 
-export const Horizontal = ({ items, initTimelines, scrollContainerId }) => {
-  const tlRef = useRef(null);
+export const Horizontal = ({ items }) => {
   const containerRef = useRef(null);
@@ -13,36 +12,8 @@ const wrapperRef = useRef(null);
   useEffect(() => {
-    return () => {
-      if (tlRef.current) {
-        tlRef.current.kill();
-      }
-    };
+    // Not sure if needed. The start/end was not being
+    //calculated accordingly, so I set a timer
+    setTimeout(addAnimation, 1000);
   }, []);
 
-  useEffect(() => {
-    if (initTimelines === true || typeof initTimelines === 'undefined') {
-      initTl();
-    }
-  }, [initTimelines]);
-
-  const initTl = () => {
-    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}px`,
-      scrub: true,
-      pin: true,
-    };
-
-    // if provided, use this one. if not, not
-    if (scrollContainerId && document.querySelector(`#${scrollContainerId}`)) {
-      scrollTriggerOptions.scroller = document.querySelector(
-        `#${scrollContainerId}`
-      );
-    }
-
+  const addAnimation = () => {
     const offset = `-=${
@@ -52,10 +23,13 @@ containerRef?.current?.offsetWidth - window.innerWidth
 
-    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}px`,
+        scrub: true,
+        pin: true,
+      },
+    });
   };
@@ -62,0 +36,0 @@ return (

lib/galleries/smooth-scroll/index.js

@@ -7,34 +7,9 @@ import React, { useRef, useEffect } from 'react';
 
-const GalleryItem = ({ index, src, srcSet, scrollContainerId }) => {
+const GalleryItem = ({ index, src, srcSet }) => {
   const isEven = index % 2;
-  const tlRef = useRef(null);
-  const containerRef = useRef(null);
-  const imageRef = useRef(null);
 
-  useEffect(() => {
-    let scrollTriggerOptions = {
-      trigger: containerRef.current,
-      start: 'top bottom',
-      end: 'bottom top',
-      scrub: true,
-    };
-
-    // if provided, use this one. if not, not
-    if (scrollContainerId && document.querySelector(`#${scrollContainerId}`)) {
-      scrollTriggerOptions.scroller = document.querySelector(
-        `#${scrollContainerId}`
-      );
-    }
-
-    // tlRef.current = gsap.timeline({}).to(imageRef.current, {
-    //   scale: 1.35,
-    //   ease: 'power2.easeInOut',
-    //   scrollTrigger: scrollTriggerOptions,
-    // });
-  }, []);
-
   return (
-    <ImageContainer ref={containerRef} isEven={isEven}>
+    <ImageContainer isEven={isEven}>
       <ImageWrapper>
-        <Image ref={imageRef} src={src} srcSet={srcSet} alt={src} />
+        <Image src={src} srcSet={srcSet} alt={src} />
       </ImageWrapper>
@@ -45,3 +20,3 @@ </ImageContainer>
 
-export const SmoothScroll = ({ items, scrollContainerId }) => {
+export const SmoothScroll = ({ items }) => {
   return (
@@ -53,3 +28,2 @@ <div>
           index={index}
-          scrollContainerId={scrollContainerId}
           {...item}
@@ -56,0 +30,0 @@ />

package.json

 {
   "name": "@titelmedia/bricks-gallery",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "> TODO: description",
@@ -33,3 +33,3 @@ "author": "highsnob",
   },
-  "gitHead": "2d45590aa4dc8d073fd43279e033eb7374d28d2b"
+  "gitHead": "1c462a1b297d7aa84c43c7e5d14932fcbd1603b9"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

44694

decreased by-11.32%

Lines of code

685

decreased by-11.27%

No dependency changes