Jump to content
Search Community

ScrollTrigger pinned sections with children ScrollTrigger's - Not Resizing

Steve Eldridge test
Moderator Tag

Recommended Posts

I followed the solution on referenced posted below I was able to successfully get pinned sections to work with children scrolling.

 

However no matter what I do I can't seem to figure out how to get this solution work with resizing. The sample doesn't - wish I noticed that before I attempted to use this code as a possible solution - so now I'm stuck.

 

After we fix the resizing issues, we'll need to deal with breakpoints.

 

In my target design the scrolling will change from a vertical to a horizontally scrolling animation.

 

Since I'm so new to the library I'm playing catch.  Adapting the posted solution code trapped me in a new set of issues.

 

Note: 

       invalidateOnRefresh: true,

       And I have window.addEventListener("resize", function () {...});

       Where there is a function call to kill the ScrollTrigger and another function that is used to build the scrolling on page load that I call again after the loading but it doesn't work.

 

       ScrollTrigger.kill();
       buildScrollingAnimation();

 

I'm thinking that I'm yet another few days away from solving this issue after now having spent days getting this to work only to learn that resize and media queries are not easily done after I first learn that getting a ScrollTrigger animation to work in a page of sections also was not an easy thing to do.

 

New challenges using this library around every corner.

 

 

See the Pen 6a2480c123d88dc391faba0ea5cc590f by akapowl (@akapowl) on CodePen

Link to comment
Share on other sites

Hello there @Steve Eldridge - welcome to the forums.

 

Yeah, I noticed a couple of things with that demo - I created it from the fork of a pen of one of the peopl who asked back in this thread.

 

 

 

 

One of the main problems I see, is that while the smooth-scrollbar is being inititated on the body, the scrollerProxy() is set to the scroller (don't know why I did that tbh) - same goes for the scrollers on the ScrollTriggers - that makes it really wonky on resizes.

 

So here is a revision of that example, where that is changed.

I also changed the .to-tweens to .fromTo-tweens there and changed the order of creation of the scrollTriggers here.

 

The pinning one now is created first and the tweening ScrollTriggers in the forEach-loops use a 'trigger-wrap' wrapping the black section as the trigger element now.

 

This should definitely be working better now. I will try and make a cleaner demo when I find the time.

 

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

 

 

 

2 hours ago, Steve Eldridge said:

After we fix the resizing issues, we'll need to deal with breakpoints.

 

If you haven't yet;

For handling different ScrollTriggers for different screen-widths you'll want to take a look at ScrollTrigger's .matchMedia() - that will be immensely helpful with that and takes quite a lot from off of your head.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

 

If you need some more assistance, post a minimal demo of what you have tried so far, and we'll see how we can help you from there.

 

  • Like 3
Link to comment
Share on other sites

Thanks for the update. Seems to be working now. I'm going to take the ideas from this code and merge them into the production environment I'm working on. 

 

I was familiar with the concepts in the .matchMedia() but since the resizing wasn't able to work, I made no progress with matchMedia. 

Once I've tried the first updates, I'll proceed to with matchMedia to see if I can address how that would work in the sample you posted.

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