Animated Gallery
There are no ACF fields assigned to this component.
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-animated-gallery {
padding-top: clamp(40px, 8vw, 140px);
/* padding-bottom: clamp(40px, 8vw, 140px); */
display: flex;
flex-wrap: nowrap;
flex-direction: row;
gap: 1rem;
min-height: 100vh;
overflow: visible;
.image-wrapper {
position: relative;
aspect-ratio: 4/3;
border-radius: 50px;
width: 100%;
height: calc(100vh / 3);
overflow: hidden;
max-width: calc(100vw - 2rem);
@include bp($md, true) {
border-radius: 30px;
}
img {
border-radius: 50px;
@include bp($md, true) {
border-radius: 30px;
}
}
&:not(.block-animated-gallery__case-study) {
@include bp($lg, true) {
display: none;
}
}
&.block-animated-gallery__case-study {
@include bp($lg, true) {
min-height: rem-calc(740);
border-radius: 0;
max-width: 100%;
img {
border-radius: 0;
}
}
}
}
&__col-center,
&__col-left,
&__col-right {
display: flex;
flex-direction: column;
gap: 1rem;
width: 33%;
}
&__col-left,
&__col-right {
@include bp($lg, true) {
display: none;
}
}
&__col-center {
transform: translateY(10vh);
@include bp($lg, true) {
width: 100%;
transform: translateY(0);
}
}
&__card {
position: absolute;
bottom: 1rem;
left: 1rem;
background: var(--white);
z-index: 1;
padding: 1rem;
border-radius: 40px;
max-width: rem-calc(470);
text-decoration: none;
@include bp($lg) {
opacity: 0;
}
@include bp($lg, true) {
margin-bottom: 4rem;
right: 1rem;
}
.h2 {
font-family: 'Montserrat', sans-serif;
font-size: clamp(rem-calc(20), 2vw, rem-calc(28));
font-weight: 600;
line-height: 1.2;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.btn {
&:hover {
color: var(--secondary);
}
}
.slide-logos {
border: 1px solid rgba(56, 53, 81, 0.3);
background: rgba(243, 243, 245, 1);
border-radius: 40px;
padding: 1.5rem 1rem;
text-align: center;
margin-top: 1rem;
display: flex;
justify-content: center;
align-items: center;
.logo {
max-width: rem-calc(200);
@include bp($lg) {
max-width: rem-calc(300);
}
}
img {
border-radius: 0 !important;
}
}
}
.swiper {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
@include bp($lg) {
display: none;
}
&-container {
height: 100%;
}
&-slide {
&__image-wrapper {
height: 100%;
width: 100%;
position: relative;
}
}
/* gradient overlay */
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, var(--primary) 0%, rgba(255, 255, 255, 0) 20%);
z-index: 1;
}
}
&__grow-height {
@include bp($lg, true) {
.block-animated-gallery__bg img {
display: none;
}
}
}
&__navigation-container{
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
justify-content: flex-end;
z-index: 10;
position: absolute;
bottom: 3.5rem;
left: 50%;
transform: translateX(-50%);
@include bp($sm) {
bottom: 4.5rem;
}
@include bp($md) {
bottom: 5.5rem;
}
@include bp($lg) {
display: none;
}
@include bp($lg, true) {
bottom: 1.5rem;
}
}
&__navigation-btn{
width: 44px;
height: 44px;
border-radius: 100px;
border: solid 1px var(--white);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: .3s ease-in-out;
background-position: center;
background-repeat: no-repeat;
background-size: 24px;
&-prev{
background-image: url("data:image/svg+xml,%3Csvg width='27' height='18' viewBox='0 0 27 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.16895 16.7598L0.768945 8.75977L7.16895 0.759765' stroke='%23fff'/%3E%3Cpath d='M0.768555 8.75977L26.7686 8.75977' stroke='%23fff'/%3E%3C/svg%3E%0A");
}
&-next{
background-image: url("data:image/svg+xml,%3Csvg width='28' height='18' viewBox='0 0 28 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3682 16.7598L26.7682 8.75977L20.3682 0.759765' stroke='%23fff'/%3E%3Cpath d='M26.7686 8.75977L0.768555 8.75977' stroke='%23fff'/%3E%3C/svg%3E%0A");
}
&:hover{
background-color: var(--text-color);
&.block-content-slider__navigation-btn-prev{
background-image: url("data:image/svg+xml,%3Csvg width='27' height='18' viewBox='0 0 27 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.16895 16.7598L0.768945 8.75977L7.16895 0.759765' stroke='%23fff'/%3E%3Cpath d='M0.768555 8.75977L26.7686 8.75977' stroke='%23fff'/%3E%3C/svg%3E%0A") ;
}
&.block-content-slider__navigation-btn-next{
background-image: url("data:image/svg+xml,%3Csvg width='28' height='18' viewBox='0 0 28 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3682 16.7598L26.7682 8.75977L20.3682 0.759765' stroke='%23fff'/%3E%3Cpath d='M26.7686 8.75977L0.768555 8.75977' stroke='%23fff'/%3E%3C/svg%3E%0A") ;
}
}
}
}class AnimatedGallery {
block;
constructor(block) {
this.block = block;
this.init();
}
init() {
gsap.registerPlugin(ScrollTrigger);
const leftCol = this.block.querySelector('.block-animated-gallery__col-left');
const rightCol = this.block.querySelector('.block-animated-gallery__col-right');
const centerCol = this.block.querySelector('.block-animated-gallery__col-center');
const fadeOut = this.block.querySelectorAll('.block-animated-gallery__fade-out');
const growHeight = this.block.querySelector('.block-animated-gallery__grow-height');
const card = this.block.querySelector('.block-animated-gallery__card');
const block = this.block;
ScrollTrigger.matchMedia({
// desktop
"(min-width: 992px)": function() {
gsap.timeline({
scrollTrigger: {
trigger: block,
pin: true,
start: 'top 0',
end: '+=250%',
scrub: 1,
duration: 20,
anticipatePin: true,
}
}).fromTo([leftCol, rightCol], {
width: '33%',
opacity: 1,
height: '100%',
}, {
width: '0%',
opacity: 0,
duration: 1,
}).to(centerCol, {
width: '100%',
duration: 1,
y: '-20%',
}, '<').to([...fadeOut], {
opacity: 0,
duration: 1,
}, '<').fromTo(growHeight, {
minHeight: '0vh',
}, {
minHeight: '100vh',
duration: 1,
}, '<').to(card, {
opacity: 1,
duration: 0.5,
}, '<');
}
})
const nextButton = this.block.querySelector('.block-animated-gallery__navigation-btn-next');
const prevButton = this.block.querySelector('.block-animated-gallery__navigation-btn-prev');
const swiperContainer = this.block.querySelector('.swiper');
this.swiper = new Swiper(swiperContainer, {
slidesPerView: 1,
navigation: {
nextEl: nextButton,
prevEl: prevButton,
},
});
// when the block enters the viewport, we want to refresh scrolltrigger - do this using a observer
const observer = new IntersectionObserver((entries) => {
if(entries[0].isIntersecting) {
ScrollTrigger.refresh();
observer.disconnect();
}
});
observer.observe(block);
}
}
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.block-animated-gallery').forEach((block) => {
new AnimatedGallery(block);
})
});
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "strategiq/animated-gallery",
"title": "Animated Gallery",
"description": "Example block to be used as a template",
"category": "strategiq",
"icon": "strategiq",
"acf": {
"mode": "preview",
"renderTemplate": "block-animated-gallery.php"
},
"supports": {
"anchor": true,
"align": false,
"color": {
"background": false,
"text": false,
"gradients": false
},
"spacing": {
"padding": [
"top",
"bottom"
],
"margin": [
"top",
"bottom"
]
}
},
"example": {
"attributes": {
"mode": "preview",
"data": {
"heading_type": "h2",
"heading_text": "Example - Animated Gallery",
"content": "This is some example content to represent what the content will look like"
}
}
},
"style": ["file:../../assets/css/animated-gallery/block-animated-gallery.css", "swiper"],
"viewScript": ["gsap","scrolltrigger", "swiper", "animated-gallery"]
}
Page Title
Page Type
Page URL
There are is no readme file with this component.