changing width of section on run time

[markhore]

I'm building a site with horizontal scrolling, in the middle of content i have horizontal scrolling, 

sections are of fixed with initially around 100px, interface is like tabs or accordion, when section get clicked sections change with and show the content.

 

i tried scrollTrigger.refresh(); to recalculate the width but its not working.

See the Pen zYamzQx by yasirhaleem (@yasirhaleem) on CodePen

[markhore]

i see its working on resize, i'm calling  scrollTrigger.refresh(); inside the click event but somehow its show error ScrollTrigger not defined.

[Rodrigo]

Hi,

 

There are a few pointer I'd like to share about this.

 

First your trigger element, which you are also pinning, has a display flex. Is better to avoid that unless you have no other choice. From the ScrollTrigger Docs:

 

pinSpacing

Boolean | String - By default, padding will be added to the bottom (or right for horizontal: true) to push other elements down so that when the pinned element gets unpinned, the following content catches up perfectly. Otherwise, things may scroll UNDER the pinned element. You can tell ScrollTrigger not to add any padding by setting pinSpacing: false. If you'd rather it use margin instead of padding, you can set pinSpacing: "margin". Note: pinSpacing works in most cases, but it really depends on the way you set up your DOM and CSS. For example, if you pin something in a parent that has display: flex or position: absolute, the extra padding won't push other elements down/right so you may need to manually space things out. pinSpacing is just a convenience that works in most situations. Important: if the container is display: flex, pinSpacing is set to false by default because that's typically what is desired since padding works differently in that context.

 

In your example your only element is the horizontal container, so there is not a lot of issues there, but it could become one if you add more content to your site.

 

In this cases is recommended to tell ScrollTrigger to create your GSAP instances again (at least the ones that will be affected by the new size in your elements), since those values are recorded on the first render but never updated for performance issues. For that use the invalidateOnRefresh flag in your ScrollTrigger configuration.

 

Finally in your click handler you should run  the refresh method on the global ScrollTrigger (PascalCase) instance:

ScrollTrigger.refresh();

Here is a working example:

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

 

Hopefully this helps and clear things up. If you have more questions let us know.

 

Happy Tweening!

[markhore]

42 minutes ago, Rodrigo said:

Hi,

 

There are a few pointer I'd like to share about this.

 

First your trigger element, which you are also pinning, has a display flex. Is better to avoid that unless you have no other choice. From the ScrollTrigger Docs:

 

pinSpacing

Boolean | String - By default, padding will be added to the bottom (or right for horizontal: true) to push other elements down so that when the pinned element gets unpinned, the following content catches up perfectly. Otherwise, things may scroll UNDER the pinned element. You can tell ScrollTrigger not to add any padding by setting pinSpacing: false. If you'd rather it use margin instead of padding, you can set pinSpacing: "margin". Note: pinSpacing works in most cases, but it really depends on the way you set up your DOM and CSS. For example, if you pin something in a parent that has display: flex or position: absolute, the extra padding won't push other elements down/right so you may need to manually space things out. pinSpacing is just a convenience that works in most situations. Important: if the container is display: flex, pinSpacing is set to false by default because that's typically what is desired since padding works differently in that context.

 

In your example your only element is the horizontal container, so there is not a lot of issues there, but it could become one if you add more content to your site.

 

In this cases is recommended to tell ScrollTrigger to create your GSAP instances again (at least the ones that will be affected by the new size in your elements), since those values are recorded on the first render but never updated for performance issues. For that use the invalidateOnRefresh flag in your ScrollTrigger configuration.

 

Finally in your click handler you should run  the refresh method on the global ScrollTrigger (PascalCase) instance:

ScrollTrigger.refresh();

Here is a working example:

 

 

 

Hopefully this helps and clear things up. If you have more questions let us know.

 

Happy Tweening!

@Rodrigo Thanks a lot for explaining in detail, global ScrollTrigger refresh did the trick, if i remove flex from container layout breaks.

Another point if you can please suggest me is, when i click on sections it get animated because of the recalculation i guess, can we stop it so it just open like slide to right ? or add tween so it expand to right with slow animation ? but i don't think it will work because of recalculation of width ?

[Rodrigo]

Hi,

 

Indeed ScrollTrigger recalculates the start and end points and then updates it's progress in order to have everything in sync, that creates you're seeing.

 

As you mention, I wouldn't recommend refreshing ScrollTrigger on every update of a width animation.

 

You could use the Flip Plugin in order to animate the width of the elements in order to use an onComplete callback to execute the ScrollTrigger refresh method:

$(".module").on("click", function (e) {
  const state = Flip.getState($(this));
  $(this).toggleClass("active");
  Flip.from(state, {
    absolute: true,
    onComplete: () => ScrollTrigger.refresh(true),
  });
  e.preventDefault();
});

Although this might not prevent the jumping when ScrollTrigger refreshes.

 

If you rush me I think there could be a way to achieve this but it might not be super easy since it would involve stopping ScrollTrigger from updating and using ScrollTo Plugin to animate the scroll position and avoid the jump. The simplest way would be to animate the scroll position to zero as the width is animated, but that would force the users to start from the top again. Maybe @GreenSock could shed some light on the subject.

 

Let us know if you have more questions.

 

Happy Tweening!

[GreenSock]

Is this more of what you wanted?: 

See the Pen yLEQYNv?editors=0010 by GreenSock (@GreenSock) on CodePen

 

It's definitely a tricky situation, but doable. 

[markhore]

On 12/3/2022 at 3:39 AM, GreenSock said:

Is this more of what you wanted?: 

 

 

 

It's definitely a tricky situation, but doable. 

@GreenSock Super Duper  i spent 2 days to get it done but couldn't and thanks a lot for the comments, i will integrate it today and let's see how it goes.

[markhore]

@GreenSock Thanks again for helping out.

 

been trying it to integrate with barba everything works well now.

 

if we have content above and below horizontal scroll it creates some spaces and act weird, i opted for @Rodrigo solution, that animation is not wanted but bearing with that.