Jump to content
Search Community

Vertical scroll for divs inside a container (with multiple containers on the same page)

Frankpoint test
Moderator Tag

Recommended Posts

Hello.  First time asking for help but not the first time working with GSAP, however, I am stumped (and stuck).

 

Here's the idea:  I have a page that has multiple sections.  Each section has content to the left and to the right a figure and then a panel container (display:none) with slides inside.  When the user scrolls to each section, it should pin and then fade out the figure and then fade-in the panel container and once in view, scroll each slide vertically (each section can have variable number of panels, slides are 100% height of the container).  When all the slides are scrolled, unpin and continue with normal scroll.

 

I got the part that fades out the figure, but I don't know how to sequence so the panel container animation happens after the figure animation has finished and then how to animate the slides vertical scroll.

 

In the example, the figure's animation work, but when I add the panel container timeline, it breaks everything :(

 

Thank you in advance.

See the Pen ZEKerzy by frankpoint (@frankpoint) on CodePen

Link to comment
Share on other sites

Welcome to the forums, @Frankpoint!

 

I noticed several problems: 

  1. You're making one of the most common mistakes: nesting multiple ScrollTriggers in a timeline. It can't logically work because you can't have the timeline attempting to control the animation's playhead AND have the scrollbar (scroll position) control it too. 
  2. You had various problems with your CSS so things wouldn't line up properly
  3. You had multiple ScrollTriggers attempting to pin the same element, some of which may have overlapped. Again, it's a logical impossibility.
  4. Minor note: yPercent is a number, not a string.

As a courtesy, I took a crack at editing your CodePen to do what I think you wanted (though I may have misunderstood): 

See the Pen KKmWxQp?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I randomized the backgroundColor of your panels just so it was easier to see where they were. Obviously you can tweak that to be whatever you want. The general idea is to have ONE timeline with ONE ScrollTrigger that does the pinning, and then sequence your animations inside that (for each section). 

 

Does that clear things up? 

  • Like 1
Link to comment
Share on other sites

Jack,

 

1. Thank you so much. This is indeed what I needed to learn how to do.  Things are now clearer.

2. Should I use the duration if I want to extend the amount of scrolling necessary to display each panel or is there a better option?

 

I appreciate your time.

 

Link to comment
Share on other sites

4 hours ago, Frankpoint said:

2. Should I use the duration if I want to extend the amount of scrolling necessary to display each panel or is there a better option?

Nope. Please read this: https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

 

All you need to do is change the "end" value. So if it's "+=100%" right now, just make that number bigger. You can use px if you want, like end: "+=3000px"

  • Like 1
Link to comment
Share on other sites

  • 5 months later...
On 7/16/2021 at 1:00 AM, GreenSock said:

Nope. Please read this: https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

 

All you need to do is change the "end" value. So if it's "+=100%" right now, just make that number bigger. You can use px if you want, like end: "+=3000px"

How would you reverse the animation from "right to left" to "left to right" instead?

Link to comment
Share on other sites

18 minutes ago, Remjii said:

How would you reverse the animation from "right to left" to "left to right" instead?

Hi @Remjii. If you need some help, please start a new thread and provide a minimal demo so we can understand the context of your question and troubleshoot more effectively. There are no "right to left" or "left to right" animations in this thread, so I'm not sure what you're talking about. Once we see a minimal demo (like a CodePen), I'm sure we'll be able to offer some advice. 👍

 

Most likely you simply have to alter your animation values, like if you're animating x from 0 to -500, for example, you'd animate -500 to 0 instead. 

Link to comment
Share on other sites

@GreenSock

 

In your example above from codepen if you change the yPercent to xPercent you get the effect of right to left instead of down to up, then I assumed if you changed xPercent 1 ? 100 : 0 to xPercent 1 ? 0 : 100 but that doesn't seem to work.

 

panels.forEach((panel,i)=>{
      // first panel should start already in place, and last panel should end in the center. 
      tl.fromTo(panel, { 
        xPercent: i ? 100 : 0
      },{
        xPercent: i === panels.length - 1 ? 0 : -100,
        duration: i === 0 || i === panels.length - 1 ? 0.5 : 1,
        ease: "none",
      }, "-=0.5");
    });
Link to comment
Share on other sites

8 minutes ago, OSUblake said:

Did you try the inverse? from 100 would be on the right, to -100 would go to the left, so switch the signs.

 

 

 

Sorta, I tried this:

 

xPercent: i ? -100 : 0

 

but for some reason only two of the panels scroll instead of the 5, but yeah its scrolling in the right direction now.

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...