Jump to content
Search Community

Layered pinned animation - How to make multiple layered animations

scavaliere test
Moderator Tag

Recommended Posts

Hello everyone! 
I'm working on a website with layered pinned animations. 
The main animation is working well, however I would need to make possible that the first two sections (with a different class and nested content with a mask) works as layered pinning but with an inverted behavior. In few words: generally layered pinning make NEXT layers to overlay the PREVIOUS, while I need the FIRST section overlay the SECOND, keeping the snapping effect. After this specific animation, the next pinning animations should work as usual. 

I tried to use this snippet to control the zIndex of the first two sections without results (the animation breaks and restarts every time from top):
 

gsap.set(".panelz", { zIndex: (i, target, targets) => targets.length - i });

where ".panelz" is the class of two nested sections inside the first main section.

 

How can I solve this? 

Thank you in advance and have a nice day!

See the Pen 03bae1287c38758715b2151b016a43a3 by scavaliere (@scavaliere) on CodePen

Link to comment
Share on other sites

Hey there - I've stripped out some of this as the text animations aren't necessary for understanding.

I'm afraid I'm still a little lost though. You want the second section to go under the first section that's already in view?

You can do that with z-index but you won't see them. Here - I've set the z-index of the first panel to be higher than the red one, you wouldn't see the red one anymore. Not sure what the desired outcome is here
   

See the Pen OJvNxGO?editors=1100 by GreenSock (@GreenSock) on CodePen

 

Also worth a note - I find the lack of scrollBar and delay between scrolling and 'something' happening pretty confusing. I wouldn't try to scroll this is I was a user. I'd maybe try once and then give up. Maybe you're trying to do something like the demo in our observer docs page?
---

Let me know how we can help you! Right now I'm not really sure.

  • Like 1
Link to comment
Share on other sites

Hello @Cassie !

Thank you very much for your help!

 

Quote

Also worth a note - I find the lack of scrollBar and delay between scrolling and 'something' happening pretty confusing. I wouldn't try to scroll this is I was a user. I'd maybe try once and then give up. Maybe you're trying to do something like the demo in our observer docs page?


Well, you're completely right... but the client wants it in this way (don't ask me why).

A little question: do you think there's a way to keep the scroll without scrollbar? 

However, the example you have linked is similar to what I need to achieve but only for the FIRST scroll. So the effect should:


From 1  to 2 section: 
The first section overlaps the second, sliding out top.

 

From 2 section to next: 

The second section will be overlapped by next sections and so on.

 

About the observers, I will give it a try and I will let you know. 

Thank you again!


 

Link to comment
Share on other sites

Quote

A little question: do you think there's a way to keep the scroll without scrollbar? 

 

Well yeah technically you can - but it's terrible for user experience. I think it's our job to try and explain that to clients - but I know how it is sometimes - here's a link if you have to go ahead with it. https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

 

Quote

From 1  to 2 section: 
The first section overlaps the second, sliding out top.

Like this maybe?

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

  • Like 1
Link to comment
Share on other sites

Hello again @Cassie!
 

Quote

I think it's our job to try and explain that to clients

 

yes, exactly... but sometimes it's really really difficult to discourage useless web behavior and bad practices. Some clients have their own ideas and, believe me, it's quite impossible to convince them of the contrary :)

Coming back to the pen: yes! It's exactly what I need but I also need to keep the "fullpage" (snapping) effect and the overlap from 1 to 2 section. The others can have the same classic behavior. 

Do you think it's possible? 

 

Thank you!

Link to comment
Share on other sites

Sure - Everything is possible with enough custom code and thinking time!

I'd probably do something like this if I'm understanding? I'm not sure I'm quite getting what you mean by the 'overlap from 1 to 2 section' 

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

 

However if you need the 'fullpage' snapping effect rather than this kind of snap, you're going to need observer as it's not actually real scrolling. Have you taken a look at that demo yet? You can do anything you want with observer but it's going to be a bit more complex as you're controlling animations with user gestures rather than scrolling. 

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

 

Why don't you take a look at the docs and give it a shot? Pop back if you need help.

  • Like 1
Link to comment
Share on other sites

Hello, 

great! It's exactly what I needed! 
I will study your solution and I will take a deeper look to the demo. 
 

Quote

Why don't you take a look at the docs and give it a shot? Pop back if you need help.

... and obviously I will keep learning, as you suggested ;) 

Thank you very much for you help :)

 

  • Like 2
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...