Animation Snippets

Live Previews

Trigger:

  • .last-cont (Add class to last container)
  • .card.scroll
  • .pinned (Add class to top container)
  • .img (Add class to image container)
  • .hero h1 (applies opacity to h1)
				
					.card.scroll {
  position: relative;
}

.img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 1000px;
  height: 700px;
  transition: 0s;
}
				
			
				
					<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<script>
    gsap.registerPlugin(ScrollTrigger);

document.addEventListener("DOMContentLoaded", function () {
  const footer = document.querySelector(".last-cont");
  const lastCard = document.querySelector(".card.scroll");
  const pinnedSections = gsap.utils.toArray(".pinned");

  pinnedSections.forEach((section, index, sections) => {
    let img = section.querySelector(".img");

    let nextSection = sections[index + 1] || lastCard;
    let endScalePoint = `top+=${nextSection.offsetTop - section.offsetTop} top`;

    gsap.to(section, {
      scrollTrigger: {
        trigger: section,
        start: "center center",
        end:
          index === sections.length
            ? `+=${lastCard.offsetHeight / 2}`
            : footer.offsetTop - window.innerHeight,
        pin: true,
        pinSpacing: false,
        scrub: 1,
      },
    });

    gsap.fromTo(
      img,
      { scale: 1 },
      {
        scale: 0.5,
        ease: "none",
        scrollTrigger: {
          trigger: section,
          start: "top top",
          end: endScalePoint,
          scrub: 1,
        },
      }
    );
  });

  const heroH1 = document.querySelector(".hero h1");
  ScrollTrigger.create({
    trigger: document.body,
    start: "top top",
    end: "+=350vh",
    scrub: 1,
    onUpdate: (self) => {
      let opacityProgress = self.progress;
      heroH1.style.opacity = 1 - opacityProgress;
    },
  });
});

</script>
  • wrapper-swap1
  • #section-hero-content
  • .section-hero-image-wrapper
  • .section-category-content
  • .section-wrapper
				
					<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

<script>

gsap.registerPlugin(ScrollTrigger);


const tl = gsap.timeline();
let width = window.innerWidth
let speed = 1
let endX = width - 1
let duration = (window.innerWidth);
let duration2 = (window.innerWidth) * speed * 2;
let ease = "none"
let ease1 = "ease.inOut"
let ease2 = "power2.inOut"


document.addEventListener("DOMContentLoaded", function(event) {
    var scrollpos = localStorage.getItem('scrollpos');
    if (scrollpos) window.scrollTo(0, scrollpos);
});

window.onbeforeunload = function(e) {
    localStorage.setItem('scrollpos', window.scrollY);
};

ScrollTrigger.matchMedia({

    // large
    "(min-width: 1024px)": function() {

        tl.add('start')
            .add('wrapper-swap1')

        /*         .to(".section-hero-image-wrapper", duration, {
                        opacity: 0,
                        delay: -duration,
                        ease: ease,
                    }) */

        .add('wrapper-swap1')
            .from("#section-hero-content", duration, {
                x: -225,
                delay: 0,
            })
            .to(".section-wrapper", duration, {
                x: -width,
                delay: -duration,
            })
            /*.to("#section-hero-content", duration, {
                x: 350,
                delay: -duration,
            })
            .to(".section-hero-image-wrapper", duration, {
                opacity: 0.1,
                delay: -duration,
            })
            .from(".section-category-content", duration, {
                x: -225,
                delay: 0,
            })*/
            .to(".section-wrapper", duration, {
                x: -width * 2,
                delay: -duration,
            })


        /*             .to(".section-wrapper", duration, {
                        x: -width * 2,
                        delay: 0,
                    }) */


        ScrollTrigger.create({
            animation: tl,
            trigger: ".section-wrapper",
            start: "top",
            end: "bottom -1px",
            scrub: 1,
            pin: true,
        })


    },

    /*     // medium
        "(min-width: 600px) and (max-width: 959px)": function() {

        },
      
        // small
        "(max-width: 600px)": function() {


        },
          
        // all 
        "all": function() {

        } */

});

</script>
				
			
				
					/*Basic*/

@font-face {
    font-family: 'Skia';
    src: url('gsap.marcogarcia.de/typeface/Skia.ttf.woff') format('woff'), url('Skia.ttf.svg#Skia') format('svg'), url('Skia.ttf.eot'), url('Skia.ttf.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Pherome';
    src: url('gsap.marcogarcia.de/typeface/PheromeRegular.woff2') format('woff2'), url('gsap.marcogarcia.de/typeface/PheromeRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

 :root {
    --serif: 'Pherome', serif;
    --sans-serif: 'Skia', sans-serif;
    /*     --sans-serif2: 'Red Hat Display', sans-serif; */
    --weight-100: 100;
    --weight-200: 200;
    --weight-300: 300;
    --weight-400: 400;
    --weight-500: 500;
    --weight-500: 500;
    --weight-500: 500;
    /* Custom Font Size Props */
    --font-baseSize: 14px;
    --font-xxxl: calc(var(--font-baseSize) * 20);
    --font-xxl: calc(var(--font-baseSize) * 8);
    --font-xl: calc(var(--font-baseSize) * 5);
    --font-l: calc(var(--font-baseSize) * 3);
    --font-lm: calc(var(--font-baseSize) * 2.5);
    --font-m: calc(var(--font-baseSize) * 2);
    --font-ms: calc(var(--font-baseSize) * 1.5);
    --font-s: calc(var(--font-baseSize) * 1);
    --font-xs: calc(var(--font-baseSize) * 0.85);
    /*Heading Sizes*/
    --h1: clamp(var(--font-xxl), var(--font-xxl) + 5vw, var(--font-xxl));
    --h2: clamp(var(--font-m), var(--font-m) + 1vw, var(--font-l));
    --h3: clamp(var(--font-s), var(--font-s) + 1vw, var(--font-m));
    --h4: clamp(var(--font-s), var(--font-s) + 1vw, var(--font-ms));
    --h5: clamp(var(--font-xs), var(--font-xs) + 1vw, var(--font-s));
    --h6: clamp(var(--font-xs), var(--font-xs) + 1vw, var(--font-s));
    /* Custom Color Props */
    --size-10625: 0.625rem;
    --size-1025: 0.25rem;
    --size-105: 0.5rem;
    --size-1: 1rem;
    --size-2: 2rem;
    --size-3: 3rem;
    --size-4: 4rem;
    --size-5: 5rem;
    --size-6: 6rem;
    --size-7: 7rem;
    --size-8: 8rem;
    --size-9: 9rem;
    --size-10: 10rem;
    --size-11: 11rem;
    --size-12: 12rem;
    --size-13: 13rem;
    --size-14: 14rem;
    --size-15: 15rem;
    --size-16: 16rem;
    --size-17: 17rem;
    --size-18: 18rem;
    --size-19: 19rem;
    --size-20: 20rem;
    --size-25: 25rem;
    /* Custom Color Props */
    --dark-100: #e5e1e1;
    --dark-200: #b5aaaa;
    --dark-300: #867474;
    --dark-400: #4f4545;
    --dark-500: #191515;
    --light-100: whitesmoke;
    --light-200: #cccccc;
    --light-300: #ABABAB;
    --light-400: #666666;
    --light-500: #333333;
    --accent1-100: #ffcce7;
    --accent1-200: #ff33a0;
    --accent1-300: #cc006d;
    --accent1-400: #660036;
    --accent1-500: #33001b;
    --accent2-100: #ccffee;
    --accent2-200: #33ffbb;
    --accent2-300: #00cc88;
    --accent2-400: #006644;
    --accent2-500: #003322;
    --color: #191515;
    --color: 25, 21, 21;
    --colorBlack: 57, 57, 57;
}

@media only screen and (min-width: 1024px) {
     :root {
        --font-baseSize: 18px;
        --font-xxl: calc(var(--font-baseSize) * 11);
        --font-xl: calc(var(--font-baseSize) * 8);
        --font-l: calc(var(--font-baseSize) * 5);
        --font-lm: calc(var(--font-baseSize) * 3.3);
        --font-m: calc(var(--font-baseSize) * 2.5);
        --font-ms: calc(var(--font-baseSize) * 1.8);
        --font-s: calc(var(--font-baseSize) * 1 + 2vw);
        --font-xs: calc(var(--font-baseSize) * 0.8);
    }
}


/* adjust fallback font overrides */

@font-face {
    font-family: fallback-font;
    ascent-override: 100%;
    descent-override: 20%;
    line-gap-override: normal;
    advance-override: 10;
    src: local(Arial);
}


/* adjust fallback letter and word spacing */

.fallback {
    letter-spacing: -1.1px;
    word-spacing: -0.2px;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul,
li {
    list-style-type: none;
    text-decoration: none;
}

a {
    text-decoration: none;
    color: var(--dark-500);
    font-size: var(--font-normal);
    font-family: var(--sans-serif);
}

body {
    font-size: var(--font-base);
    font-family: var(--sans-serif);
    line-height: 1;
    background: var(--dark-500);
    color: var(--light-100);
    overflow-x: hidden;
    scroll-behavior: none;
}

@media only screen and (min-width: 768px) {
    body {
        padding: 0;
        min-height: 100vh;
        /* display: grid;
grid-template-rows: 1fr 3fr; */
    }
}

@media only screen and (min-width: 1024px) {
    body {
        padding: 0;
    }
}

h1,
h2,
h3 {
    font-family: var(--serif);
}

h4,
h5,
h6 {
    font-family: var(--sans-serif);
}

img {
    max-width: 100%;
    height: auto;
}

/*Fonts*/

/*-----------------------------------------------------------------------------------------------
Font Styling
-------------------------------------------------------------------------------------------------*/

.serif {
    font-family: var(--serif);
}

.sans-serif {
    font-family: var(--sans-serif);
}

.text-stroke {
    -webkit-text-stroke: 1px var(--light-400);
    color: transparent;
    transition: color 250ms ease-in-out;
}

.text-stroke:hover,
.text-stroke:focus,
.text-stroke:active,
.active {
    -webkit-text-stroke: 1px var(--light-100);
    color: var(--light-100);
}

.wide-text {
    letter-spacing: 1.15em;
    font-family: var(--sans-serif);
    text-align: center;
}

@media screen and (min-width: 40em) {
    .wide-text {
        letter-spacing: 1.15em;
        font-family: var(--sans-serif);
        text-align: center;
    }
}

.weight {
    font-weight: var(--weight-secondary);
}

h1 {
    font-size: var(--h1);
}

h2 {
    font-size: var(--h2);
}

h3 {
    font-size: var(--h3);
}

h4 {
    font-size: var(--h4);
}

h5 {
    font-size: var(--h5);
}

h6 {
    font-size: var(--h6);
}

/*Style*/

@font-face {
    font-family: 'Skia';
    src: url('gsap.marcogarcia.de/typeface/Skia.ttf.woff') format('woff'), url('Skia.ttf.svg#Skia') format('svg'), url('Skia.ttf.eot'), url('Skia.ttf.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Pherome';
    src: url('gsap.marcogarcia.de/typeface/PheromeRegular.woff2') format('woff2'), url('/typeface/PheromeRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* adjust fallback font overrides */

@font-face {
    font-family: fallback-font;
    ascent-override: 100%;
    descent-override: 20%;
    line-gap-override: normal;
    advance-override: 10;
    src: local(Arial);
}


/* adjust fallback letter and word spacing */

.fallback {
    letter-spacing: -1.1px;
    word-spacing: -0.2px;
}

 :root {
    --serif: 'Pherome', serif;
    --sans-serif: 'Skia', sans-serif;
    /*     --sans-serif2: 'Red Hat Display', sans-serif; */
    --weight-100: 100;
    --weight-200: 200;
    --weight-300: 300;
    --weight-400: 400;
    --weight-500: 500;
    --weight-500: 500;
    --weight-500: 500;
    /* Custom Font Size Props */
    --font-baseSize: 14px;
    --font-xxxl: calc(var(--font-baseSize) * 20);
    --font-xxl: calc(var(--font-baseSize) * 8);
    --font-xl: calc(var(--font-baseSize) * 5);
    --font-l: calc(var(--font-baseSize) * 3);
    --font-lm: calc(var(--font-baseSize) * 2.5);
    --font-m: calc(var(--font-baseSize) * 2);
    --font-ms: calc(var(--font-baseSize) * 1.5);
    --font-s: calc(var(--font-baseSize) * 1);
    --font-xs: calc(var(--font-baseSize) * 0.85);
    /*Heading Sizes*/
    --h1: clamp(var(--font-xxl), var(--font-xxl) + 5vw, var(--font-xxl));
    --h2: clamp(var(--font-m), var(--font-m) + 1vw, var(--font-l));
    --h3: clamp(var(--font-s), var(--font-s) + 1vw, var(--font-m));
    --h4: clamp(var(--font-s), var(--font-s) + 1vw, var(--font-ms));
    --h5: clamp(var(--font-xs), var(--font-xs) + 1vw, var(--font-s));
    --h6: clamp(var(--font-xs), var(--font-xs) + 1vw, var(--font-s));
    /* Custom Color Props */
    --size-10625: 0.625rem;
    --size-1025: 0.25rem;
    --size-105: 0.5rem;
    --size-1: 1rem;
    --size-2: 2rem;
    --size-3: 3rem;
    --size-4: 4rem;
    --size-5: 5rem;
    --size-6: 6rem;
    --size-7: 7rem;
    --size-8: 8rem;
    --size-9: 9rem;
    --size-10: 10rem;
    --size-11: 11rem;
    --size-12: 12rem;
    --size-13: 13rem;
    --size-14: 14rem;
    --size-15: 15rem;
    --size-16: 16rem;
    --size-17: 17rem;
    --size-18: 18rem;
    --size-19: 19rem;
    --size-20: 20rem;
    --size-25: 25rem;
    /* Custom Color Props */
    --dark-100: #e5e1e1;
    --dark-200: #afafaf;
    --dark-300: #818181;
    --dark-400: #494949;
    --dark-500: #202020;
    --light-100: whitesmoke;
    --light-200: #cccccc;
    --light-300: #ABABAB;
    --light-400: #666666;
    --light-500: #333333;
    --accent1-100: #ffcce7;
    --accent1-200: #ff33a0;
    --accent1-300: #cc006d;
    --accent1-400: #660036;
    --accent1-500: #33001b;
    --accent2-100: #ccffee;
    --accent2-200: #33ffbb;
    --accent2-300: #00cc88;
    --accent2-400: #006644;
    --accent2-500: #003322;
    --color: 32, 32, 32;
    --colorBlack: 32, 32, 32;
}

@media only screen and (min-width: 1024px) {
     :root {
        --font-baseSize: 18px;
        --font-xxl: calc(var(--font-baseSize) * 11);
        --font-xl: calc(var(--font-baseSize) * 8);
        --font-l: calc(var(--font-baseSize) * 5);
        --font-lm: calc(var(--font-baseSize) * 3.3);
        --font-m: calc(var(--font-baseSize) * 2.5);
        --font-ms: calc(var(--font-baseSize) * 1.8);
        --font-s: calc(var(--font-baseSize) * 1 + 2vw);
        --font-xs: calc(var(--font-baseSize) * 0.8);
    }
}


/*----------------------------------------------------------------
Footer
----------------------------------------------------------------*/

.section-footer {
    display: grid;
    padding: var(--size-4) var(--size-3) var(--size-4) var(--size-3);
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr;
}

.footer_title {
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--light-100);
    margin-bottom: var(--size-3);
    font-size: var(--h4);
}

.footer_title:hover {
    color: var(--light-11 0);
}

.footer_text {
    letter-spacing: 3px;
    color: var(--dark-300);
    padding: var(--size-105) 0;
    font-size: var(--h5);
    transition: color 350ms ease-in-out;
    cursor: pointer;
}

.footer_text:hover {
    color: var(--light-500);
}

.footer_copyright {
    margin-top: var(--size-5);
    color: var(--dark-300);
    font-size: var(--h6);
}

@media only screen and (min-width: 768px) {
    .section-footer {
        margin-left: 0;
    }
}

@media only screen and (min-width: 1024px) {
    .section-footer {
        /* margin-left: calc(var(--size-20) * 3); */
        place-items: center;
    }
    .footer-content {
        grid-template-columns: 1fr;
    }
}


/*----------------------------------------------------------------
Header
----------------------------------------------------------------*/

.logo {
    /*     font-family: var(--serif);
font-size: var(--size-4);
color: var(--light-100);
letter-spacing: 0.1;
text-align: center;
display: flex; */
    max-height: var(--size-5);
    padding: var(--size-1);
}

.logo-detail {
    display: none;
}

.logo-full {
    display: none;
}

.logo-link {
    width: 100%;
    height: auto;
    text-align: center;
}

.section-hero-content {
    margin-top: calc(var(--size-3) * -1);
}


/* .container,

.section {
    min-height: 100vh;
} */

header {
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--dark-500);
}

.navigation-line {
    display: none;
}

.navigation {
    padding: var(--size-1);
    background: var(--light-500);
    display: flex;
    justify-content: space-around;
    width: 100%;
}

.nav-links {
    color: var(--light-300);
    text-transform: uppercase;
    font-size: var(--font-xs);
    letter-spacing: 3px;
}

.nav-links:hover {
    color: var(--light-100);
    text-transform: uppercase;
    font-size: var(--font-xs);
    letter-spacing: 3px;
}

.sidebar-logo-detail {
    display: none;
}

@media only screen and (min-width: 768px) {
    header {
        padding: var(--size-2);
    }
    .navigation {
        background: transparent;
        top: var(--size-2);
        right: var(--size-2);
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }
    .nav-links {
        margin-right: var(--size-5);
    }
    .nav-links:last-child {
        margin-right: 0;
    }
    .navigation-line {
        display: block;
        content: '';
        width: 100%;
        position: relative;
        top: -6px;
        margin-right: var(--size-2);
        border-bottom: 1px solid var(--dark-200);
    }
    .logo {
        display: none;
    }
    .logo-detail {
        max-height: 100%;
        display: flex;
        align-items: center;
    }
    .logo-detail_symbol {
        height: var(--size-3);
        margin-right: var(--size-2);
    }
    .logo-detail_add {
        width: calc(var(--size-12) + 5vw);
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .logo-detail_add-add {
        max-width: 92%;
    }
    /*    .logo-detail_add> :nth-child(1) {
        margin-bottom: var(--size-1);
    } */
    .logo-detail_add-name {
        margin-bottom: var(--size-1);
    }
    .logo-link {
        margin: var(--size-5) 0;
    }
}

@media only screen and (min-width: 1024px) {
    header {
        position: fixed;
    }
    .sidebar-logo-detail {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .logo-detail_add {
        position: absolute;
        bottom: 30%;
        left: 50%;
        transform: translateX(-50%) rotate(-90deg);
    }
    .logo-detail_symbol {
        margin: 0;
    }
    .navigation-line {
        display: none;
    }
    .navigation {
        padding: var(--size-4) var(--size-6) 0 0;
        position: fixed;
        top: 0;
        right: 0;
        max-width: 35em;
        display: flex;
        justify-content: space-around;
        z-index: 25;
    }
    .nav-links {
        margin-right: var(--size-2);
    }
    .logo-detail {
        display: none;
    }
    .logo-link {
        margin: 0;
        padding: 0;
    }
}


/*----------------------------------------------------------------
Buttons
----------------------------------------------------------------*/

button,
input[type=button],
.btn {
    border: solid 2px var(--dark-300);
    background: transparent;
    color: var(--light-200);
    font-size: var(--font-xs);
    padding: var(--size-1) var(--size-3);
    text-transform: uppercase;
    font-family: var(--sans-serif);
    letter-spacing: 4px;
    cursor: pointer;
}

.btn:hover {
    border: solid 2px var(--light-200);
    background: transparent;
    color: var(--light-100);
}


/*----------------------------------------------------------------
Section
----------------------------------------------------------------*/

.section {
    position: relative;
    z-index: -1;
}


/*HERO SECTION */

.section-hero {
    text-align: center;
    margin-bottom: var(--size-8);
}

.section-hero-image-wrapper {
    height: min(100vh, 65vh);
    background: darkgray;
    background-position: center 35%;
    background-repeat: no-repeat;
    background-size: cover;
}

.section-hero-image {
    width: auto;
    height: 100%;
}

.section-hero-action {
    margin: calc(var(--size-6) * -1) 0 var(--size-2) 0;
    display: flex;
    justify-content: center;
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 5px;
    color: var(--dark-400);
}

.section-hero-action span {
    margin-right: var(--size-1);
}

.section-hero-content {
    text-align: center;
    z-index: 10;
}

.section-hero_title {
    font-size: var(--font-xxl);
    text-transform: uppercase;
}

.section-hero_text {
    font-size: var(--h5);
    font-family: var(--sans-serif);
    text-transform: uppercase;
    letter-spacing: 8px;
    color: var(--dark-300);
    margin-bottom: var(--size-5);
}

.section-category-content {
    width: 100%;
    height: 100%;
}

.section-category-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    /* margin: var(--size-3) 0; */
}

.section-category-image {
    width: auto;
    height: 50vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-bottom: var(--size-4);
}

#oberteile {
    background: darkgray;
}

#hose {
    background: darkgray;
}

#accessoires {
    background: darkgray;
    margin-bottom: 0;
}

.section-category-wrapper::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(var(--color), 0.8);
    z-index: 2;
}

.section-label-category-image:hover .section-category-wrapper::after {
    background: rgba(var(--color), 0);
}

.section-label-category-image {
    text-transform: uppercase;
    color: var(--light-200);
    letter-spacing: 5px;
    font-size: var(--h6);
    z-index: 10;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 300ms ease-in-out;
    cursor: pointer;
    z-index: 20;
}

.section-label-category-image:hover {
    color: var(--light-100);
}


/*Tablet */

@media only screen and (min-width: 768px) {
    .section-hero {
        display: flex;
        align-items: center;
    }
    .section-category-image {
        height: 100%;
    }
    .section-hero-image-wrapper {
        width: 50%;
    }
    .section-hero-content {
        margin: var(--size-2);
    }
    .section-category-content {
        height: 100%;
        display: flex;
        gap: var(--size-2);
    }
    .section-category-image {
        min-height: 100%;
    }
    .section-category-wrapper {
        height: min(10em, 10em + 5vw);
    }
}


/*Desktop */

@media only screen and (min-width: 1024px) {
    .section {
        height: 100vh;
        min-width: 100vw;
    }
    .sidebar {
        position: fixed;
        padding-top: var(--size-4);
        min-width: 15em;
        min-height: 100%;
        background: var(--dark-500);
        z-index: 20;
    }
    /*     .container {
        display: grid;
        grid-template-columns: 1fr 5fr;
    } */
    /*     .container {
        margin-left: var(--size-10);
    } */
    .section-wrapper {
        height: 100vh;
        width: 200%;
        display: flex;
    }
    .section-hero {
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;
        margin: 0 0 0 var(--size-15);
    }
    .section-hero-action {
        justify-content: flex-start;
        position: fixed;
        right: var(--size-4);
        bottom: var(--size-2);
    }
    .section-hero-image-wrapper {
        width: 100%;
        max-width: 100%;
        height: 100vh;
    }
    .section-content-wrapper {
        display: flex;
        place-items: center;
        width: 100%;
        height: 100vh;
    }
    .section-hero-content {
        margin: var(--size-8);
        text-align: left;
    }
    .section-category-content {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
        place-items: center;
        width: 100%;
        height: calc(100vh - var(--size-20));
        z-index: 11;
    }
    .section-category-wrapper {
        position: relative;
        min-width: 10em;
        height: 100%;
        margin-right: var(--size-4);
    }
    .section-category-image {
        width: auto;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1366px) {
    .section-hero-image-wrapper::after {
        content: '';
        background: linear-gradient(90deg, rgba(var(--colorBlack), 0) 50%, rgba(var(--color), 0.7) 100%);
        position: absolute;
        left: 0;
        width: 50%;
        height: 100vh;
    }
}
				
			
				
					    <header>
        <nav class="navigation">
            <div class="navigation-line"></div>
            <a href="#" class="nav-links">Menu</a>
            <a href="#" class="nav-links">Search</a>
            <a href="#" class="nav-links">Cart</a>
        </nav>
        <a class="logo-link" href="index.html">
            <h1 class="logo" style="color: white;">Brand</h1>
            <div class="logo-detail">
                <h1 class="logo-detail_symbol" style="color: white; font-size: 48px">Brand</h1>
                <div class="logo-detail_add">
                    <h6 class="logo-detail_add-add" style="color: gray;">Megan Harrison</h6>
                </div>
            </div>
        </a>
    </header>
    <div class="container">
        <div class="sidebar">
            <a class="logo-link" href="index.html">
                <div class="sidebar-logo-detail">
                    <h1 class="logo-detail_symbol" style="color: white;  font-size: 22px!important;">Brand</h1>
                    <div class="logo-detail_add">
                        <h6 class="logo-detail_add-add" style="color: gray; font-size: 14px;">Course Creation Blitz</h6>
                    </div>
                </div>
            </a>
        </div>

        <div class="section-wrapper">
            <section class="section section-hero ">

                <div class="section-hero-image-wrapper">
                </div>

                <div class="section-content-wrapper">

                    <div id="section-hero-content" class="section-hero-content">
                        <h1 class="section-hero_title box">Your Heading</h1>
                        <p class="section-hero_text box">Subheading</p>
                        <a href="#">
                            <button class="btn btn-secondary box">Shop now</button>
                        </a>

                    </div>
                </div>
            </section>

            <section class="section section-category">
                <div class="section-content-wrapper">
                    <div class="section-category-content ">
                        <div class="section-category-wrapper">
                            <label class="section-label-category-image" for="oberteile">category</label>
                            <div id="oberteile" name="oberteile" class="section-category-image"></div>
                        </div>
                        <div class="section-category-wrapper">
                            <label class="section-label-category-image" for="hose">category</label>
                            <div id="hose" name="hose" class="section-category-image"></div>
                        </div>
                        <div class="section-category-wrapper">
                            <label class="section-label-category-image" for="accessoires">category</label>
                            <div id="accessoires" name="accessoires" class="section-category-image"></div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="section section-footer">
                <div class="section-content-wrapper">
                    <footer id="footer" class="footer">
                        <h4 class="footer_title">Brand</h4>
                        <div class="footer-content">
                            <h6 class="footer_text">About</h6>
                            <h6 class="footer_text">Privacy Policy</h6>
                            <h6 class="footer_text">Imprint</h6>
                            <p class="footer_copyright">&copy; 2021 Company</p>
                        </div>

                    </footer>
                </div>
            </section>
        </div>
    </div>

Trigger: container

Section: panel

 

				
					<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>


<script>


gsap.registerPlugin(ScrollTrigger);


let sections = gsap.utils.toArray(".panel");

gsap.to(sections, {
  xPercent: -100 * (sections.length - 1),
  ease: "none",
  
  scrollTrigger: {
    trigger: ".container",
    pin: true,
    markers:false,
    scrub: 1,
    snap: {
      snapTo: 1 / (sections.length - 1),
      duration: 0.05
    },
     end: "+=4500",
  }
});



</script>

Trigger: .elementor-heading-title

				
					<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

<script>
    gsap.registerPlugin(ScrollTrigger);

const textElements = gsap.utils.toArray('.elementor-heading-title');

textElements.forEach(text => {
  gsap.to(text, {
    backgroundSize: '100%',
    ease: 'none',
    scrollTrigger: {
      trigger: text,
      start: 'center 80%',
      end: 'center 20%',
      scrub: true,
    },
  });
});

</script>

Trigger: .shrink-grow-section

				
					<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

<script>
gsap.registerPlugin(ScrollTrigger);
const shrinkGrowSection = gsap.timeline({
  scrollTrigger: {
    trigger: ".shrink-grow-section",
    start: '100 center',
    scrub: true, // For smoother animation
    end: "max", // Adjust this value as needed
    ease: 'stepped.out',
    // markers: true,
    // duration:1,
  },
});

shrinkGrowSection
  .fromTo(".shrink-grow-section", { scale: 1.3 }, { scale: 1 }) // Shrink animation
  
</script>

<script>
    window.addEventListener('scroll', function() {
      var divs = document.getElementsByClassName('shrink-grow-section');
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

      for (var i = 0; i < divs.length; i++) {
        var opacity = 1.5 - scrollTop / (divs[i].offsetTop + divs[i].offsetHeight);
        divs[i].style.opacity = opacity;
      }
    });
  </script>

Trigger: .shrink-grow-section

				
					<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js"></script>
<script src="https://unpkg.com/split-type"></script>



<script>
       const myText = new SplitType('.elementor-heading-title')

        gsap.to('.char', {
            y: 0,
            stagger: 0.02,
            delay: 0.2,
            duration: .1,
           
        })
 
        
    gsap.registerPlugin(ScrollTrigger);

let revealContainers = document.querySelectorAll(".reveal-text");

revealContainers.forEach((container) => {
  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: container,
    }
  });

  tl.set(container, { autoAlpha: 1 });
  tl.from(container, 1.5, {
            duration: 1.8,
            delay: .05,
            y: 200,
            skewY: 5,
            stagger: {
                amount: 0.05
            },
            
            ease: "rough.out"
  });

});

</script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script src="https://unpkg.com/split-type"></script>

<script>
       const myText = new SplitType('h1')

        gsap.to('.char', {
            y: 0,
            stagger: 0.02,
            delay: 0.2,
            duration: .1,
           
        })
 
</script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js"></script>

<script>
gsap.registerPlugin(ScrollTrigger);

let revealContainers = document.querySelectorAll(".reveal-text");

revealContainers.forEach((container) => {
  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: container,
    }
  });

  tl.set(container, { autoAlpha: 1 });
  tl.from(container, 1.5, {
            duration: 1.8,
            delay: .05,
            y: 200,
            skewY: 5,
            stagger: {
                amount: 0.05
            },
            
            ease: "rough.out"
  });

});

</script>
Trigger: text-reveal h2 
				
					<script>
;(function(){
  let chck_if_gsap_loaded = setInterval(function(){
      if(window.gsap){
          text_reveal();
          clearInterval(chck_if_gsap_loaded);
      }
  }, 500);

function text_reveal(){

	// New text headline

const textWidget = '.text-reveal h2';

const changeText = (newtext) => {
jQuery(textWidget).text(newtext);
};

const tl = gsap.timeline({ repeat: -1 });
tl.call(changeText, ['Course Creation Blitz']);
tl.fromTo(textWidget, { y: '100%' }, {y: '0%', ease: 'power.out' },'<25%' );
tl.to(textWidget, { y:'-100%', ease: 'power.out'},'+=5');
tl.call(changeText,  ['Time to Elevate']);
tl.fromTo(textWidget, { y: '100%' }, {y: '0%', ease: 'power.out' },'<25%' );
tl.to(textWidget, { y:'-100%', ease: 'power.out'}, '+=5');



}})();
	</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js"></script>

Trigger:

  • card-container
  • card-des
  • .card-headline
  • card-btn
				
					<script>
	;(function(){

    let chck_if_gsap_loaded = setInterval(function(){
      const eleBuilder = document.querySelector('body').classList.contains("elementor-editor-active");
       if(window.gsap && window.ScrollTrigger && !eleBuilder){
            gsap.registerPlugin(ScrollTrigger);

            hover_card()

            clearInterval(chck_if_gsap_loaded);
        }
    }, 500);

function hover_card() {
  const cardContainers = document.querySelectorAll(".card-container");

  cardContainers.forEach((cardContainer) => {
    let tl = gsap.timeline({ paused: true, timeScale: 4 });
    tl.to(cardContainer.querySelector(".card-overlay"), { backgroundColor: "rgba(0, 0, 0, 0.5)", duration: 0.5 })
      .fromTo(cardContainer.querySelector(".card-headline"), { opacity: 0, y: 10 }, { opacity: 1, y: 0, duration: 0.4 }, "-=0.4")
      .fromTo(cardContainer.querySelector(".elementor-divider-separator"), { width: "0%" }, { width: "22%", duration: 0.8 }, "<")
      .fromTo(cardContainer.querySelector(".card-des"), { opacity: 0, y: 10 }, { opacity: 1, y: 0, duration: 0.4 }, "-=0.4")
      .fromTo(cardContainer.querySelector(".card-btn"), { opacity: 0, y: 10 }, { opacity: 1, y: 0, duration: 0.4 });

    cardContainer.addEventListener("mouseenter", () => {
      tl.play();
    });

    cardContainer.addEventListener("mouseleave", () => {
      tl.reverse();
    });
  });
}




})();

</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/ScrollTrigger.min.js"></script>

Trigger:

.image-container.left, .image-container.right

				
					<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        function isInViewport(el) {
          const rect = el.getBoundingClientRect();
          return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <=
              (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <=
              (window.innerWidth || document.documentElement.clientWidth)
          );
        }

        gsap.utils.toArray(".img-container.right img").forEach((img) => {
          gsap.to(img, {
            clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
            scrollTrigger: {
              trigger: img,
              start: "top 75%",
              end: "bottom 100%",
              scrub: true,
            },
          });
        });

        gsap.utils.toArray(".img-container.left img").forEach((img) => {
          gsap.to(img, {
            clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
            scrollTrigger: {
              trigger: img,
              start: "top 75%",
              end: "bottom 100%",
              scrub: true,
            },
          });
        });

        gsap.utils.toArray(".img-container p").forEach((text) => {
          gsap.from(text, {
            opacity: 0,
            y: 20,
            scrollTrigger: {
              trigger: text,
              start: "bottom 90%",
            //   once: true, // Trigger only once
            },
          });
        });
      });
      
    </script>

Trigger: hero

				
					<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>


<script>

gsap.registerPlugin(ScrollTrigger);

document.addEventListener("DOMContentLoaded", () => {
  let tl1 = gsap.timeline();
  let tl2 = gsap.timeline({
    scrollTrigger: {
      trigger: ".hero",
      
      start: "top top",
      end: "bottom bottom",
      scrub: 1
    }
  });

  tl1
    .from(".hero", {
      stagger: { each: 0.2 },
      rotationX: -90,
      skewX: 5,
      skewY: -10,
      y: "50%",
      z: "-90px",
      x: "10%",
      autoAlpha: 0,
      ease: "expo.out",
      duration: 2,
      delay: 0.2
    })

});

</script>

Trigger:

  • .elementor-icon-list-text
  • .test
  • .image-test
  • .burger
				
					<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>
    <script src="https://unpkg.com/gsap@3/dist/CSSRulePlugin.min.js"></script>
<script>
    
      document.addEventListener("DOMContentLoaded", function () {
         let activeItemIndicator = CSSRulePlugin.getRule(".elementor-icon-list-text#active::after");
          const toggleButton = document.querySelector(".burger");
          let isOpen = false;

  gsap.set(".elementor-icon-list-text, .test", {y: 400})
  gsap.set(".image-test", {y: 1000})
          const timeline = gsap.timeline({ paused: true });

          timeline.to(".overlay", {
            duration: 1.5,
            clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
            ease: "power4.inOut"
          });
              timeline.to(".elementor-icon-list-text, .test, .image-test", {
            duration: 1.3,
            y: 0,
            stagger: 0.2,
            ease: "power4.out"
          }, "-=1");
          timeline.to(activeItemIndicator, {
            width: "100%",
            duration: 1,
            ease: "power4.out",
            delay: 0.5
          }, "<");
       



          toggleButton.addEventListener("click", function () {
            if (isOpen) {
              timeline.reverse();
            } else {
              timeline.play();
            }
            isOpen = !isOpen;
          });
        });
    </script>
Follow me on
Instagram
Facebook Instagram Youtube
@Megankharrison
MKH Logo No Border White 1

Support@megankharrison.com

(773)-492-1621

Recent Articles
OCA YouTube Beta Program
How to Create a Stress-Free Beta Course for Your Online Program
View Post
YouTube Design Mistakes copy
How to Avoid Common Design Mistakes in Online Courses: Tips for Consistency and Typography
View Post
OCA YouTube Buyers Journey Thumbnail
Mapping out the online course buyers journey
View Post
01 Blog
02 Programs
03 Services
04 Portfolio
05 Contact
© 2024 Megan Harrison Consulting