diff --git a/src/components/Organisms/WYMDCarousel/WYMDCarousel.js b/src/components/Organisms/WYMDCarousel/WYMDCarousel.js index b455966ff..2e3ec6c6f 100644 --- a/src/components/Organisms/WYMDCarousel/WYMDCarousel.js +++ b/src/components/Organisms/WYMDCarousel/WYMDCarousel.js @@ -108,17 +108,20 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => { {theseItems[key].copy} - - - {theseItems[key].amount} - - - - - - {theseItems[key].copy} - - +
+ + + {theseItems[key].amount} + + + + + + {theseItems[key].copy} + + +
+ ); })} diff --git a/src/components/Organisms/WYMDCarousel/WYMDCarousel.style.js b/src/components/Organisms/WYMDCarousel/WYMDCarousel.style.js index d5ffb569f..9aa266e6f 100644 --- a/src/components/Organisms/WYMDCarousel/WYMDCarousel.style.js +++ b/src/components/Organisms/WYMDCarousel/WYMDCarousel.style.js @@ -3,7 +3,11 @@ import spacing from '../../../theme/shared/spacing'; import Text from '../../Atoms/Text/Text'; // Duration in seconds -const animationSpeed = 0.5; +const animationSpeed = 0.75; + +// Use to calc positions when scaling copy +const textScaleOffsetA = 50; +const textScaleOffsetB = 5; const ImageWrapper = styled.div` width: 33%; @@ -101,7 +105,6 @@ const Including = styled(Text)` // Unfortunately having to target plugin-created markup ye olde fashioned way: const CarouselWrapper = styled.div` height: 100%; - padding: ${spacing('m')}; background-color: ${({ theme }) => theme.color('white')}; .carousel { @@ -205,6 +208,7 @@ const CarouselWrapper = styled.div` // All slides: .carousel__inner-slide { + // All 'ImageWrappers': > div:first-child { transition: transform ${animationSpeed}s ease; @@ -219,6 +223,14 @@ const CarouselWrapper = styled.div` width: 300%; } } + + // Scale down ALL copy + .all-text-wrapper { + transition: transform ${animationSpeed}s ease; + // HERE + transform-origin: top; + transform: translateY(calc(-${textScaleOffsetA}px + ${textScaleOffsetB}%)) scale(0.5) + } } // Our 'first' slide of the three: @@ -247,6 +259,10 @@ const CarouselWrapper = styled.div` } } + .all-text-wrapper { + transform: translateY(0) scale(1); + } + // Resets the 3rd slide: + .carousel__slide--visible { > div > div:first-child { @@ -257,6 +273,10 @@ const CarouselWrapper = styled.div` width: 250%; } } + .all-text-wrapper { + // HERE + transform: translateY(calc(-${textScaleOffsetA}px + ${textScaleOffsetB}%)) scale(0.5) + } } } } diff --git a/src/components/Organisms/WYMDCarousel/WYMDCarousel.test.js b/src/components/Organisms/WYMDCarousel/WYMDCarousel.test.js index 634b05185..d18538ef3 100644 --- a/src/components/Organisms/WYMDCarousel/WYMDCarousel.test.js +++ b/src/components/Organisms/WYMDCarousel/WYMDCarousel.test.js @@ -69,7 +69,6 @@ it("renders correctly", () => { .c0 { height: 100%; - padding: 1.5rem; background-color: #FFFFFF; } @@ -142,14 +141,14 @@ it("renders correctly", () => { } .c0 .carousel .wymd-carousel { - -webkit-transition: -webkit-transform 0.5s; - -webkit-transition: -webkit-transform 0.5s; - transition: -webkit-transform 0.5s; - -o-transition: transform 0.5s; - -webkit-transition: -webkit-transform 0.5s; - -webkit-transition: transform 0.5s; - transition: transform 0.5s; - -webkit-transform: 0.5s; + -webkit-transition: -webkit-transform 0.75s; + -webkit-transition: -webkit-transform 0.75s; + transition: -webkit-transform 0.75s; + -o-transition: transform 0.75s; + -webkit-transition: -webkit-transform 0.75s; + -webkit-transition: transform 0.75s; + transition: transform 0.75s; + -webkit-transform: 0.75s; will-change: transform; } @@ -232,18 +231,18 @@ it("renders correctly", () => { } .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child { - -webkit-transition: -webkit-transform 0.5s ease; - -webkit-transition: transform 0.5s ease; - transition: transform 0.5s ease; + -webkit-transition: -webkit-transform 0.75s ease; + -webkit-transition: transform 0.75s ease; + transition: transform 0.75s ease; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); } .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child:after { - -webkit-transition: -webkit-transform 0.5s ease,width 0.5s ease,right 0.5s ease; - -webkit-transition: transform 0.5s ease,width 0.5s ease,right 0.5s ease; - transition: transform 0.5s ease,width 0.5s ease,right 0.5s ease; + -webkit-transition: -webkit-transform 0.75s ease,width 0.75s ease,right 0.75s ease; + -webkit-transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease; + transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease; right: calc(-300% - 6px); -webkit-transform: scale(1); -ms-transform: scale(1); @@ -251,6 +250,18 @@ it("renders correctly", () => { width: 300%; } + .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide .all-text-wrapper { + -webkit-transition: -webkit-transform 0.75s ease; + -webkit-transition: transform 0.75s ease; + transition: transform 0.75s ease; + -webkit-transform-origin: top; + -ms-transform-origin: top; + transform-origin: top; + -webkit-transform: translateY(calc(-50px + 5%)) scale(0.5); + -ms-transform: translateY(calc(-50px + 5%)) scale(0.5); + transform: translateY(calc(-50px + 5%)) scale(0.5); + } + .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after { right: calc(-250% - 6px); -webkit-transform: scale(1); @@ -273,6 +284,12 @@ it("renders correctly", () => { width: 250%; } + .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .all-text-wrapper { + -webkit-transform: translateY(0) scale(1); + -ms-transform: translateY(0) scale(1); + transform: translateY(0) scale(1); + } + .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child { -webkit-transform: scale(0.5); -ms-transform: scale(0.5); @@ -286,6 +303,12 @@ it("renders correctly", () => { transform: scale(1); width: 250%; } + + .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .all-text-wrapper { + -webkit-transform: translateY(calc(-50px + 5%)) scale(0.5); + -ms-transform: translateY(calc(-50px + 5%)) scale(0.5); + transform: translateY(calc(-50px + 5%)) scale(0.5); + } }