Jump to content
Search Community

ScrollTrigger combined with div that has inner scroll.

Saltbox test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hello everyone!

 

I am trying to achieve some type of animation that seems to be a little bit hard to implement for me.

I want a user to scroll a page till they reach a desired block (a text block) where only part of it is visible.

When block hits top of the viewport it should grow to 100vh and start scrolling to show the content inside. When scrolled to the bottom of text block the page should continue scrolling down. On scrolling up to the page the animation should reverse.

 

I seem to be facing a couple of issues with my current progress:

1. When I scroll to the text block or scroll out of it sometimes it feels like I should scroll one more time or move a cursor to make scroll work. Looks like it's 'focusing on/out " of inner scrollbar. It's very well seen when you scroll with a mouse, not touchpad. 

2. When I scroll down the page and start scrolling up if the cursor is hovering over even the smallest part of my text block it starts scrolling it. I would like the block to take the whole screen and only start scrolling after that. I guess I need second scrollTrigger instance for that? 

 

Thanks in advance for your help! I am only discovering the world of GSAP, so pardon me if the question is simple. I was searching the forum for quite a while to find something similar and didn't succeed.

See the Pen poKyNyN by turnhandup-the-sasster (@turnhandup-the-sasster) on CodePen

Link to comment
Share on other sites

Hi @Saltbox and welcome to the GreenSock forums!

 

First thank you for being a Club GreenSock member and supporting GSAP! ?

 

I would advise you to not use that particular approach since, as you have already experienced, can have some odd/mix results. IMHO is far better to just animate the scrollable content in that section as part of the same ScrollTrigger instance or another.

 

Hopefully this example can provide inspiration on this particular scenario:

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

 

As you can see this approach is used in two different sections on the example with a fixed height value on each, but you could easily translate that to a full screen height without a lot of issues.

 

Hopefully this is enough to get you started. Let us know if you have more questions.

 

Happy Tweening!

Link to comment
Share on other sites

@Rodrigo many thanks for that example! It's really nice and I love that it's not having this glitch moment I have :D 

The only thing is - I want the block not to be full height first and grow on scroll. I think screenshot from the designs will explain it so much better than I do. I want the section to be overlayed and grow on scroll till it takes the whole screen and then make it feel like the content (cards) is moving inside this section. 

Pretty much like something I did for slider there https://saltbox-new.webflow.io/dc-alexandria, but after it takes the whole screen it should scroll the content to the bottom. That's my tricky part, because I cannot figure out how to make it without inner scroll :) 

Знімок екрана 2022-11-03 о 18.46.56.png

Link to comment
Share on other sites

  • Solution

Hi,

 

As I mentioned, having scroll on the item and also on the main element without causing issues can be a tricky scenario. You'd have to stop the event propagation while the inner content is being scrolled in every device.

 

I still think my suggestion is simpler and easier. Here is a proof of concept based on your codepen example (thanks for creating such a simple one, those are the ones we love around here! ?)

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

 

Hopefully this helps you get started.

 

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

On 11/3/2022 at 10:26 PM, Rodrigo said:

Hi,

 

As I mentioned, having scroll on the item and also on the main element without causing issues can be a tricky scenario. You'd have to stop the event propagation while the inner content is being scrolled in every device.

 

I still think my suggestion is simpler and easier. Here is a proof of concept based on your codepen example (thanks for creating such a simple one, those are the ones we love around here! ?)

 

 

 

Hopefully this helps you get started.

 

Happy Tweening!

Thank you so much! Extremely helpful and simple implementation. Exactly what I've been looking for.

Adapted it a little bit and already implemented on the website - https://saltbox-new.webflow.io/

 

Many thanks for your help and taken time! (you saved tons of mine :) )

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