Jump to content
Search Community

ScrollTrigger Markers Scroll out of View

swansondesigns test

By swansondesigns
in GSAP

Moderator Tag
 Share
Go to solution Solved by mvaneijgen,

Recommended Posts

swansondesigns test

swansondesigns

Posted
Posted

Hello,

 

I know that linking to a page is a no-no, and that I should make a minimal demo, but my issue is specifically with the site where I'm trying to get this to work and not with ScrollTrigger itself (which may put this outside of the scope of this forum).

 

The basic issue is that my triggers THEMSELVES are scrolling out of view.  Like they scroll as if they are page content (I've never seem them move before).  It seems like the ScrollTrigger still fires at the right place, but since the start/end points are moving, the pinned element pins itself to the new location of the trigger point (which is now outside of the viewport).

 

I tried to document this in a couple screen captures.  I can provide a link to the actual page if that would help but since we aren't really supposed to do that I'm going to try this without it.

 

I guess my main question is this: Is this issue related to how I have configured my ScrollTrigger or is there something about the website that is messing with the way ScrollTrigger works in general?

 

For what it's worth, it works flawlessly on my local copy.  Thank you in advance for any help you can offer.

 

Graham
 

P.S.  I don't know why my uploaded screenshots are "tiling" as if they are background images.  They are just normal screenshots.

 

 

 

moving-triggers-initial.png

moving-triggers-scrolled.png

Link to comment
Share on other sites
  • Solution
mvaneijgen test

mvaneijgen

Posted
  • Solution
Posted

Can you confirm that your body is the scrollable object? You can do that by setting an overflow: hidden; on your body (or html) (then you should not be able to scroll anymore, if you still do some other element is scrolling. 

 

You can also define a scroller element within ScrollTrigger https://greensock.com/docs/v3/Plugins/ScrollTrigger maybe you're using an other element to scroll? 

 

String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself.

 

17 minutes ago, swansondesigns said:

P.S.  I don't know why my uploaded screenshots are "tiling" as if they are background images.  They are just normal screenshots.

That is what the upload tool does, throws me up sometimes too

Link to comment
Share on other sites
swansondesigns test

swansondesigns

Posted
  • Author
Posted

@mvaneijgen Thank you so much!  I'm looking into this possibility (and I think you are correct).  I think there is an element within the <body> that is scrolling, but when I set that element to be the scroller I get an error.  A closer look seems to indicate that the scrolling element is added with JS and my script is firing too soon (before the scrolling element is added to the DOM).  I don't have source access, so I'm working with some support folks to see if I can set a dependency so that the scripts fire in the right order (failing that, I may hack it with setTimout).  I just wanted to reply and say thank you right away.  It may take a bit before I can actually sort it out.  

  • Like 3
Link to comment
Share on other sites
  • 4 weeks later...
swansondesigns test

swansondesigns

Posted
  • Author
Posted

I just came back to say that @mvaneijgen was correct in identifying the issue.  I wasn't able to resolve it but that had more to do with not really having the access I need on the platform where I'm working than anything with GSAP.  If the client had more time/budget I probably could have made it work but sometimes you have to do the best you can with what you've got.  I love adding animation to my projects but sometimes other aspects of the site don't play ball.

  • 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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...