[changing width of section on run time]

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

[changing width of section on run time]

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.

[changing width of section on run time]

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 ?

[changing width of section on run time]

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

[changing width of section on run time]

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

[Hide all other contents which have been scrolledd]

2 minutes ago, GreenSock said:

Glad you found a solution, but I just want to warn you that ScrollTrigger.saveStyles() is deprecated because it really shouldn't be necessary anymore since GSAP 3.11.0 added revert() capabilities along with gsap.context() and gsap.matchMedia() which are a cleaner way to accomplish something similar. 

Thanks a lot @GreenSock i will definitely look into this.

[Hide all other contents which have been scrolledd]

@GreenSock Thanks for your reply. sorry i couldn't explain it well.

 

i have three sections, when i react start of 2nd section wanted to remove the 1st section, i was doing it but there was a lot of empty space.

 

ScrollTrigger.saveStyles()

after hours of googling found that `saveStyles` were the solution., might help someone else.

 

if someone need help, available for paid consulting services 😀 🤗

[Hide all other contents which have been scrolledd]

1 hour ago, Cassie said:

It may be as simple as this though...
 

gsap.to('.hide-me', {
  opacity: 0,
  scrollTrigger: '.hide-me'
})

Take a look at ScrollTrigger

Hope this helps!

Thanks a lot for the quick reply, i created the pen here 

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

 

When i  reached at section "After Horizontal Scroll" i shouldn't be able to see past content but able to move through the top menu tabs ONLY and show only related section ?, and when i click on "Home" everything start normally, is it possible ?

[Hide all other contents which have been scrolledd]

i'm new to scrollTrigger or GSAP, I have different large sections, including horizontal scroll, when i reach below the horizontal section i want all past section to be hidden, only 1 section to be in view, user should't be able to scroll back, but there are tabs in header where use can click and see the other section, is it possible ?

 

do i have to create custom function to hide content when enter in specific section ? or is their native functionality ?

[image zooming to full screen on click]

i have to study both code and react!  will share here if i got it working

[image zooming to full screen on click]

5 minutes ago, ZachSaucier said:

This Codrops article can give you more insight as to how the site that you linked to was made: https://tympanus.net/codrops/2019/11/05/creative-webgl-image-transitions/

 

Or you could look at the code of the theme that you linked to. I recommend buying it if you do so.

i have that theme ( purchased ) but its wordpress theme, i want to do the same with gatsby, i'm almost done can achieve the other animations but this "positioning" thing is not working

i'm hiding ( fading out ) other elements on page when click on box but my animation is not as smooth as in codepen i shared ( its not mine, i got this from this forum after reading more than 30pages )

 

thanks a lot for looking into this and suggesting the codrops link.

 

[image zooming to full screen on click]

Hi @elegantseagulls

 

can you please convert it to react ?

 

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

[image zooming to full screen on click]

Thanks @elegantseagulls

 

even if i hide other boxes on click still the animation is not good, not as smooth as they did on ref site, need some calculation on positioning, hope someone will help on this

[image zooming to full screen on click]

Hi,

 

i'm very new to greensock just couple of days old, i'm building a gatsby site where i wanted to use greensock for animation specially for page transition using gatsby "page transition plugin successfully integrated animation works on page transition.

 

next part is i have portfolio thubmails when we click on thumbnail, thumbnail should go fullscreen and than second pages appears. but im unable to fix thumbnails animation, please check codepen ( it was for single image and was working fine but i modified the structure )

 

mainly i want to recreate this http://clapat.ro/themes/satelite-wordpress/classic-portfolio/

 

 

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