gsap.registerPlugin(ScrollToPlugin);
  gsap.registerPlugin(ScrollTrigger);
  gsap.registerPlugin( CSSPlugin );
  gsap.defaults({overwrite: 'all'});
  CSSPlugin.defaultSmoothOrigin = false;
  gsap.config({autoKillThreshold:1});
  gsap.config({autoSleep:120, force3D:"true",autoRound:true});
 ScrollTrigger.defaults({toggleActions:"resume pause none restart"});
  // scroll down arrow animation
//gsap.to(".arrow", {y: 12, ease: "power1.inOut", repeat: -1, yoyo: true});

    TweenLite.set(".quote", {xPercent:-50, yPercent:-80})


  function goToSection(i, anim) {

    gsap.set(".panel", {zIndex: (i, target, targets) => targets.length + i});
    gsap.to(window, {
      scrollTo: {y: i*innerHeight, autoKill: false
    },onUpdate: checkProgress ,
      onComplete: resetitall,
     duration: .8,
     ease: "power3.easeInOut"
    });


    if(anim) {
    //  anim.restart();
    }
    function checkProgress(){
      //  gsap.config({autoKillThreshold:2});
      gsap.set(window, {scrollTo: { autoKill: false},
        overwrite:"true"});
  }
      function resetitall() {
        //gsap.config({autoKillThreshold:1});
        gsap.set(window, {scrollTo: { autoKill: false},
        overwrite:"true"});
        }
  }

  gsap.utils.toArray(".panel").forEach((panel, i) => {

  //if (i<5){
    ScrollTrigger.create({
       anticipatePin:3,
      trigger: panel,
      pinReparent:true,
        start: "top bottom",
      onEnter: () => goToSection(i)
    });

    ScrollTrigger.create({
      anticipatePin:3,
      trigger: panel,
        pinReparent:false,
      start: "bottom bottom",
      onEnterBack: () => goToSection(i),
    });

//  }

   gsap.set(".panele" , {xPercent:100, yPercent:0});
gsap.set(".ani", { yPercent:10,xPercent:0})
gsap.set(".imagefadein", { yPercent:-10,autoAlpha:0})
gsap.set(".btmcopy", { x:-135,autoAlpha:0})
    gsap.set(".btmimage", { yPercent:10,autoAlpha:0})
        gsap.set(".cbtn-1", { xPercent:10,autoAlpha:0})
 gsap.set(".box2", { xPercent:10,autoAlpha:1})
  });
  //gsap.set(".unstickit" , {className:"unstuck"});


  gsap.to(".panele",{
    xPercent:0,rotation:.01,z:.01,duration:1,
    scrollTrigger: {
      trigger: ".e",
      start: "bottom bottom",
  // ease: "power4",
    // scrub: 2,
   endTrigger: ".g",
     // markers: true,
       end: "top top",
      //start: "bottom top",
      ease:"power3.easeIn",
     toggleActions:"restart play reverse reverse"

    }
  });

  //gsap.to(".text1", 3,{
    //xPercent:-50,alpha:1,
   // scrollTrigger: {
   //   trigger: ".xb",
    //  start: "top bottom",
  // ease: "power4",
     //scrub: 1,
     //endTrigger: ".e",
     // markers: true,
    //  end: "bottom top",
     // start: "bottom top",
    //  ease:"power2.easeOut",
   //   toggleActions:"restart reverse pause restart"play none play none

  //  }
  //});


  function move1(){};

  var splitTextTl = gsap.timeline({
    scrollTrigger: {
    trigger: ".quote",
       toggleActions: "restart reverse restart reverse",
      start: "top 65%"
    }
  }),
      splitTextQuote = new SplitText(".quote", {type:"words,chars"}),
      chars = splitTextQuote.chars; //an array of all the divs that wrap each character
  gsap.set(".quote", {visibility:"visible"});
  gsap.set (chars, {overflow: "hidden"});
  splitTextTl.from(chars, {duration: .5, yPercent:140, ease:"circ.out", stagger: 0.12}, "-=.3");



let tl = gsap.timeline();
tl.fromTo(
  ".detail-box",
  {  scaleX: 0, duration:2,transformOrigin: "left" },
  {
    scaleX: 1,duration:2,delay:1, transformOrigin: "left" 
  }
)
tl.fromTo(
  ".box",
  { autoAlpha: 0, y: +20 },
  {
    y: 0,
    autoAlpha: 1,
    duration: 2,
  }
);
tl.fromTo(
  ".box2",
  { autoAlpha: 0, x: 20 },
  {
    x: 0,
    autoAlpha: 1,
    duration: 2,
  }, "-=0"
)
ScrollTrigger.create({
  trigger: ".endparalax",
  animation: tl,
  //markers: true,
  //start: `top+=${$(".endparalax").innerHeight() / 2} center`,
  start:'center center',
  id: "tl",
  scrub: 2.5,
  //ease:Power4.easeInOut,
 // end: `bottom-=${$(".endparalax").innerHeight() / 2} center`,
    end: "bottom center+=400",
    toggleActions:"resume pause none restart"
});





  // LARGE
  function initBIG() {

    gsap.timeline({
          scrollTrigger: {
          trigger: ".e",
          id: "BIG-1",
          scrub: 3,
        //  markers: true,
          start: "top center",
          endTrigger: ".endparalax",
     // markers: true,
       end: "top -35%",
              toggleActions:"resume pause none restart"
         // pin: true
        }
      })
      .to(".ani", {yPercent:-25,ease:"power3.easeOut"},"+=.1")

  }

gsap.to('.imagefadein', {
  yPercent:0,autoAlpha:1,
  scrollTrigger: {
   // markers: true,
    trigger: '.endparalax',
    start: 'top bottom',
    scrub: 2,
      end: 'bottom 25%'
     //toggleActions:"resume pause none restart"
 //   ease:Power4.easeInOut,
// end: "bottom bottom",
  },
});



gsap.to('.btmcopy', {
  x:-30,autoAlpha:1,
  scrollTrigger: {
    //markers: true,
    trigger: '.newstuff',
    start: 'top bottom',
    scrub: 2,
      end: 'bottom bottom+=200'
     //toggleActions:"resume pause none restart"
 //   ease:Power4.easeInOut,
// end: "bottom bottom",
  },
});
  function initBIG2() {
    gsap.timeline({
          scrollTrigger: {
          trigger: ".newstuff",
          id: "Btm-Img-FadeIn",
          scrub: 3,
        //  markers: true,
          start: 'top+=200 bottom',
         // endTrigger: ".newstuff",
     // markers: true,
     end: 'bottom bottom',
              toggleActions:"resume pause none restart"
         // pin: true
        }
      })
      .to(".btmimage", {duration:1.7,yPercent:0,autoAlpha:1,ease:"power3.easeOut"},"+=1.4")
.to(".cbtn-1", {duration:1,xPercent:0,autoAlpha:1,ease:"power3.easeOut"},"+=.2")
  }
  
  
  initBIG();
  initBIG2();