title: How to fix content overlaps on transition between scenes and all pinned section also randomly loading on top of each other when using scrolltrigger?
body: <p>When I create scroll animations using GSAP and Scrolltrigger with multiple scenes I face two issues. One is that when transitioning between two pinned sections the previous or next section tends to overlap. Another issue is suddenly from time to time (random) all the pinned sections overlap on top of each other making it look like the HTML is broken. Not sure why I face this issue any guidance will be helpful. Also any suggestions on how to modify the code to prevent repetition will help. Following is the code</p>
  <pre><code>// Section: Criteria
  
  var timlineCriteria = gsap.timeline();
  
  timlineCriteria
    .from(&quot;#mainCand&quot;, { opacity: 0, y: &quot;-50px&quot; }, &quot;one-0&quot;)
    .from(&quot;#mainCand1&quot;, { opacity: 0, x: &quot;50px&quot; }, &quot;one-0&quot;)
    .from(&quot;#mainCand2&quot;, { opacity: 0, x: &quot;-50px&quot; }, &quot;one-0&quot;)
    .from(&quot;.critieria__points&quot;, { opacity: 0 }, &quot;one-1&quot;);
  
  timlineCriteria
    .from(&quot;.criteria__point_pt1&quot;, { opacity: 0 }, &quot;one-2&quot;)
    .to(&quot;.criteria__point_pt1&quot;, { opacity: 1 }, &quot;one-3&quot;)
    .to(&quot;.criteria__point_pt1&quot;, { opacity: 1 }, &quot;one-4&quot;)
    .to(&quot;.criteria__point_pt1&quot;, { opacity: 0 }, &quot;one-5&quot;);
  
  timlineCriteria
    .to(&quot;.critieria__points&quot;, { backgroundColor: &quot;#B2C8DF&quot; }, &quot;two-0&quot;)
    .from(&quot;.criteria__point_pt2&quot;, { opacity: 0 }, &quot;two-0&quot;)
    .to(&quot;.criteria__point_pt2&quot;, { opacity: 1 }, &quot;two-1&quot;)
    .to(&quot;.criteria__point_pt2&quot;, { opacity: 1 }, &quot;two-2&quot;)
    .to(&quot;.criteria__point_pt2&quot;, { opacity: 0 }, &quot;two-3&quot;);
  
  timlineCriteria
    .to(&quot;.critieria__points&quot;, { backgroundColor: &quot;#C9BBCF&quot; }, &quot;three-0&quot;)
    .from(&quot;.criteria__point_pt3&quot;, { opacity: 0 }, &quot;three-0&quot;)
    .to(&quot;.criteria__point_pt3&quot;, { opacity: 1 }, &quot;three-1&quot;)
    .to(&quot;.criteria__point_pt3&quot;, { opacity: 1 }, &quot;three-2&quot;)
    .to(&quot;.criteria__point_pt3&quot;, { opacity: 0 }, &quot;three-3&quot;);
  
  timlineCriteria
    .to(&quot;.critieria__points&quot;, { backgroundColor: &quot;#90C8AC&quot; }, &quot;four-0&quot;)
    .from(&quot;.criteria__point_pt4&quot;, { opacity: 0 }, &quot;four-0&quot;)
    .to(&quot;.criteria__point_pt4&quot;, { opacity: 1 }, &quot;four-1&quot;)
    .to(&quot;.criteria__point_pt4&quot;, { opacity: 1 }, &quot;four-2&quot;)
    .to(&quot;.criteria__point_pt4&quot;, { opacity: 0 }, &quot;four-3&quot;);
  
  timlineCriteria
    .to(&quot;.critieria__points&quot;, { backgroundColor: &quot;#DEB6AB&quot; }, &quot;five-0&quot;)
    .from(&quot;.criteria__point_pt5&quot;, { opacity: 0 }, &quot;five-0&quot;)
    .to(&quot;.criteria__point_pt5&quot;, { opacity: 1 }, &quot;five-1&quot;)
    .to(&quot;.criteria__point_pt5&quot;, { opacity: 1 }, &quot;five-2&quot;);
  
  var pinCriteria = ScrollTrigger.create({
    animation: timlineCriteria,
    trigger: &quot;#criteria&quot;,
    pin: true,
    scrub: true,
    start: &quot;top 100px&quot;,
    end: &quot;+=300%&quot;,
    pinSpacing: true,
    toggleClass: { targets: &quot;#criteria&quot;, className: &quot;is-active&quot; },
    markers: false,
  });
  
  // ==================================
  // Section: Electors
  // ==================================
  
  var timlineElectors = gsap.timeline();
  
  timlineElectors.from(&quot;.electors-who__one&quot;, { delay: 1, opacity: 0 }, &quot;one-0&quot;);
  
  timlineElectors.from(&quot;.electors-who__two&quot;, { opacity: 0 }, &quot;two-0&quot;);
  
  var pinElectors = ScrollTrigger.create({
    animation: timlineElectors,
    trigger: &quot;.electors&quot;,
    pin: true,
    scrub: true,
    start: &quot;top 100px&quot;,
    end: &quot;+=200%&quot;,
    pinSpacing: true,
    toggleClass: { targets: &quot;.electors&quot;, className: &quot;is-active&quot; },
    markers: false,
  });
  
  // mlavotevalue
  
  var pinMla = ScrollTrigger.create({
    trigger: &quot;.mlavotevalue&quot;,
    pin: true,
    scrub: true,
    start: &quot;top 100px&quot;,
    end: &quot;+=100%&quot;,
    pinSpacing: true,
    toggleClass: { targets: &quot;.mlavotevalue&quot;, className: &quot;is-active&quot; },
    markers: false,
  });
  // mpvotevalue
  
  var pinMP = ScrollTrigger.create({
    trigger: &quot;.mpvotevalue&quot;,
    pin: true,
    scrub: true,
    start: &quot;top 100px&quot;,
    end: &quot;+=100%&quot;,
    pinSpacing: true,
    toggleClass: { targets: &quot;.mpvotevalue&quot;, className: &quot;is-active&quot; },
    markers: false,
  });
  
  var timlineBallotBox = gsap.timeline();
  
  timlineBallotBox
    .from(&quot;#candname3&quot;, { opacity: 0 }, &quot;zero-2&quot;)
    .from(&quot;#candname2&quot;, { opacity: 0 }, &quot;zero-1&quot;)
    .from(&quot;#candname1&quot;, { opacity: 0 }, &quot;zero-0&quot;);
  
  timlineBallotBox
    .from(&quot;#pref1&quot;, { opacity: 0 }, &quot;one-0&quot;)
    .to(&quot;#pref1&quot;, { opacity: 1 }, &quot;one-1&quot;);
  
  timlineBallotBox
    .from(&quot;#pref2&quot;, { opacity: 0 }, &quot;two-0&quot;)
    .to(&quot;#pref2&quot;, { opacity: 1 }, &quot;two-1&quot;);
  
  timlineBallotBox
    .from(&quot;#pref3&quot;, { opacity: 0 }, &quot;three-0&quot;)
    .to(&quot;#pref3&quot;, { opacity: 1 }, &quot;three-1&quot;);
  
  timlineBallotBox
    .to(&quot;#votingSlip&quot;, { scale: &quot;0.5&quot;, x: &quot;125px&quot; }, &quot;four-0&quot;)
    .to(&quot;#votingSlip&quot;, { scale: &quot;0.2&quot;, x: &quot;200px&quot; }, &quot;four-2&quot;)
    .to(
      &quot;#votingSlip&quot;,
      { scale: &quot;0.1&quot;, x: &quot;225px&quot;, y: &quot;300px&quot;, opacity: 0 },
      &quot;four-3&quot;
    );
  
  var pinBallotBox = ScrollTrigger.create({
    animation: timlineBallotBox,
    trigger: &quot;#votingProcess1&quot;,
    pin: true,
    scrub: true,
    start: &quot;top 100px&quot;,
    end: &quot;+=600%&quot;,
    pinSpacing: true,
    toggleClass: { targets: &quot;#votingProcess1&quot;, className: &quot;is-active&quot; },
    markers: false,
  });
  
  var timlineCandSelect = gsap.timeline();
  
  timlineCandSelect
    .from(&quot;#cand1&quot;, { opacity: 0 }, &quot;zero-0&quot;)
    .from(&quot;#candtxt1&quot;, { opacity: 0 }, &quot;zero-0&quot;);
  
  timlineCandSelect
    .from(&quot;#cand2&quot;, { opacity: 0 }, &quot;zero-1&quot;)
    .from(&quot;#candtxt2&quot;, { opacity: 0 }, &quot;zero-1&quot;);
  
  timlineCandSelect
    .from(&quot;#cand3&quot;, { opacity: 0 }, &quot;zero-2&quot;)
    .from(&quot;#candtxt3&quot;, { opacity: 0 }, &quot;zero-2&quot;);
  
  timlineCandSelect
    .from(&quot;#Bar1&quot;, { opacity: 0 }, &quot;one-0&quot;)
    .from(&quot;#Bar2&quot;, { opacity: 0 }, &quot;one-1&quot;)
    .from(&quot;#Bar3&quot;, { opacity: 0 }, &quot;one-2&quot;);
  
  timlineCandSelect.from(&quot;#cuttoff-50&quot;, { opacity: 0 }, &quot;one-3&quot;);
  
  timlineCandSelect.from(&quot;#eliminated3&quot;, { opacity: 0 }, &quot;two-0&quot;);
  
  timlineCandSelect.to(&quot;#cand3&quot;, { opacity: 0 }, &quot;two-1&quot;);
  timlineCandSelect.to(&quot;#eliminated3&quot;, { opacity: 0 }, &quot;two-1&quot;);
  timlineCandSelect.to(&quot;#candtxt3&quot;, { opacity: 0 }, &quot;two-1&quot;);
  timlineCandSelect.to(&quot;#Bar3&quot;, { y: -150, opacity: 0 }, &quot;two-1&quot;);
  timlineCandSelect.to(&quot;#bar22&quot;, { x: 0, width: 100 }, &quot;two-1&quot;);
  timlineCandSelect.to(&quot;#bar23&quot;, { x: 20, width: 50 }, &quot;two-1&quot;);
  timlineCandSelect.to(&quot;#bar11&quot;, { width: 190 }, &quot;two-1&quot;);
  timlineCandSelect.to(&quot;#bar12&quot;, { x: 20, width: 80 }, &quot;two-1&quot;);
  timlineCandSelect.to(&quot;#bar13&quot;, { x: 20, width: 50 }, &quot;two-1&quot;);
  
  timlineCandSelect.to(&quot;#cand1-group&quot;, { scale: 1.1, y: 50 }, &quot;four-0&quot;);
  
  timlineCandSelect.to(&quot;#cand2-group&quot;, { scale: 1.1, y: 100 }, &quot;four-0&quot;);
  
  timlineCandSelect.from(&quot;#eliminated2&quot;, { delay: 1, opacity: 0 }, &quot;five-0&quot;);
  
  timlineCandSelect.to(&quot;#cand2-group&quot;, { delay: 1, opacity: 0 }, &quot;five-1&quot;);
  
  timlineCandSelect.to(&quot;#cand1-group&quot;, { scale: 1.3, x: -50, y: 100 }, &quot;five-2&quot;);
  
  timlineCandSelect.to(&quot;#cuttoff-50&quot;, { opacity: 0 }, &quot;five-2&quot;);
  
  
  var pinCandSelect = ScrollTrigger.create({
    animation: timlineCandSelect,
    trigger: &quot;#votingProcess2&quot;,
    pin: true,
    scrub: true,
    start: &quot;top 100px&quot;,
    end: &quot;+=600%&quot;,
    pinSpacing: true,
    toggleClass: { targets: &quot;#votingProcess2&quot;, className: &quot;is-active&quot; },
    markers: true,
  });
  
  </code></pre>
  <p><a href="https://i.stack.imgur.com/m9CwS.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m9CwS.jpg" alt="enter image description here" /></a></p>