Jump to content


  • Posts

  • Joined

  • Last visited

Suz88's Achievements

  1. Hi Rodrigo, Yes I know this property and it's not my problem because the component scroll at the beginning (top/left depending on the type of scroll applied) BEFORE the navigation, it scrolls first at the top before while doing the exit animation on the current page and after that no worries doing enter animation and I'm at the start of my next component but I think it's a problem more related to Nextjs or react-transition-group than gsap but I haven't found anything promising allowing me to solve the problem I I will continue to persevere and if I find a solution I will come back to post it here if anyone is interested As for my second question relating to a parallax effect (see detail above in my last message) would you have any tips to advise me? Is the use of scrollSmoother in my case an imperative in order to reproduce the effect I'm looking for Anyway, thank you for your quick response, have a nice evening/day ^^
  2. Hi, It's me again 🥲, I have a concern about the use of react-transition-group and gsap indeed every time I change the page the current page automatically scrolls to the beginning before triggering the exit animation? On Rodrigo's live example we can notice the same problem ! I tried to deactivate the scroll when the user changes page but without effect I always have this problem ^^ do you have an idea of what could cause this? I think this is related to the use of react-transition-group and I can't seem to counter it no matter what I try to do it scroll to the top of the page ! I take this opportunity to also ask another question, I'm trying to make a basic parallax effect like we can see in this beautiful website on about part : https://www.studiorhe.com/about Then I tried to reply this in a stackblitz: https://stackblitz.com/edit/nextjs-4cjsly?file=components%2FHome%2Findex.tsx i try to reproduce this effect between two divs with gsap but all I manage to do is move my image by scrolling in its container, which doesn't is not what I'm looking for I would just like the image div (green) to scroll slowly on the left followed automatically by my next div (pink) without causing a space then that the latter also moves and slightly covers the green div but I dry ! Do I necessarily have to use scrollSmoother and data-speed property for this like I can see on other example but I think it’s a bit overkill for my needs ? I don't know if it's very clear what I'm trying to do Ty for you’re advices/help if u have time, anyway have a good day
  3. Hi Rodrigo, Thx a lot for your help, u saved me Last step for me: managing parallax effects with gsap ( i saw that ScrollSmoother tool can do the job i will subscribe to an offer to use it! this looks powerful i hope i will handle this 🙌 ) and manage reveal elements in view with scrollTrigger (text animation / border) ^^ My goal in the next few weeks/months is to master gsap in a react/next environment and to be able one day (perhaps) to be able to help another user Have good day, you're the best 🧙‍♂️
  4. Hi Rodrigo, Thank you for the time to give to my concerns it's really cool I downloaded your github repo to work on it and find out why my solution didn't work! So I modified the Specialties page so that it sticks with my page (no vertical scroll) by removing the spacer divs and from here I manage to get the same bug as my situation (indeed I don't I only have a horizontal scroll and only that on my pages) suddenly when arriving from the page the horizontal scroll jumps (at refresh everything is back to normal) Secondly I modified the result page so that it contains exactly what my page contains and the same mm observation the horizontal scroll jumps I really don't understand how or why! The css is limited to the bare minimum and I only added the css from my results page so I don't see why it would break the logic of the horizontal scroll... https://github.com/init3498/Example2 I share my Git repo containing the modification in order to understand where my mistake is because I am going in circles Have a nice day and thank you again for your help.
  5. Hi, Ty Rodrigo for the answers provided and sorry for the delay in answering I had moved on to another feature, but now I come back to this famous page transition with gsap and the implementation of horizontal scroll ^^ I tested the different solutions but without much result whether it was the implementation of pinReparent: true in my instance of scrollTrigger or by stupidly resuming the page transition in the stackblitz with the onEnter() function but nothing there do I always have this problem of horizontal scroll which break when arriving on the page I reduced my code to the strict necessary in the following stackblitz to reproduce what I have on my main app https://stackblitz.com/edit/nextjs-pefpra?file=README.md,components%2FSpecialties%2Findex.tsx,components%2FResults%2Findex.tsx,components%2FTransition%2Findex.tsx I do not understand why because logically in view of the solution provided by the thread it should work I must have missed something important but no way to put my finger on it If anyone has an idea to enlighten me that would be a great help. Good day
  6. Hi, The weekend paid off so I'm coming to share the solution if anyone is interested I took up a thread where Rodrigo had found the problem ^^ (https://greensock.com/forums/topic/34287-scrolltriggerrefresh-not-working-upon-changing-route-in-nextjs/) indeed there he explains that: "You have to wait for the image to load or give the image a specific height in order to avoid the problem. Basically the ScrollTrigger calculations are done before the image loads, so once the image is ready, there is a layout change causing the problem." So here it is either you put a fixed size to your images or you write a function in your useIsomorphicLayoutEffect which comes to wait for the recovery of the images BEFORE launching the scrollTrigger which allows to have a more flexible image size which adapts good at different screen sizes However, I have another question (never 2 without 3 as said x)) I would like to make sure to use react-transition-group in my application in order to have beautiful transition animation between pages, however this breaks my scrollTrigger and my horizontal scroll so that it would be the right solution for me to use next/gsap together with react-transition-group? What am I missing in my implementation? https://stackblitz.com/edit/nextjs-rvczfa?file=pages%2Findex.tsx,styles%2Fglobals.scss,pages%2Fresults.tsx,components%2FLayout%2Findex.tsx,pages%2F_app.tsx Thank you and good day
  7. Ty for your answer Rodrigo but unfortunately after having removed almost all the useless packages and cleared my code in order to keep only the essentials I still have this display problem which remains more than problematic in my case for a dynamic rendering display ! I tried everything telling myself that it was due to flexbox so I tried with grid or other tricky solution the only place where I cheated is to put an apsect-ratio: 16/9 on the result div in order to force the wrapper container size, however, from a rendering point of view and clean display, we are far from the expected result! I'm at an impasse ^^ I'm going to put this aside hoping to find a solution in the coming days or if someone else goes through this maybe he will see a way to find a solution to control size of container enveloping the children at render time without the latter not forgetting half of them along the way ! Have a good day
  8. Sorry for the inconvenience again but I would like to understand why the calculation of the size of my container (during the first render does not run properly ! https://stackblitz.com/edit/nextjs-rvczfa?file=pages%2Fresults.tsx,components%2FResults%2Findex.tsx In my case image div are the problem ! Indeed if you click on one of the links leading to a horizontal scroll the size of the container does not include all the elements (probably due to a too fast rendering even if the latter has all the images). Except if you refresh simply the page size, once loaded, is good or if we go back to the Home page and again on the same page the size is good why? Why during the first render and only there the size of the container does not take into account the size of all the images? For me useIsomorphicLayoutEffect is done too quickly even before having all the images how to delay its execution to the image fully loaded in my case, or maybe it's an other probleme Thank you for your help or the tracks that I could approach in order to solve my problem, Good day to you
  9. Wow amazing ! It's work like as expected and it's really clear for me i had misunderstood the functionality of the X property Ty Cassie and Rodrigo you're the bests, have a nice day
  10. Hello, I'm new to the implementation of gsap's horizontal scrolling in Nextjs However, I more or less succeeded in doing what I wanted with the view of the solutions provided by the various posts relating to Nextjs, but i'm dry on the implementation of the size of my container which must imperatively be the size of its children! Indeed the container (green) must imperatively stop where the last of the children ends up (purple) except I can't manage to make sure that the last one adapts dynamically (in fact my client can add / remove specialties because in my app I have a backend that dynamically retrieves children and generates them according to the db) https://stackblitz.com/edit/nextjs-8gdt9v?file=components%2FSpecialties%2Findex.tsx I suspect that this must have an impact on the xPercent property or the end() property of my gsap.to but I can't manage to implement it correctly and to control the size of my container in the right way. Or in other way the last child can be stuck at the end of the container and cannot be scrolled at the beginning idk how to solved it ! Can u help me to resolve my pb with any suggestions ? Ty and have a good day