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].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);
+ }
}