Jump to content
Search Community

Scroll Trigger, with child position:sticky element

deJardine test
Moderator Tag

Recommended Posts

Hi there,

This might be an edge case, but I'm trying to create a position:sticky element inside a scrolltrigger. It seems to incorrectly stick the position the "Sticky Bar" div as the parent uses a translate to pin the scrollTrigger (which affects the position of the sticky bar).

Are there any workarounds for this type of setup?

 

 

See the Pen BaZgWOj by grafiknz (@grafiknz) on CodePen

  • Like 1
Link to comment
Share on other sites

You really can't have two nested pinned elements simultaneously. In other words, you're trying to pin an element whose ancestor is also simultaneously pinned. You could just tell that nested element's ScrollTrigger to start when the ancestor's is finished. In this case, it's simple because we can use the .previous() method to grab that ScrollTrigger and use its end:

start: self => self.previous().end

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

 

Is that what you're looking for? 

  • Thanks 2
Link to comment
Share on other sites

  • 6 months later...

@GreenSock Thank you for your answers.

I have two fixed menus on a page, and the top menu should be hidden when you scroll up.
Is it possible to make the position of the bottom fixed menu when scrolling upwards not start from zero, but depend on the height of the top menu and when scrolling upwards both the top and bottom menu will be visible.

See the Pen dydXamm?editors=1111 by Wikt (@Wikt) on CodePen

 

Link to comment
Share on other sites

I read your post a few times and I don't really understand what you're asking.

 

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "here are my list of requirements, please show me how to build it" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Lastly, it's typically best to create a new thread instead of piggy-backing on very old ones. 

  • Like 1
Link to comment
Share on other sites

  • 5 months later...

Hi all, following this thread old (sorry)

On this sticky sections 

See the Pen RwydaLr by DedaloD (@DedaloD) on CodePen

 is it possible to any scrolltrigger animation inside some of sticked containers, while they come into viewport?

I couldnt use a pin because, on the full project, there's a container with smooth scroll (kinda like with translate 3D and a fixed body) and this breaks any. pinned section. (I tried also with scroltrigger's rules: Repaint, scroller.. nothing worked.)

Do I need to use intersection observer? Example (just to say something): scale each "chapter" title:  to(1.2)

Just to know, thanks

Link to comment
Share on other sites

Hi @Dennyno,

 

I don't have a lot of experience with sticky elements, so I can't offer a lot of advice on how to use ScrollTrigger in a general setup fashion.

 

But keep in mind that one of the key things ScrollTrigger does is keep track of when an element is in the viewport or between two different points of the document, so that can be achieved in a rather simple way:

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

 

Now I can't guarantee you that this will work flawlessly on every single browser, but the testing I did on the latest Firefox and Chrome on Ubuntu 20 and 22 seem to work as expected.

 

Let us know if you have any other question.

 

Happy Tweening!

Link to comment
Share on other sites

8 hours ago, Dennyno said:

I couldn't use a pin because, on the full project, there's a container with smooth scroll (kinda like with translate 3D and a fixed body) and this breaks any. pinned section. (I tried also with scroltrigger's rules: Repaint, scroller.. nothing worked.)

Did you try pinType: "transform"? Just curious. If your pinned element is inside a container that has ANY transform applied, the browser creates a new stacking context and then position: fixed behaves in a COMPLETELY different way (treats the transformed parent as if it's the "viewport", moving with it...this is a browser thing, not a GSAP thing).

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

 

On 10/15/2022 at 7:21 PM, GreenSock said:

Did you try pinType: "transform"? Just curious. If your pinned element is inside a container that has ANY transform applied, the browser creates a new stacking context and then position: fixed behaves in a COMPLETELY different way (treats the transformed parent as if it's the "viewport", moving with it...this is a browser thing, not a GSAP thing).


@GreenSock Jack, never mind, but "display:contents" has been a killer trick to solve the problem with the transforming (fixed/sticky) container!

This is something totally cool. Even if.. I guess, the smooth scroll feature is mitigate using this CSS rule, but could be an easy fix to test both, as needed, without touching other libs (if present), nor removing Scrolltrigger / Scrollsmoother :)

 

  • Like 2
Link to comment
Share on other sites

On 10/15/2022 at 7:04 PM, Rodrigo said:

Hi @Dennyno,

 

I don't have a lot of experience with sticky elements, so I can't offer a lot of advice on how to use ScrollTrigger in a general setup fashion.

 

But keep in mind that one of the key things ScrollTrigger does is keep track of when an element is in the viewport or between two different points of the document, so that can be achieved in a rather simple way:

 

 

 

Now I can't guarantee you that this will work flawlessly on every single browser, but the testing I did on the latest Firefox and Chrome on Ubuntu 20 and 22 seem to work as expected.

 

Let us know if you have any other question.

 

Happy Tweening!

Just seen now this solution!
This is an extra thing I'd have needed latelly, so thanks twice :) Jack!

Now, talking for talking, and going deep:

Using the text scramble plugin, or any other (gonna check in all gsap premium extensions, maybe the split-text one):

Is possible to scramble text from dots, to reveal text dinamically? Is not a "real random shuffle" as GSAP Scramble does, but more a "replace".. hope getting understood. :)

Example:

"...." became "hello" by scrolling?

This can be done manually with 2  absolute elements, just asking if is doable in plain JS, avoiding to write twice the markup each time...

Thanks, below an example with the "manual markup way".

See the Pen zYzPryN by Mamboleoo (@Mamboleoo) on CodePen

Link to comment
Share on other sites

5 minutes ago, Cassie said:

This is the way I'd do it, Nice and accessible with the aria hidden too.

Good job!


Hi Cassie, nice to hear from you! PS I'd like to get one of your hats! 🧢  😅

Btw, is this something doable via js?

Basically: split this text, then cloneNode, then change each char to a dot, then again create an aria-hidden elem and append after the original node?
Or this way is too tricky?

*not asking to do it, and I don't actually need it, just to know something new and learn  🤙

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