Pinning question with variable height of sections

[qbits OG]

hey,

 

i have tried several solutions so far, but still no luck. Any help would be really appreciated. #fingerscrossed

 

What I'm trying to do, is that I have sections below each other, not layered. they should scroll up, should be pinned on top and the height of the content should be increased while scrubbing down. however, due to the fact that the height is initially not known, the scroll triggers are wrong...obviously. All examples I could find were layered sections. however, I need to have them in relative order.

 

I'd like to have the effect, that scrolling should increase the height (best with same scrubbing speed no matter of the end height) of the content and push the upper part (title, subtitle and previous section up). When the section is done, the next one should appear from the bottom and push the previous one up. I made a quick codepen to give a a glance of what I tried so far (setting height to 0 after ScrollTrigger, using .FromTo().

 

im out of ideas here...

 

Best Regards,

Daniel

See the Pen LYgymza by weareqbits (@weareqbits) on CodePen

[Rodrigo]

Hi @qbits OG and welcome to the GreenSock forums!

 

First thanks for being a Club GreenSock member and supporting GreenSock! 💚

 

The only alternative I can think of is to offset the starting points of the ScrollTrigger instances considering the height of the content that will be expanded. For that you'll have to add an extra wrapper to your collapsible content in order to correctly get that amount of pixels:

let cumulativeHeight = 0;

gsap.utils.toArray(".process-step").forEach((element, index) => {
  let tempTimeline = gsap.timeline();
  let processContent = element.querySelector(".process-step-content");
  const content = processContent.querySelector(".content");

  tempTimeline
    .addLabel("process-step")
    .to(element, { opacity: 1, duration: 0.5 }, "process-step")
    .fromTo(
      processContent,
      { height: 0 },
      { height: "auto", duration: 1, ease: "none" },
      "<+=0.25"
    );

  ScrollTrigger.create({
    trigger: element,
    start: "top+=" + cumulativeHeight + " 35%",
    end: () => "+=" + content.clientHeight,
    animation: tempTimeline,
    scrub: true,
    markers: { indent: 150 * index },
    id: index,
    invalidateOnRefresh: true
  });
  cumulativeHeight += content.clientHeight;
});

Here is a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening!

[qbits OG]

hey man,

 

thanks for the fast response. I'm still trying to figure out, why you need to move the timeline position by 0.25? I'm just curious. Let's assume I want to pin the left part now, so the step circle says as long as the section is "active", would you do that with yPercent or with a seperate ScrollTrigger and pin:true?

[Rodrigo]

2 hours ago, qbits OG said:

I'm still trying to figure out, why you need to move the timeline position by 0.25? I'm just curious.

By default every GSAP instance has a power1.out ease function, so the animation will start a bit faster and then slow down, soto speak. So waiting for the opacity animation of the header to be completed seemed a bit overkill. IMHO no need to wait until is finished. Since it lasts 0.5 seconds I set the position of the next animation when the 0.25 seconds after the opacity animation starts. Just a personal preference, nothing more. You can remove  it if you want.

 

About pinning, I fiddled around with the latest codepen and I couldn't find a way to do that. Maybe you could try different HTML structures in order to make each process step an individual element and not an element that is contained by a parent one. I tried creating a different ScrollTrigger instance that pins the entire container but it doesn't seem to work as expected. Again maybe a different HTML and CSS setup could work:

const steps = gsap.utils.toArray(".process-step");

steps.forEach((element, index) => {
  let tempTimeline = gsap.timeline();
  let processContent = element.querySelector(".process-step-content");
  const content = processContent.querySelector(".content");

  tempTimeline
    .addLabel("process-step")
    .to(element, { opacity: 1, duration: 0.5 }, "process-step")
    .fromTo(
      processContent,
      { height: 0 },
      { height: "auto", duration: 1, ease: "none" },
      "<+=0.25"
    );

  const st = ScrollTrigger.create({
    trigger: element,
    start: "top+=" + cumulativeHeight + " 35%",
    end: () => "+=" + (content.clientHeight + 150),
    animation: tempTimeline,
    scrub: true,
    markers: { indent: 150 * index },
    id: index.toString(),
    invalidateOnRefresh: true
  });
  stInstances.push(st);
  cumulativeHeight += content.clientHeight;
});

const test = ScrollTrigger.create({
  trigger: steps[0],
  pin: ".process-container",
  start: "top 35%",
  end: (self) => self.previous().end,
  id: "container",
  markers: {
    indent: 600,
    startColor: "fuchsia",
  },
});

As I mentioned I would try removing those parent containers and make each step a direct child of the body tag. Unfortunately we don't have the time resources to create custom solutions for every user's requirements. Sometimes we do that when is not too complex and time consuming, but in this case I can't go beyond what I've already provided. You can contact us on a consulting basis or you can post in the Jobs & Freelance forums in order to get help there.

 

Good luck with your project!

Happy Tweening!

[qbits OG]

thanks. that's more help that I would have imagined. thanks for the time, I will take your suggestions into account. pretty sure I will find a solution on my own. I'm happy we at least could find a solution for the height thing.

 

THANKS!