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.

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

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

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

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.

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

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

Thanks a lot for the quick reply, i created the pen here https://codepen.io/yasirhaleem/pen/VwdxPVV 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 ?

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 ?

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

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.

Hi @elegantseagulls can you please convert it to react ? https://codepen.io/yasirhaleem/pen/yLyvavQ

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

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/