Stagger Issue

[studiohic]

Hope all well

Firstly, thanks for creating ScrollScene.

I'm trying to get a stagger working on multiple elements with the same class when they come into the viewport.

The animation works perfectly other than stagger. Am I missing something very basic?! Here's my code:

let fadeElem = document.querySelectorAll('.animate'); let self = this;

fadeElem.forEach((self) => {

    const fadeTimeline = gsap.timeline({ paused: true });
    fadeTimeline.from(self, 1.5, {
        autoAlpha: 0,
        ease: 'power1.out',
        y: 75,
        stagger: 1.5,
    });
    const scrollScene = new ScrollScene({
        triggerElement: self,
        gsap: {
            timeline: fadeTimeline,
        },
        triggerHook: 1,
        duration: '50%',
    });
});

Are you able to help?

Thanks

[jonkwheeler]

Not sure why you'd set the this outside the scope. You're also mixing GSAP2 and GSAP3 syntax. Maybe try this?

const fadeElements = document.querySelectorAll(".animate");

fadeElements.forEach((fadeElement) => {
  const fadeTimeline = gsap.timeline({ paused: true });

  fadeTimeline.from(fadeElement, {
    duration: 1.5,
    autoAlpha: 0,
    ease: "power1.out",
    y: 75,
    stagger: 1.5,
  });

  const scrollScene = new ScrollScene({
    triggerElement: fadeElement,
    gsap: {
      timeline: fadeTimeline,
    },
    triggerHook: 1,
    duration: "50%",
  });
});

Warning: I highly advise against animated the same element as your scroll trigger. This is really going to mess things up. Make a different element than the scroll trigger, and hide it if you need to with opacity: 0, pointer-events: none. Otherwise you'll get jumpiness in the page.

[studiohic]

Thanks so much for your message. Clearly need to do a bit more work on getting the syntax right!

You mentioned that you would avoid animating the same element as the trigger but I’m at a loss as to how you would go about this…

Just spent the last 1.5 hours trying to work it out. I’ve done the following, added animate-trigger to the same class as the element I want to animate <div class=”animate-trigger animate”>. Added

const fadeTrigger = document.querySelectorAll('.animate-trigger');

to the JS but this makes all the elements fade after you scroll to the first .animate-trigger class.

I know this falls outside your remit but if you could point me in the right direction I would really appreciate it.

Thanks again and sorry for the pain!

James

From: Jon Wheeler notifications@github.com Reply to: jonkwheeler/ScrollScene reply@reply.github.com Date: Wednesday, 6 May 2020 at 21:14 To: jonkwheeler/ScrollScene ScrollScene@noreply.github.com Cc: studiohic studiohickie@gmail.com, Author author@noreply.github.com Subject: Re: [jonkwheeler/ScrollScene] Stagger Issue (#33)

Not sure why you'd set the this outside the scope. You're also mixing GSAP2 and GSAP3 syntax. Maybe try this? const fadeElements = document.querySelectorAll(".animate");

fadeElements.forEach((fadeElement) => {   const fadeTimeline = gsap.timeline({ paused: true });

  fadeTimeline.from(fadeElement, {     duration: 1.5,     autoAlpha: 0,     ease: "power1.out",     y: 75,     stagger: 1.5,   });

  const scrollScene = new ScrollScene({     triggerElement: fadeElement,     gsap: {       timeline: fadeTimeline,     },     triggerHook: 1,     duration: "50%",   }); });

Warning: I highly advice against animated the same element as your scroll trigger. This is really going to mess things up. Make a different element the scroll trigger, and hide it if you need to with opacity: 0, pointer-events: none. Otherwise you'll get jumpiness in the page.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[jonkwheeler]

Ideas for the code structure...

<div class="animation-container">
  <div class="trigger"></div>
  <div class="stagger-me"></div>
</div>

then

const animationContainers = document.querySelectorAll(".animation-container");

animationContainers.forEach((container) => {
  const scrollTrigger = container.querySelector(".trigger");
  const staggerElement = container.querySelector(".stagger-me");
  const fadeTimeline = gsap.timeline({ paused: true });

  fadeTimeline.from(staggerElement, {
    duration: 1.5,
    autoAlpha: 0,
    ease: "power1.out",
    y: 75,
    stagger: 1.5,
  });

  const scrollScene = new ScrollScene({
    triggerElement: scrollTrigger,
    gsap: {
      timeline: fadeTimeline,
    },
    triggerHook: 1,
    duration: "50%",
  });
});

Just have the trigger not be the div you are moving on the y axis, otherwise the ScrollMagic scene will update constantly since it's start and end position is moving (because you told it to with gsap).

[studiohic]

Legend. That makes total sense now! Can’t thank you enough…All the best. James

From: Jon Wheeler notifications@github.com Reply to: jonkwheeler/ScrollScene reply@reply.github.com Date: Wednesday, 6 May 2020 at 23:29 To: jonkwheeler/ScrollScene ScrollScene@noreply.github.com Cc: studiohic studiohickie@gmail.com, Author author@noreply.github.com Subject: Re: [jonkwheeler/ScrollScene] Stagger Issue (#33)

Ideas for the code structure...

 

 

then const animationContainers = document.querySelectorAll(".animation-container");

animationContainers.forEach((container) => {   const scrollTrigger = container.querySelector(".trigger");   const staggerElement = container.querySelector(".stagger-me");   const fadeTimeline = gsap.timeline({ paused: true });

  fadeTimeline.from(staggerElement, {     duration: 1.5,     autoAlpha: 0,     ease: "power1.out",     y: 75,     stagger: 1.5,   });

  const scrollScene = new ScrollScene({     triggerElement: scrollTrigger,     gsap: {       timeline: fadeTimeline,     },     triggerHook: 1,     duration: "50%",   }); }); Just have the trigger not be the div you are moving on the y axis, otherwise the ScrollMagic scene will update constantly since it's start and end position is moving (because you told it to with gsap).

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[studiohic]

Last question. I promise.

Let’s say I have two columns. Each column has the same ‘animated’ class. Currently when they hit the viewport they animate at the same time. How can I configure ScrollScene to stagger the animation so they don’t animate at the same time? I had assumed GSAP’s stagger would sort this out bit this doesn’t appear to be the case.

I owe you a beer or a coffee!

Thanks again

James

 

From: Jon Wheeler notifications@github.com Reply to: jonkwheeler/ScrollScene reply@reply.github.com Date: Wednesday, 6 May 2020 at 23:29 To: jonkwheeler/ScrollScene ScrollScene@noreply.github.com Cc: studiohic studiohickie@gmail.com, Author author@noreply.github.com Subject: Re: [jonkwheeler/ScrollScene] Stagger Issue (#33)

Ideas for the code structure...

 

 

then const animationContainers = document.querySelectorAll(".animation-container");

animationContainers.forEach((container) => {   const scrollTrigger = container.querySelector(".trigger");   const staggerElement = container.querySelector(".stagger-me");   const fadeTimeline = gsap.timeline({ paused: true });

  fadeTimeline.from(staggerElement, {     duration: 1.5,     autoAlpha: 0,     ease: "power1.out",     y: 75,     stagger: 1.5,   });

  const scrollScene = new ScrollScene({     triggerElement: scrollTrigger,     gsap: {       timeline: fadeTimeline,     },     triggerHook: 1,     duration: "50%",   }); }); Just have the trigger not be the div you are moving on the y axis, otherwise the ScrollMagic scene will update constantly since it's start and end position is moving (because you told it to with gsap).

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[jonkwheeler]

I'm not entirely convinced you've figured out the GSAP stagger method. This can be solved a ton of ways. Maybe just get a better DOM structure in place?

html

<section class="section-container">

  <div class="section-content">
    <div class="col col-left stagger-me"></div>
    <div class="col col-right stagger-me"></div>
  </div>

  <div class="scroll-trigger"></div>

</section>

css

.section-container {
  position: relative;
}

.scroll-trigger {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: blue;
  opacity: 0;
  pointer-events: none;
}

js

const sectionContainers = document.querySelectorAll(".section-container");

sectionContainers.forEach((container) => {
  const scrollTrigger = container.querySelector(".scroll-trigger");
  const staggerElements = container.querySelectorAll(".stagger-me");
  const fadeTimeline = gsap.timeline({ paused: true });

  fadeTimeline.from(staggerElements, {
    duration: 1.5,
    autoAlpha: 0,
    ease: "power1.out",
    y: 75,
    stagger: 1.5,
  });

  const scrollScene = new ScrollScene({
    triggerElement: scrollTrigger,
    gsap: {
      timeline: fadeTimeline,
    },
    triggerHook: 1,
    duration: "50%",
  });
});

^^ this should create a scrollTrigger that's the top right corner of the section, and out an array of stagger-me elements, thus GSAP should be able to stagger the animations of those. The element before was using querySelector which only grabs a single element. This one is using querySelectorAll which should grab all of them.

[studiohic]

Thanks again Jon.

I’ll have a look through, you’ve been an amazing help.

Have a great weekend.

James

From: Jon Wheeler notifications@github.com Reply to: jonkwheeler/ScrollScene reply@reply.github.com Date: Thursday, 7 May 2020 at 13:34 To: jonkwheeler/ScrollScene ScrollScene@noreply.github.com Cc: studiohic studiohickie@gmail.com, Author author@noreply.github.com Subject: Re: [jonkwheeler/ScrollScene] Stagger Issue (#33)

I'm not entirely convinced you've figured out the GSAP stagger method. This can be solved a ton of ways. Maybe just get a better DOM structure in place?

html

 

   

   

 

 

 

css .section-container {   position: relative; }

.scroll-trigger {   position: absolute;   top: 0;   right: 0;   width: 10px;   height: 10px;   background: blue;   opacity: 0;   pointer-events: none; } js const sectionContainers = document.querySelectorAll(".section-container");

sectionContainers.forEach((container) => {   const scrollTrigger = container.querySelector(".scroll-trigger");   const staggerElements = container.querySelectorAll(".stagger-me");   const fadeTimeline = gsap.timeline({ paused: true });

  fadeTimeline.from(staggerElements, {     duration: 1.5,     autoAlpha: 0,     ease: "power1.out",     y: 75,     stagger: 1.5,   });

  const scrollScene = new ScrollScene({     triggerElement: scrollTrigger,     gsap: {       timeline: fadeTimeline,     },     triggerHook: 1,     duration: "50%",   }); }); ^^ this should create a scrollTrigger that's the top right corner of the section, and out an array of stagger-me elements, thus GSAP should be able to stagger the animations of those. The element before was using querySelector which only grabs a single element. This one is using querySelectorAll which should grab all of them.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.