{
const endHeight = gsap.getProperty('.projects_inner', 'height');
const flip = Flip.from(state, {
duration: 0.6,
ease: 'power3.inOut',
stagger: 0.08,
absolute: true,
onEnter: (elements) =>
gsap.fromTo(
elements,
{ opacity: 0, scale: 0 },
{ opacity: 1, scale: 1, duration: 0.6 }
),
onLeave: (elements) =>
gsap.fromTo(
elements,
{ opacity: 1, scale: 1 },
{ opacity: 0, scale: 0, duration: 0.6 }
),
});
flip.fromTo(
'.projects_inner',
{
height: startHeight,
},
{
height: endHeight,
clearProps: 'height',
duration: flip.duration(),
},
0
);
},1)
selected = 'all';"
:class="{ 'bg-theme-primary text-theme-white' : selected == 'all' , ' text-theme-black' : selected !== 'all' }"
class="lg:flex-grow transition-all duration-150 flex items-center justify-center h-12 px-2 hover:bg-theme-primary hover:text-theme-white transition duration-100 cursor-pointer option" >Alle anzeigen
{
const endHeight = gsap.getProperty('.projects_inner', 'height');
const flip = Flip.from(state, {
duration: 0.6,
ease: 'power3.inOut',
stagger: 0.08,
absolute: true,
onEnter: (elements) =>
gsap.fromTo(
elements,
{ opacity: 0, scale: 0 },
{ opacity: 1, scale: 1, duration: 0.6 }
),
onLeave: (elements) =>
gsap.fromTo(
elements,
{ opacity: 1, scale: 1 },
{ opacity: 0, scale: 0, duration: 0.6 }
),
});
flip.fromTo(
'.projects_inner',
{
height: startHeight,
},
{
height: endHeight,
clearProps: 'height',
duration: flip.duration(),
},
0
);
},1)
selected = 'blockheizkraftwerke';"
:class="{ 'bg-theme-primary text-theme-white' : selected == 'blockheizkraftwerke' , 'bg-theme-white text-theme-black' : selected !== 'blockheizkraftwerke' }"
class="lg:flex-grow transition-all duration-150 flex items-center justify-center h-12 px-4 hover:bg-theme-primary hover:text-theme-white transition duration-100 cursor-pointer option" >Blockheizkraftwerke{
const endHeight = gsap.getProperty('.projects_inner', 'height');
const flip = Flip.from(state, {
duration: 0.6,
ease: 'power3.inOut',
stagger: 0.08,
absolute: true,
onEnter: (elements) =>
gsap.fromTo(
elements,
{ opacity: 0, scale: 0 },
{ opacity: 1, scale: 1, duration: 0.6 }
),
onLeave: (elements) =>
gsap.fromTo(
elements,
{ opacity: 1, scale: 1 },
{ opacity: 0, scale: 0, duration: 0.6 }
),
});
flip.fromTo(
'.projects_inner',
{
height: startHeight,
},
{
height: endHeight,
clearProps: 'height',
duration: flip.duration(),
},
0
);
},1)
selected = 'freiflaechen';"
:class="{ 'bg-theme-primary text-theme-white' : selected == 'freiflaechen' , 'bg-theme-white text-theme-black' : selected !== 'freiflaechen' }"
class="lg:flex-grow transition-all duration-150 flex items-center justify-center h-12 px-4 hover:bg-theme-primary hover:text-theme-white transition duration-100 cursor-pointer option" >Freiflächen{
const endHeight = gsap.getProperty('.projects_inner', 'height');
const flip = Flip.from(state, {
duration: 0.6,
ease: 'power3.inOut',
stagger: 0.08,
absolute: true,
onEnter: (elements) =>
gsap.fromTo(
elements,
{ opacity: 0, scale: 0 },
{ opacity: 1, scale: 1, duration: 0.6 }
),
onLeave: (elements) =>
gsap.fromTo(
elements,
{ opacity: 1, scale: 1 },
{ opacity: 0, scale: 0, duration: 0.6 }
),
});
flip.fromTo(
'.projects_inner',
{
height: startHeight,
},
{
height: endHeight,
clearProps: 'height',
duration: flip.duration(),
},
0
);
},1)
selected = 'industrie';"
:class="{ 'bg-theme-primary text-theme-white' : selected == 'industrie' , 'bg-theme-white text-theme-black' : selected !== 'industrie' }"
class="lg:flex-grow transition-all duration-150 flex items-center justify-center h-12 px-4 hover:bg-theme-primary hover:text-theme-white transition duration-100 cursor-pointer option" >Industrie{
const endHeight = gsap.getProperty('.projects_inner', 'height');
const flip = Flip.from(state, {
duration: 0.6,
ease: 'power3.inOut',
stagger: 0.08,
absolute: true,
onEnter: (elements) =>
gsap.fromTo(
elements,
{ opacity: 0, scale: 0 },
{ opacity: 1, scale: 1, duration: 0.6 }
),
onLeave: (elements) =>
gsap.fromTo(
elements,
{ opacity: 1, scale: 1 },
{ opacity: 0, scale: 0, duration: 0.6 }
),
});
flip.fromTo(
'.projects_inner',
{
height: startHeight,
},
{
height: endHeight,
clearProps: 'height',
duration: flip.duration(),
},
0
);
},1)
selected = 'kommunale';"
:class="{ 'bg-theme-primary text-theme-white' : selected == 'kommunale' , 'bg-theme-white text-theme-black' : selected !== 'kommunale' }"
class="lg:flex-grow transition-all duration-150 flex items-center justify-center h-12 px-4 hover:bg-theme-primary hover:text-theme-white transition duration-100 cursor-pointer option" >Kommunale Aufträge{
const endHeight = gsap.getProperty('.projects_inner', 'height');
const flip = Flip.from(state, {
duration: 0.6,
ease: 'power3.inOut',
stagger: 0.08,
absolute: true,
onEnter: (elements) =>
gsap.fromTo(
elements,
{ opacity: 0, scale: 0 },
{ opacity: 1, scale: 1, duration: 0.6 }
),
onLeave: (elements) =>
gsap.fromTo(
elements,
{ opacity: 1, scale: 1 },
{ opacity: 0, scale: 0, duration: 0.6 }
),
});
flip.fromTo(
'.projects_inner',
{
height: startHeight,
},
{
height: endHeight,
clearProps: 'height',
duration: flip.duration(),
},
0
);
},1)
selected = 'landwirtschaftliche';"
:class="{ 'bg-theme-primary text-theme-white' : selected == 'landwirtschaftliche' , 'bg-theme-white text-theme-black' : selected !== 'landwirtschaftliche' }"
class="lg:flex-grow transition-all duration-150 flex items-center justify-center h-12 px-4 hover:bg-theme-primary hover:text-theme-white transition duration-100 cursor-pointer option" >Landwirtschaft{
const endHeight = gsap.getProperty('.projects_inner', 'height');
const flip = Flip.from(state, {
duration: 0.6,
ease: 'power3.inOut',
stagger: 0.08,
absolute: true,
onEnter: (elements) =>
gsap.fromTo(
elements,
{ opacity: 0, scale: 0 },
{ opacity: 1, scale: 1, duration: 0.6 }
),
onLeave: (elements) =>
gsap.fromTo(
elements,
{ opacity: 1, scale: 1 },
{ opacity: 0, scale: 0, duration: 0.6 }
),
});
flip.fromTo(
'.projects_inner',
{
height: startHeight,
},
{
height: endHeight,
clearProps: 'height',
duration: flip.duration(),
},
0
);
},1)
selected = 'privat';"
:class="{ 'bg-theme-primary text-theme-white' : selected == 'privat' , 'bg-theme-white text-theme-black' : selected !== 'privat' }"
class="lg:flex-grow transition-all duration-150 flex items-center justify-center h-12 px-4 hover:bg-theme-primary hover:text-theme-white transition duration-100 cursor-pointer option" >Privat-Anlagen