Jump to content
GreenSock

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

PinSpacing not working with locomotive

Go to solution Solved by akapowl,

Recommended Posts

Hi! @akapowl helped me out yesterday to get pinned animation working with Locomotive and Barba, but after that i've realised that pinSpacing is not working as expected after going to the other page and coming back.

 

https://stackblitz.com/edit/web-platform-vhx7k3?file=index.html,styles.css,index.js

 

Also, the animation jumps on mobile, and if remove  the code below it works but it is extremely jittery.

pinType: container.querySelector('[data-scroll-container]').style
        .transform
        ? 'transform'
        : 'fixed',

 

Link to comment
Share on other sites

Hi @Ocamy. LocomotiveScroll and Barba are not GreenSock products, so we can't really support those here. Sorry. If you have any GSAP-specific questions and can provide an isolated minimal demo that's not using 3rd party tools like that (which are likely the culprits of the problems), we'd be happy to take a peek. 

 

You are welcome to post in the "Jobs & Freelance" forum if you'd like to find paid support/consulting. 

 

As for the mobile stuff, you could try setting ScrollTrigger.config({ignoreMobileResize: true}) and maybe even ScrollTrigger.normalizeScroll() to see if it helps. 

 

Good luck!

  • Like 2
Link to comment
Share on other sites

  • Solution

 

The problem is, that with your order of execution you are not sticking to the order that is neccessary for things to work properly. The code for implementing locomotive-scroll to work with ScrollTrigger via .scrollerProxy() that you likely got from the example on the .scrollerProxy() documentation page has comments; one of them (at the very end) says:

 

    // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
    ScrollTrigger.refresh();

 

So you would either have to make sure to stick to the order provided in there to begin with, or you will need to call ScrollTrigger.refresh() again after all your ScrollTriggers have been created. I just quickly threw a .refresh() call at the very end of your Stuck() function, just to show the difference it makes.

 

https://stackblitz.com/edit/web-platform-ydejfq

 

Also, you may not have noticed that you actually appear to be creating more and more instances of locomotive scroll with every page-transition, so that is something I would concentrate on fixing first, because it is the most likely to throw things off with regard to ScrollTrigger in the long run.

 

But as Jack already mentioned, neither locomotive-scroll nor barba.js are GreenSock products, so that is nothing we can help with.

 

Good luck with the project!

 

image832.thumb.png.7a89039dba8007ba4ebc3cfa461a33cb.png

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Thanks again @akapowl, i wasn't aware of the duplicate, i found out it is because the barba container must be inside the locomotive container. I hope i can do it. Thanks!

  • Like 1
Link to comment
Share on other sites

16 hours ago, Ocamy said:

Also, the animation jumps on mobile, and if remove  the code below it works but it is extremely jittery.

pinType: container.querySelector('[data-scroll-container]').style
        .transform
        ? 'transform'
        : 'fixed',

 

Just wanted to quickly also address this problem you are having.

 

It is related to you tweening on the y of containers that are parents of the element that you want to pin. Since there will still be transforms set inline on those elements when they are done animating, those transforms will change the context for the position: fixed that is being applied for the pinning on mobile.

 

Unbenannt.thumb.png.e1014ec404248a1862259548ffa21418.png

 

 

 

So you will need to make sure there will be no transforms set on any parent of the element you are going to pin or else things will not behave as they should. You can do so by e.g. using clearProps.

 

I just quickly threw it onto that tween of your tlLoaderOut timeline to show the difference it makes, i.e. that now after load things will pin properly on mobile. You will likely want to do something similar for the tweens that handle your transitions in between pages.

 

  tlLoaderOut
    .to(loader, { yPercent: -100 }, 0.2)
    .from('.site-main', { y: 150, clearProps: "transform" }, 0.2);	// <-----

 

https://stackblitz.com/edit/web-platform-gszrpg

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

I'm so glad i joined this forum. Thank you so much @akapowl 

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