Jump to content
Search Community

Pin elements with ScrollTrigger

Superloop test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

  • Solution

You should always create your ScrollTriggers in the order they appear on the page, particularly when pinning because things further up on the page could affect things lower. In your demo, you're creating ALL the image ScrollTriggers first even though some of them are BELOW the ".slider" ones. So when refreshing, by default it would calculate all the start/end positions in that order but the images below the ".slider" would actually get pushed further down due to the pinning of that slider. 

 

See the issue? 

 

There are several solutions. If you're creating things out-of-order, you can define a refreshPriority for each to control the order things get refreshed. Or in your particular case, you could simply add a ScrollTrigger.sort() call at the end of your code which uses the "start" values to order things. Your setup allows for that to work. 

 

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

 

Does that clear things up?

  • Thanks 1
Link to comment
Share on other sites

  • 1 year later...

Hello @GreenSock,

 

How would you make an element with a ScrollTrigger (also with a pin set to true) of a height of 100vh (full viewport height) maintain its current position even while resizing?

I have tried scrolling the element back to the current view and also using Window to try to set the scroll position to the element but doesn't seem to work.

Thank you for any assistance you can offer on this.

Link to comment
Share on other sites

Hello @Rodrigo

 

Thank you but this is not what I was talking about.

What I was talking about was concerning responsiveness, let's say I was a developer / user of a site and I clicked on the inspect tab to check the web resources loaded and I returned back to the site after checking the gsap animation gets displaced in a weird way and So I want to return the user properly to the gsap animation when displaced so they can continue scrolling through the animation till they finish.

 

I thought about using ELEMENT.scrollIntoView() or Window.scrollTo() to put the gsap animation back into view but none worked and also on mobile, the animation becomes jittery.

Maybe this might help, here is a link to understand better what I'm talking about.

Link to comment
Share on other sites

2 hours ago, ej2 said:

Hello @Rodrigo

 

Thank you but this is not what I was talking about.

What I was talking about was concerning responsiveness, let's say I was a developer / user of a site and I clicked on the inspect tab to check the web resources loaded and I returned back to the site after checking the gsap animation gets displaced in a weird way and So I want to return the user properly to the gsap animation when displaced so they can continue scrolling through the animation till they finish.

 

I thought about using ELEMENT.scrollIntoView() or Window.scrollTo() to put the gsap animation back into view but none worked and also on mobile, the animation becomes jittery.

I was able to fix the resizing issue with the help of GSAP's ScrollToPlugin

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