Pause scrolltrigger after show the video section

[CrPalomino]

 

I need a way to stop the scrolltrigger after the scale img container, currently www.laounika.com keeps scrolling after the video section. The last element that should apear should be the video then the footer. 

 

gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.defaults({
  toggleActions:"play none none reverse"
})
gsap.to('.img-container',{
  scale:50,
  ease:"ease",
  scrollTrigger:{
    trigger:'.video-section',
    scrub:2,
    start:"top top",
    end:"bottom",
    pin:true
  }
})
gsap.to('.right' ,{
  autoAlpha:0,
  x:500,
  duration:1.5,
  scrollTrigger:{
    start:1
  }
})
gsap.to('.left' ,{
  autoAlpha:0,
  x:-500,
  duration:1.5,
  scrollTrigger:{
    start:1
  }
})
gsap.to('.txt-bottom',{
  autoAlpha:0,
  letterSpacing:-10,
  duration:2,
  scrollTrigger:{
    start:2,
  }
})
const tl = gsap.timeline();
tl.from('.left-side div',{
  y:150,
  opacity:0,
  stagger:{
    amount:.4
  },
  delay:.5
})
.from('.right-side',{opacity:0,duration:2},.5)
.to('.wrapper' ,{x:-window.innerWidth})
ScrollTrigger.create({
  animation:tl,
  trigger:'.wrapper',
  start:"top top",
  end:"+=600",
  scrub:1,
  pin:true,
  ease:"ease"
})

const timeline = gsap.timeline();

timeline.from('.title span' ,{
  y:150,
  skewY:7,
  duration:3
}).from('.txt-bottom',{
  letterSpacing:-10,
  opacity:0,
  duration:3
})

 <div class="wrapper">
        <section class="video-section">
            <div class="video-container">

                <video width="320" height="240" autoplay loop muted playsinline>
                    <source src="./media/laounika_videoclip.mp4" type="video/mp4">
                  </video>


            </div>
            <div class="img-container">
                <img src="./media/Oblack.png" alt="" class="img">
            </div>

            <div class="text-content">
                <div class="img_txt">

                    <div class="title bgz left">
                        <span>La</span>
                    </div>
                    <div class="title bgz right n">
                        <span></span>
                    </div>
                    <div class="title bgz right">
                        <span>unika</span>
                    </div>
                </div>
                <p class="txt-bottom">

                </p>
            </div>

            <div class="v_container">
                <div class="left-side">
                    <div class="tv">
                        <div class="bg">Lou</div>
                        <div class="sm">Gaupp</div>
                        <div class="bga bgi">Andrea</div>
                    </div>
                    <div class="text-container">
                        <p>
                            Also known as Laounika (the one and only) is a unique painter, muralist,
                            performance artist as well as a musician and recording artist.
                        </p>
                        <p>
                            She has been exhibiting her work and performing in Canada, the U.S., Europe and Mexico
                            for over 20 years now and continues to devote herself body and soul to both painting and music,
                            alternately at times and often simultaneously.

                        </p>
                    </div>
                </div>   
    </div>

    <footer>
        <div class="logo"><a href="#">eraf</a></div>
        <div class="btn">instegram</div>
    </footer>

 

See the Pen bGOWPKx by Gabriela-Avellaneda (@Gabriela-Avellaneda) on CodePen

[Rodrigo]

Hi @CrPalomino and welcome to the GreenSock forums!

 

There are three things that are causing issues in your app in terms of HTML and some GSAP issues. Besides that you might have to tinker with your CSS but your demo has over 700 lines of CSS and we don't have the time resources to comb through all that.

 

First your demo is missing the closing tags for <section> and <div class="wrapper> so that definitely creates an issue. Then you are using very old versions of GSAP and ScrollTrigger and the version of the GSAP Core is different than the version of ScrollTrigger. Always use the latest versions and be sure that they match. Right now we're on version 3.12.2.

 

Also is important to not pin elements inside another element that is pinned. Right now you are pinning the video section but you already have pinned the main wrapper here:

ScrollTrigger.create({
  animation:tl,
  trigger:'.wrapper',
  start:"top top",
  end:"+=1200",
  scrub:1,
  pin:true,
  ease:"ease",
})

That could definitely be a source of issues. Also is a better idea to create your ScrollTrigger instances in a logical order. So I'd create the one that pins the wrapper first and then create the ScrollTrigger instance that animates the video and the other sections.

 

Finally you are creating an animation with a very large scale but there is no overflow hidden anywhere in a parent of that element, therefore that adds A LOT of extra scrolling space. If you comment line 85 in my example and uncomment line 86 you'll see the difference:

See the Pen LYMLPrK by GreenSock (@GreenSock) on CodePen

 

That at least shows the footer so is a step in the right direction.

Hopefully this helps.

Happy Tweening!