Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
JonesLafuente

New user - loving ScrollTrigger so far...

Recommended Posts

But I have a question I am hoping someone can answer. I am building a full browser image parallax site but one section needs to scroll within it so it needs to be pinned until the last item has reached its end and then the whole page continues. Problem I have is when I have the parallax images working the pinning doesn't. When I disable the parallax it works perfectly.

 

Note this is for a client so am unable to share at the moment but they now only want the full images with parallax, not as we had originally intended with text animating as well. I am wondering if I need to  look at SmoothScroller to do the parallax and pinning?

 

All thoughts welcome. Am loving this so far...

 

Thanks

Link to comment
Share on other sites

  • JonesLafuente changed the title to New user - loving ScrollTrigger so far...

Welcome to the forums, @JonesLafuente. Very happy to hear you're enjoying the tools thus far. 

 

It's pretty much impossible to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

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

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

And yes, ScrollSmoother has built-in parallax features and work seamlessly integrate with ScrollTrigger. 

Link to comment
Share on other sites

Thanks for the info, I did as you suggested and stripped everything back. I had used the full image parallax example and this didn't work so looked at the data-speed version. This works when I use the data-speed attribute on just the bg image inside the main slide container. Will post an example when I can in case anyone else has this issue. Thank you once again!

Link to comment
Share on other sites

Ok, so as I mentioned I am really loving what can be done with ScrollTrigger and am also looking at SmoothScroller.

 

I think I may have to join Club Greensock but before I do can somebody tell me if the following is possible in either ScrollTrigger or SmoothScroller and if either is preferable.

 

I want to have a pinned container that will have content that scrolls vertically within. It may be 2x, 3x or greater than the container height, it may also be dynamic content. Just thinking ahead here. Is it fairly straightforward to determine the height of the container (eg 100vh) and then the height of all the content within. I have examples that all work when you know the fixed size and number of items in the content.  Also can this these values be calculated or updated if the user clicks a button to show more?

 

I know I now need to look through the videos again and read the documentation but hoping if one is more suited over the other then someone can guide me.

 

Thanks

 

JL

  • Like 1
Link to comment
Share on other sites

Hey there!

 

You can try all of our bonus plugins for free on CodePen, CodeSandbox or locally using our gsap-trial npm package. So you can test this out before joining Club GreenSock.

 

10 minutes ago, JonesLafuente said:

 Just thinking ahead here. Is it fairly straightforward to determine the height of the container (eg 100vh) and then the height of all the content within.

You can do this with JS 

 

clientHeight:

returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin

 

offsetHeight:

is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.

 

scrollHeight:

is a measurement of the height of an element's content including content not visible on the screen due to overflow

  • Like 2
Link to comment
Share on other sites

JS for logic and calculations,

 

ScrollTrigger for triggering animations or functions on scroll

ScrollSmoother for creating smooth scrolling.

ScrollTrigger's callbacks and GSAP's utilities will certainly make the JS logic easier and give you some shortcuts and callbacks to hook into, but at the end of the day - most of the stuff you mentioned will just need to be written out in JS. 

  • Like 1
Link to comment
Share on other sites

Thanks for all the guidance but I am struggling a bit. I have made demo and all working except I am trying to determine the height of the pinned content and get that to scroll with the pinned container until it has scrolled and then continue. I either get 3 of the 4 scrolling or in this case I get an additional item, so have 5.

 

See the Pen MWQEvXW by brian-jones (@brian-jones) on CodePen

Link to comment
Share on other sites

Cassie, thank you so much. I still have a lot to learn but enjoying it.

Link to comment
Share on other sites

Glad to hear! 🥳

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