@titelmedia/bricks-images - npm Package Compare versions

Comparing version 1.11.19 to 1.11.21

CHANGELOG.md

@@ -6,2 +6,9 @@ # Change Log
 
+## [1.11.21](https://github.com/titel-media/bricks-lerna/compare/v1.11.20...v1.11.21) (2023-05-24)
+
+### Features
+
+- added setStartRotation as we will be using this for ballantines ([20d32a2](https://github.com/titel-media/bricks-lerna/commit/20d32a24ce87822bcbfe5ab8f4ab755a7789f8fe))
+- added svgPosition & temporary motionBackgroundImg, absoluteImage ([a6ab894](https://github.com/titel-media/bricks-lerna/commit/a6ab8942b8c242c3eb982dd3752c828e2bd49beb))
+
 ## [1.11.19](https://github.com/titel-media/bricks-lerna/compare/v1.11.18...v1.11.19) (2023-05-16)
@@ -8,0 +15,0 @@

dist/index.js

@@ -27,4 +27,8 @@ "use strict";
     imageAlignment,
+    motionBackgroundImg,
+    absoluteImage,
+    svgPosition,
     credits,
     enableRotation,
+    setStartRotation,
     rotationDirection,
@@ -36,10 +40,14 @@ rotateNumber,
   const mobile = (imageMobile === null || imageMobile === void 0 ? void 0 : imageMobile.fluid) || (imageMobile === null || imageMobile === void 0 ? void 0 : imageMobile.responsiveImage) || imageMobile || image;
+  const motionBg = (motionBackgroundImg === null || motionBackgroundImg === void 0 ? void 0 : motionBackgroundImg.fluid) || (motionBackgroundImg === null || motionBackgroundImg === void 0 ? void 0 : motionBackgroundImg.responsiveImage) || motionBackgroundImg || null;
+  const absoluteImg = (absoluteImage === null || absoluteImage === void 0 ? void 0 : absoluteImage.fluid) || (absoluteImage === null || absoluteImage === void 0 ? void 0 : absoluteImage.responsiveImage) || absoluteImage || null;
   (0, _react.useEffect)(() => {
     if (enableRotation) {
-      _bricksUtils.gsap.set(imageRef.current, {
-        rotation: () => rotationDirection === 'left' ? `-${rotateNumber}` : `${rotateNumber}`
-      });
+      if (setStartRotation) {
+        _bricksUtils.gsap.set(imageRef.current, {
+          rotation: () => rotationDirection === 'left' ? `-${rotateNumber}` : `${rotateNumber}`
+        });
+      }
       _bricksUtils.gsap.effects.rotation(imageRef.current, {
         rotation: () => rotationDirection === 'left' ? `${rotateNumber}` : `-${rotateNumber}`,
-        trigger: imageRef.current,
+        trigger: wrapper.current,
         start: '10% bottom',
@@ -53,5 +61,4 @@ end: `+=${wrapper.current.offsetWidth + 200}`,
       media.add(`(min-width: ${_breakpoints.BREAKPOINTS.sm}px)`, () => {
-        let number = parallaxNumber ? parallaxNumber : 5;
         _bricksUtils.gsap.effects.parallax(imageRef.current, {
-          yPercent: number,
+          yPercent: parallaxNumber || 5,
           trigger: imageRef.current
@@ -82,2 +89,6 @@ });
     link: link
+  }, _react.default.createElement(_styles.ImageContainer, {
+    svgPosition: svgPosition || 'center',
+    motionBg: motionBg !== null,
+    backgroundImg: motionBg ? motionBg.src : ''
   }, _react.default.createElement(_styles.Image, {
@@ -87,2 +98,6 @@ src: image.src,
     className: "desktop"
+  }), absoluteImage && _react.default.createElement(_styles.Image, {
+    className: "overlay",
+    src: absoluteImg.src,
+    alt: absoluteImg.alt
   }), _react.default.createElement(_styles.Image, {
@@ -93,4 +108,4 @@ src: mobile.src,
   }), svg && _react.default.createElement(_styles.Svg, {
-    src: svg.src
-  })), (credits === null || credits === void 0 ? void 0 : credits.length) === 1 && _react.default.createElement(_styles.ContainerCredits, {
+    src: svg.src || svg
+  }))), (credits === null || credits === void 0 ? void 0 : credits.length) === 1 && _react.default.createElement(_styles.ContainerCredits, {
     align: credits[0].alignment,
@@ -116,3 +131,3 @@ padding: credits[0].padding
       _bricksUtils.gsap.effects.fade(containerRef.current, {
-        duration: setAnimationDuration ? setAnimationDuration : 0.75,
+        duration: setAnimationDuration || 0.75,
         trigger: wrapperRef.current
@@ -119,0 +134,0 @@ });

dist/styles.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.Svg = exports.ImageWrapper = exports.Image = exports.Credits = exports.Content = exports.ContainerCredits = exports.Container = void 0;
+exports.Svg = exports.ImageWrapper = exports.ImageContainer = exports.Image = exports.Credits = exports.Content = exports.ContainerCredits = exports.Container = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
@@ -56,2 +56,20 @@ var _breakpoints = require("@titelmedia/bricks-theme/lib/variables/breakpoints");
 };
+const overlayVertical = position => {
+  switch (position) {
+    case 'top':
+      return (0, _styledComponents.css)`
+      align-items: flex-start;
+      `;
+    case 'center':
+      return (0, _styledComponents.css)`
+      align-items: center;
+      `;
+    case 'bottom':
+      return (0, _styledComponents.css)`
+        align-items: flex-end;
+      `;
+    default:
+      return;
+  }
+};
 const setLayout = type => {
@@ -95,2 +113,13 @@ switch (type) {
 };
+const backgroundAnimation = (0, _styledComponents.keyframes)`
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+`;
 const Container = _styledComponents.default.div`
@@ -106,2 +135,3 @@ ${props => (0, _layout.setContainer)({
   position: relative;
+  will-change: transform;
   @media (max-width: ${_breakpoints.BREAKPOINTS.sm}px) {
@@ -134,2 +164,36 @@ margin-bottom: 16px;
 exports.ImageWrapper = ImageWrapper;
+const ImageContainer = _styledComponents.default.div`
+  position: relative;
+  display: flex;
+  ${props => overlayVertical(props.svgPosition)};
+  ${props => props.motionBg && (0, _styledComponents.css)`
+      background: linear-gradient(-45deg, rgba(255,0,0,0), rgba(144,176,109,0.6)),
+      url('${props => props.backgroundImg}');
+      background-size: 150% 150%;
+      transition: background 1s linear;
+      animation: ${backgroundAnimation} 0.8s alternate infinite;
+      @media (max-width: ${_breakpoints.BREAKPOINTS.sm}px) {
+        animation: none;
+        background: none;
+      }
+    &:hover {
+        animation-play-state: paused;
+        background: none;
+    }
+    .desktop {
+      position: relative;
+      z-index:-1;
+      display: block;
+    }
+    .overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      @media (max-width: ${_breakpoints.BREAKPOINTS.sm}px) {
+        display: none;
+      }
+    }
+  `};
+`;
+exports.ImageContainer = ImageContainer;
 const Content = _styledComponents.default.div`
@@ -158,5 +222,2 @@ ${props => setLayout(props.type)};
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   max-width: 100%;
@@ -163,0 +224,0 @@ `;

lib/index.js

@@ -8,2 +8,3 @@ import React, { useEffect, useRef, forwardRef } from 'react';
   Image,
+  ImageContainer,
   ImageWrapper,
@@ -27,4 +28,8 @@ Svg,
     imageAlignment,
+    motionBackgroundImg,
+    absoluteImage,
+    svgPosition,
     credits,
     enableRotation,
+    setStartRotation,
     rotationDirection,
@@ -36,12 +41,17 @@ rotateNumber,
   const mobile = imageMobile?.fluid || imageMobile?.responsiveImage || imageMobile || image;
+  const motionBg = motionBackgroundImg?.fluid || motionBackgroundImg?.responsiveImage || motionBackgroundImg || null;
+  const absoluteImg = absoluteImage?.fluid || absoluteImage?.responsiveImage || absoluteImage || null;
+
   useEffect(() => {
     if (enableRotation) {
-      gsap.set(imageRef.current, {
-        rotation: () =>
-          rotationDirection === 'left' ? `-${rotateNumber}` : `${rotateNumber}`,
-      });
+      if(setStartRotation) {
+        gsap.set(imageRef.current, {
+          rotation: () =>
+            rotationDirection === 'left' ? `-${rotateNumber}` : `${rotateNumber}`,
+        });
+      }
       gsap.effects.rotation(imageRef.current, {
         rotation: () =>
           rotationDirection === 'left' ? `${rotateNumber}` : `-${rotateNumber}`,
-        trigger: imageRef.current,
+        trigger: wrapper.current,
         start: '10% bottom',
@@ -55,5 +65,4 @@ end: `+=${wrapper.current.offsetWidth + 200}`,
       media.add(`(min-width: ${BREAKPOINTS.sm}px)`, () => {
-        let number = parallaxNumber ? parallaxNumber : 5;
         gsap.effects.parallax(imageRef.current, {
-          yPercent: number,
+          yPercent: parallaxNumber || 5,
           trigger: imageRef.current,
@@ -82,5 +91,12 @@ });
       <Link link={link}>
-        <Image src={image.src} alt={image.alt} className="desktop" />
-        <Image src={mobile.src} alt={mobile.alt} className="mobile" />
-        {svg && <Svg src={svg.src} />}
+        <ImageContainer svgPosition={svgPosition || 'center'} motionBg={motionBg !== null} backgroundImg={motionBg ? motionBg.src : ''}>
+          <Image src={image.src} alt={image.alt} className="desktop" />
+          {absoluteImage && (
+            <Image className="overlay" src={absoluteImg.src} alt={absoluteImg.alt} />
+          )}
+          <Image src={mobile.src} alt={mobile.alt} className="mobile" />
+          {svg && (
+            <Svg src={svg.src || svg} />
+          )}
+        </ImageContainer>
       </Link>
@@ -118,3 +134,3 @@ {credits?.length === 1 && (
       gsap.effects.fade(containerRef.current, {
-        duration: setAnimationDuration ? setAnimationDuration : 0.75,
+        duration: setAnimationDuration || 0.75,
         trigger: wrapperRef.current,
@@ -121,0 +137,0 @@ });

lib/styles.js

@@ -1,2 +0,2 @@
-import styled, { css } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
 import { BREAKPOINTS } from '@titelmedia/bricks-theme/lib/variables/breakpoints';
@@ -51,2 +51,21 @@ import { setContainer } from '@titelmedia/bricks-theme/lib/utilities/layout';
 
+const overlayVertical = position => {
+  switch (position) {
+    case 'top':
+      return css`
+      align-items: flex-start;
+      `;
+    case 'center':
+      return css`
+      align-items: center;
+      `;
+    case 'bottom':
+      return css`
+        align-items: flex-end;
+      `;
+    default:
+      return;
+  }
+};
+
 const setLayout = type => {
@@ -89,2 +108,14 @@ switch (type) {
 
+const backgroundAnimation = keyframes`
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+`;
+
 export const Container = styled.div`
@@ -101,2 +132,3 @@ ${props =>
   position: relative;
+  will-change: transform;
   @media (max-width: ${BREAKPOINTS.sm}px) {
@@ -132,2 +164,38 @@ margin-bottom: 16px;
 
+export const ImageContainer = styled.div`
+  position: relative;
+  display: flex;
+  ${props => overlayVertical(props.svgPosition)};
+  ${props =>
+    props.motionBg &&
+    css`
+      background: linear-gradient(-45deg, rgba(255,0,0,0), rgba(144,176,109,0.6)),
+      url('${props => props.backgroundImg}');
+      background-size: 150% 150%;
+      transition: background 1s linear;
+      animation: ${backgroundAnimation} 0.8s alternate infinite;
+      @media (max-width: ${BREAKPOINTS.sm}px) {
+        animation: none;
+        background: none;
+      }
+    &:hover {
+        animation-play-state: paused;
+        background: none;
+    }
+    .desktop {
+      position: relative;
+      z-index:-1;
+      display: block;
+    }
+    .overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      @media (max-width: ${BREAKPOINTS.sm}px) {
+        display: none;
+      }
+    }
+  `};
+`;
+
 export const Content = styled.div`
@@ -156,5 +224,2 @@ ${props => setLayout(props.type)};
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   max-width: 100%;
@@ -161,0 +226,0 @@ `;

package.json

 {
   "name": "@titelmedia/bricks-images",
-  "version": "1.11.19",
+  "version": "1.11.21",
   "description": "> TODO: description",
@@ -23,3 +23,3 @@ "author": "Katerina Vaseva <[e-mail]>",
   "dependencies": {
-    "@titelmedia/bricks-theme": "^1.11.19",
+    "@titelmedia/bricks-theme": "^1.11.21",
     "@titelmedia/bricks-utils": "^1.11.19"
@@ -32,3 +32,3 @@ },
   },
-  "gitHead": "da668fbb001a6de2672a17e74c59a05e1e0896e3"
+  "gitHead": "51990c87de391f2f5b0eba69de60ec2a304ad4e0"
 }

No alert changes

Improved metrics

Total package byte prevSize

66809

increased by14.96%

Lines of code

764

increased by25.04%

Dependency changes

• Updated@titelmedia/bricks-theme@^1.11.21