Dynamically get content which gets overlapped

[weti]

So, hey again. I was trying to create an overlap effect. Everything works as expected. But the problem is: This approach doesn't really work in the end when we maintain the content in our CMS, because the overlap effect needs the previous element's sibling to overlap it. We probably need a wrapper before the overlap (.panel) so that all the content gets pinned, not just one module. But that's not really maintainable on the CMS side, so I was wondering if any of you had a solution for this. Maybe get all the elements before the overlap? Maybe pin the body?

See the Pen dyBjGJV by weti09 (@weti09) on CodePen.

[mvaneijgen]

Couldn't you just place the markers some where where they pin only when you want them? Just as a tip it is better to provide a demo where the issue is demonstrated, so that we can jump in directly and solve the issue or if you think it is helpful provide to demo's one with the issue (in this case more content) and another one where the issue isn't happening. 

 

Hope it helps and happy tweening! 

 

See the Pen Yzojqjb?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[weti]

Yes, sorry for my vague explanation. Here is a codepen that more closely resembles the problem I came up with. Here you can see two sections with the .content. The content of the two sections isn't really important. But I was looking for something that would pin both sections without a wrapper (which I would have to make around the two .content sections), because we use a modular approach in our CMS, and usually the element before the overlap isn't high enough for the overlap to be aesthetically pleasing. Do you have something in mind which could fix this?

https://

See the Pen dyBjGJV by weti09 (@weti09) on CodePen.

[mvaneijgen]

I see you're having trouble with pasting the Codepen link, just paste the URL you get directly out of the browser and paste it without any styling if that isn't working, try removing the https:// and www. and change codepen.io to codepen.com let the rest of the url intact

[weti]

I mean its still not showing here, but you can copy the link.

 

[mvaneijgen]

The only thing I can think of is wrapping the content in a wrapper and using that as the pin. 

 

See the Pen jOjpMzg by mvaneijgen (@mvaneijgen) on CodePen.

[weti]

Hmm, okay. Then I have to think about something else...

[Rodrigo]

Hi,

 

You can create a single ScrollTrigger instance for each element and use the previous() method to get the start of the previous content's ScrollTrigger instance:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/previous()

 

Something like this:

const contents = gsap.utils.toArray(".content");

contents.forEach((content, i) => {
  if (i) {
    ScrollTrigger.create({
      trigger: content,
      start: (self) => self.previous().start,
      end: "+=110%",
      pin: true,
      pinSpacing: false,
      markers: { indent: 150 * i },
      id: i+1
    });
  } else {
    ScrollTrigger.create({
      trigger: content,
      start: "top top",
      end: "+=110%",
      pin: true,
      pinSpacing: false,
      markers: { indent: 150 * i },
      id: i+1
    });
  }
});

Here is a fork of your demo:

See the Pen VwJBpMM by GreenSock (@GreenSock) on CodePen.

 

Now as Mitchel mentions the 100% bullet proof solution for this case is to  wrap everything in a common parent and pin that element. Pinning two siblings could have some unexpected results depending on the HTML layout and the styles you have in place.

 

Hopefully this helps

Happy Tweening!

[NicoleMontoya]

  

On 8/28/2024 at 9:14 PM, Rodrigo said:

Hi,

 

You can create a single ScrollTrigger instance for each element and use the previous() method to get the start of the previous content's ScrollTrigger instance:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/previous()

 

Something like this:

const contents = gsap.utils.toArray(".content");

contents.forEach((content, i) => {
  if (i) {
    ScrollTrigger.create({
      trigger: content,
      start: (self) => self.previous().start,
      end: "+=110%",
      pin: true,
      pinSpacing: false,
      markers: { indent: 150 * i },
      id: i+1
    });
  } else {
    ScrollTrigger.create({
      trigger: content,
      start: "top top",
      end: "+=110%",
      pin: true,
      pinSpacing: false,
      markers: { indent: 150 * i },
      id: i+1
    });
  }
});

Here is a fork of your demo:

 

 

 

Now as Mitchel mentions the 100% bullet proof solution for this case is to  wrap everything in a common parent and pin that element. Pinning two siblings could have some unexpected results depending on the HTML layout and the styles you have in place.

 

Hopefully this helps

Happy Tweening!

To achieve an overlap effect that remains maintainable within your CMS, consider using CSS Grid or Flexbox for layout, as they provide more control over element positioning without needing additional wrappers. For example, with CSS Grid, you can place overlapping elements in the same grid cell, allowing them to overlap while maintaining a clean CMS structure. Alternatively, use absolute positioning within a relative parent container to manage overlap without affecting the overall layout. If using absolute positioning, ensure the parent container's dimensions are well-defined to avoid layout issues. This way, you can manage overlaps without extensive modifications to the CMS structure, keeping it more maintainable. Nowadays, writing an essay assignment is very difficult task for students and I would like to help those students by sharing the https://www.topessaywriting.org/buy-college-essays website with you. I have shared it because TopEssayWriting specializes in helping students with academic papers, including essays and research projects. It boasts professional writers, quality assurance through plagiarism checks, and customer support to aid in meeting academic goals.

 

Thank you so much for the help.

[AntonioNB4]

11 hours ago, NicoleMontoya said:

Thank you so much for the help.

Or something like this , with overlapping stacked panel

See the Pen vYqbjRo by Antonio-Nocella (@Antonio-Nocella) on CodePen.