Start positions for animations are off due to pinned element

[TwoPointO]

Hi all,

 

We're just getting started with the whole GSAP animation library and we ❤️ it! That being said, starting with something new usually ends with a bunch of questions

 

We are running into an issue with Scrolltrigger:

Our page consists of multiple sections. 

When the second section hits the top of the window, it gets pinned.
Inside the section, some animations get fired, based on scrub:true.
BUT when this second section is pinned (you see the bottom of the section at the top of the image), it pushes down the start and end position for the animations of the third section (the section with the shield, start and end are in green & blue). The start and end positions should be aligned at the center of the section.
It's because of the pinSpacing: true on the second section, but can this be reset when the pinned element is unpinned?

 

Code for the second section:

 

//create a timeline
const timelineTwo = gsap.timeline();

// create a scrolltrigger to make the sectionTwo section sticky (pinned)
const sectionTwo_animation = timelineTwo.to("#sectionTwo", {
  scrollTrigger: {
    trigger: "#sectionTwo",
    start: "top top",
    end: "bottom top",
    scrub: true,
    pin: "#sectionTwo",
    pinSpacing: true,
    fastScrollEnd: true,
    invalidateOnRefresh: true,
    anticipatePin: true,
    onLeave: self => {
      let scroll = self.scroll() - (self.end - self.start);
      self.refresh();
      self.kill();
      self.scroll(scroll);
      timelineTwo.progress(1);
    },
  },
});

// while the section is pinned, animate the bullets in the section
// fade in the bullets with their associated image at the sime time, bullet by bullet.
document
  .querySelectorAll("#sectionTwo_bullets li")
  .forEach((bullet, index) => {
  const assigned_image = `#${bullet.dataset.image}`;
  const opacity_image = gsap.getProperty(
    assigned_image,
    "opacity",
  );

  // create a separate timeline animation for the parallel loading the images
  const bulletTL = gsap.timeline();
  bulletTL
    .fromTo(
    assigned_image,
    { opacity: opacity_image },
    {
      opacity: 1,
    },
  )
    .fromTo(
    bullet,
    { opacity: 0 },
    {
      opacity: 1,
    },
    "<",
  );
  
  // set up a scrolltrigger to scrub trough the bullet list, to animate the fading in of the bullets and their image, when scrolling.
  ScrollTrigger.create({
    once: true,
    trigger: bullet,
    start: `top+=${150 * index} top`,
    end: `bottom+=${150 * index} top`,
    scrub: true,
    markers: {
      startColor: "#00FF00",
      endColor: "#0000FF",
    },
    animation: bulletTL,
    onEnter: () => bullet.classList.add(style.active_bullet),
  });
});

// in the second section there is also an image that needs to fade in at the end of the bullet scrub.
const sectionTwo_download = timelineTwo.fromTo(
  "#sectionTwo_download",
  {
    opacity: 0,
  },
  {
    opacity: 1,
    scrollTrigger: {
      trigger: "#sectionTwo_download",
      start: "top 50%",
      end: "top 80px",
      scrub: true,
    },
  },
);

 

Last question: is there an example on how to handle timelines in a pinned element?

The white section holds a list of images that need to fade in on scrub, then some other animation etc... But how can you keep that element pinned until the last animation is complete?

 

Unfortunately, I cannot provide a pen at this point, since this is all under an NDA. But if more info is needed, I can provide as much as possible...

 

Thanks a bunch!
 

See the Pen bGajyVQ by mariovde-iio (@mariovde-iio) on CodePen

[Trapti]

hey, Welcome to the forum! 

I didn't understand your first question. 
For running a timeline on pin you can refer to this example 

See the Pen gOabMXv?editors=1010 by GreenSock (@GreenSock) on CodePen

 

[TwoPointO]

@Trapti thanks for the reply

I've updated the original question

[mvaneijgen]

@TwoPointO it really helps if you can provide a minimal demo. I would figure that your code is not under NDA and you can use any text and images you want, so just use some images from unsplash.com and Lorem ipsum and you're good to go. 

[Cassie]

Hey there! 

Welcome to the GSAP forums and thanks for joining club GreenSock.

We ask for minimal demos because it's really hard to understand what someone's after by text and code snippets alone. We don't need all your code - so don't worry about NDA's, more code makes things far more confusing than is necessary too.

 

Just think 'boxes' - add some simple sections and coloured divs, use the bare minimum possible to explain your issue.

[Cassie]

Haha, snap. 😂

[TwoPointO]

Hi all... @Trapti @mvaneijgen @Cassie I've added a minimal version in codepen

 

You'll see that the pinned second section pushes down the start and end markers for the third section.

Also: if you see any improvement regarding use of timelines and scrolltriggers, please share :)!

[akapowl]

 

Hello @TwoPointO - let me join this party  

 

are you by any chance working with @mariovde ? ...because this example reminds me of this recent post:

 

 

 

 

Your problem is related to the once-scrubbing-and-then-killing method being a bit fuzzy in your example. As to be seen in one of the threads I linked to in that other thread, you will need to call ScrollTrigger.refresh() - not self.refresh() - and you will need to call it after the ST was killed, thus after the layout change; otherwise it will have no effect. I just copy-pasted @OSUBlakes solution from over there to your pen and it shows a clear difference.

 

That being said, you might need to rethink the way you want to handle the ScrollTriggerring further down the page, because as it looks now, you won't even have enough scrolling-space for things to be triggered properly. I could barely just see the beginning of that icon in the shield being drawn and then the page ran out of space to scroll - so I added a pin to show how you could possibly omit that one way.

 

For any other issues this might still have it would be awesome if you could further reduce this for another thread. Happy scrolling!

 

See the Pen qBpMWNr by akapowl (@akapowl) on CodePen

 

[mvaneijgen]

@TwoPointO I've taken a look and I can't make heads or tails of your code. There is code for an animation called five and six but that is nowhere in your HTML. What I do recommend is not having so many scrollTriggers, take another look at @Trapti their suggestion, you can do multiple animations within one scrollTrigger, so there is no need to have a scrollTrigger for each bullet.

 

Maybe take a look at https://greensock.com/st-demos/ there are a lot of great demo's. Maybe you can find one that does something similar to what you want to do and use that code as a starting point.

[TwoPointO]

Thanks all for the replies!

yes, Mario is a colleague of mine, I didn't know he posted this already. My apologies!

@mvaneijgen yes, there are more animations on the page than I put in the html.