Jump to content
Search Community

Scrolling through items within fixed item

CindyDB test
Moderator Tag

Recommended Posts

I have a fixed element within a section and need to scroll the siblings over it. The reason for this is that I'm using a video background rather than just an image. The first item shows, but the siblings don't scroll up if the video element is set as fixed. I can't figure out how to scroll those items up and over the fixed section?

 

Thanks!

 

 

See the Pen ZEpzdYX by themetailor (@themetailor) on CodePen

Link to comment
Share on other sites

Hey @CindyDB

 

I tried, but I really couldn't see through all that code you have there, it's just too much.

 

So I prepared a demo from scratch to show a possible solution on how to tackle this.

 

First some notes:

I wouldn't restrict that section containing the video to 100vh and set overflow: hidden to it, but instead wrap the video in a div, set that wrap to the neccessary height and overflow hidden. This way you can easily pin the video-wrap instead of the section, and all the rest contained within that section will scroll freely as it's supposed to. Also, I'd use position: absolute for that positioning that instead of position: fixed.

 

You can then in your pinning ScrollTrigger for that section, instead of setting an end of '+=100%', set an endtrigger, e.g. to the div containing your icons (circles in my demo) and the end to 

 

end: () => 'bottom top-=' + window.innerHeight,

 

so the pinning will stop one window height after the bottom of that icon-container has hit the top - which covers the duration you pin and animate the upcoming section (which I hope is what you intended, because I'm not 100% sure I got that right).

 

 

On a sidenote:

One thing I noticed is that you use

 

pinspacer:false,   

 

in some of your ScrollTriggers. I don't think that is something valid.

What you probably meant was pinSpacing: false

 

 

Here is the demo I mendtioned

 

See the Pen 03d8ddeb27bd473135b4e7f84cdc16c2 by akapowl (@akapowl) on CodePen

 

 

Hope this all makes sense to you.

 

Cheers,

Paul

 

  • Like 5
Link to comment
Share on other sites

 

Glad to hear, it helped :) 

 

On 11/30/2020 at 12:42 PM, CindyDB said:

If I want to fade in the circles as the appear on the screen, where would I put that now? 

 

 

That probably depends on what would work best in your set up, and what would be easiest for you to wrap your head around.

 

 

You could for one do so by adding a timeline-animation with a staggered tween on the circles to that video-wrap-pinning ScrollTrigger.

I had to add an empty tween with a duration of 1 on there, just to make sure the timeline had the right length for this to work.

 

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

 

 

Or you could loop over all your circles and for each circle create a ScrollTrigger of its own. 

This way you'd probably have more control and easier comprehensibility over how and when to do what to each circle.

 

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

 

 

 

  • Like 2
Link to comment
Share on other sites

  • 10 months later...

Hello, 

 

I'm trying to do something similer, but unfortunately not all the pinned content appears - at the moment it ends with the thrid section but there are five.

Moreover, I would like to show each image_container (grey section) simultaneously to the apperied pinned text (.layer-story-content-wrapper) - my suggestion would be to do it with adding a z-index style to wished image. Does anybody know how I could do it? 

 

See the Pen vYZqjaw by jankout (@jankout) on CodePen

Link to comment
Share on other sites

@jenda it isn't clear to me exactly what you're asking, sorry. You'll have a much better chance of getting an answer if you just ask one question and have a minimal demo focused only on the simplest implementation of that. I don't see any images in your layout when I give it a cursory glance. I don't have a lot of time to wrap my head around everything in that demo. We're happy to answer any GSAP-specific questions but things like "please show me how to do ____, ____, and ____ in my project" are a bit beyond the scope of help we generally provide in these forums. :)

Link to comment
Share on other sites

  • The first issue: I need to force the first pinned container (layer-story-box) to scroll untill the whole texts appear and desappear. 
  • The second issue: I would like to show the texts and news images simultaneously. But the texts are overe the images. I would like to puzzle the whole image and add the texts to the news image pieces. This is my goal. 

I updated the demo. Is it clear more now? 

Link to comment
Share on other sites

Hey Jenda,

If you just want to the container for the duration of the timeline you can do this -

 

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".layer-story-box",
    scrub: true,
    pin: true,
    start: "top top",
    end: '3000px',
    markers: true
  }
});


I also positioned your text boxes absolutely so that they're on top of each other.

Adjusted pen 

See the Pen eYEmdrm?editors=0011 by GreenSock (@GreenSock) on CodePen

  • Like 3
Link to comment
Share on other sites

Hello @Cassie, thank you very much for your help. 

 

What if I would like to have it more dynamicale it means that the end of the animation will be (re)calculated by the ScrollTrigger according to the content height? At the moment, we set the heigt of the main wrapper (layer-story-box) manually because the items we animate are positioned absolutelly. But in my case it must be (re)calculated dynamically because there will be different number of items. Is it obligade to set the position to absolute? 

 

Would it be possible to (re)calculate the content height and set it to the ScrollTrigger? I guess I could use something like this? 

 

let contents = document.querySelectorAll('.image-container')
let contentHeight = gsap.getProperty(contents, "height");

 

Link to comment
Share on other sites

@OSUblake, thank you for your response.

 

At the moment, I set for the trigger end '3000px', but I would like to have this value dynamical because my users will have different number of items there. So I need to calculate the height of the trigger dynamically. Hopefully I express it clearly. 

 

Would it be possible to use something like this to get the height of all images (or something else with a clear height) there and use this value as trigger end? 

let contents = document.querySelectorAll('.image-container')
let contentHeight = gsap.getProperty(contents, "height");

 

Here my .js 

 

gsap.registerPlugin(ScrollTrigger);

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".layer-story-pinned-content",
    scrub: true,
    pin: true,
    start: "top 30",
    end: '3000px',
    //endTrigger: '.layer-story-pinned-content',
    markers: true
  }
});

tl.from(
  ".layer-story-content-wrapper",
  { y: 20, autoAlpha: 0, stagger: 0.5 },
  0
).to(
  ".layer-story-content-wrapper",
  {
    y: 0,
    autoAlpha: 0,
    stagger: 0.5
  },
  0.4
);
tl.from(
  ".layer-story-image",
  { y: 0, autoAlpha: 0, stagger: 0.5 },
  0
).to(
  ".layer-story-image",
  {
    y: 0,
    autoAlpha: 1,
    stagger: 0.5
  },
  0.4
);

 

See the Pen ZEJOypz?editors=0100 by jankout (@jankout) on CodePen

Link to comment
Share on other sites

If you just want to scrub for the length of the pinned-content div you can do this...

 

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".layer-story-pinned-content",
    scrub: true,
    pin: true,
    start: "top 30",
    end: 'bottom top',
    markers: true
  }
});


Does that help?

Alternatively you could use functional values
 

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".layer-story-pinned-content",
    scrub: true,
    pin: true,
    start: "top 30",
    end: () => `+=${elem.offsetHeight}`
    markers: true
  }
});

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...