@titelmedia/bricks-gallery - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+# [1.2.0](https://github.com/titel-media/bricks-lerna/compare/v1.1.8...v1.2.0) (2022-09-27)
+
+**Note:** Version bump only for package @titelmedia/bricks-gallery
+
+
+
+
+
 ## [1.1.3](https://github.com/titel-media/bricks-lerna/compare/v1.1.2...v1.1.3) (2022-09-16)
@@ -8,0 +16,0 @@

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.1.3",
+  "version": "1.2.0",
   "description": "> TODO: description",
@@ -33,3 +33,3 @@ "author": "highsnob",
   },
-  "gitHead": "a8a791fe556a8a31ad1eda6c00313389d500640e"
+  "gitHead": "fbc29aeee703c3eed147b39fbd5984c91b108b32"
 }

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

62427

decreased by-8.32%

Lines of code

685

decreased by-11.27%

Published versions last months

1

decreased by-50%

Published versions last week

0

decreased by-100%

No dependency changes