rudrang
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by rudrang
-
-
5 hours ago, GreenSock said:
Are you saying that you see that behavior on this demo?:
https://stackblitz.com/edit/vitejs-vite-qrhvku?file=src%2FApp.jsx
Nope, I am adding the demo link here, https://stackblitz.com/edit/vitejs-vite-g87tuc?file=src%2FApp.jsx
The demo link provided by you is still buggy5 hours ago, GreenSock said:I don't. But I think I see it on your version that uses a timeline instead of a tween. There are several solutions you can choose from:
- Set invalidateOnRefresh: true on your ScrollTrigger.
- -OR- use a tween instead of a timeline.
- -OR- call ScrollTrigger.refresh() immediately after you finish populating your timeline
I tried them but it still does not work.
I am trying to scale the canvas first and then pin it. On page change after scrolling down, the canvas stays pinned but goes back to original scale. The only work around I found was to scroll to the top when the component is mounting but it is not ideal, is there any other approach I should use?
-
Hi again!
I am facing this issue in a sidebar layout. I try to pin the sidebar and am successful in that but the main content, which is a grid with 2 column layout, overlaps the sidebar as soon as the sidebar is pinned. It seems to be resolved when I use predefined values for the columns instead of 1fr units. I tried making the sidebar sticky using CSS (not GSAP) and there was no overlapping of the sidebar/ overflowing of the main content.
Here is the link for the demo.What am I missing here?
Thanks! -
On 2/26/2024 at 10:29 PM, Rodrigo said:
Hi,
I just went through your demo and it seems to be working as expected:
https://i.imgur.com/W1SnPKC.mp4
What's exactly the issue you're having?
Happy Tweening!
Hi!
Sorry for the delay,
The same issue exists in the previous demo.
Basically, when one scrolls down the homepage, navigates to a different page and then comes back, the applied styles revert back to the original styles.
I have also attached a video explaining the same.
Thanks! -
On 2/23/2024 at 2:43 AM, GreenSock said:
It looks like you're just creating things in a slightly funky order - you should always create your ScrollTriggers in the order they'd happen on the scroll, -OR- you can use refreshPriority to explicitly control that. In your case, you're creating an animation that uses a particular element as the trigger...and then you're creating a ScrollTrigger that PINS that very same element. The pinning affects how that element moves down the viewport and when it'd trigger start/end values. See the issue? So just re-ordering your code seems to solve it, right?
https://stackblitz.com/edit/vitejs-vite-qrhvku?file=src%2FApp.jsx
Hi! Thank you for the quick response! I understand what you mean, and it totally makes sense! Although I ran into a different issue after implementing your solution. The code @Rodrigo shared (thank you for that btw) was still buggy for me.
Now the issue is that the canvas stays pinned but the animation progress isn't applied to it, ie. the canvas does not scale to 1.
I tweaked @Rodrigo code to recreate the issue, here is the code for it.
Also is there a way to check if ScrollTrigger has actually been refreshed?
Sorry if these things sound naive! Cheers! -
First of all, the work you have put into this masterpiece and the dedication you guys have! Hats off!
Coming to my issue, I am relatively new to React/ React router. I have gone through most of the articles in the forum regarding pinning/ ScrollTrigger/ Router navigation and many more and yet fail to understand what is it that I am doing wrong.
In my actual project, there are multiple components, each having their different animations. My homepage works flawlessly, the issue arises when I navigate to a different page and return to my homepage. Now I have read tons of articles stating to callScrollTrigger.refresh() or ScrollTrigger.update() but it does not seem to work. I am using the latest version of GSAP and react router 6.22.
StackBlitz link: https://stackblitz.com/edit/vitejs-vite-kdw52g?file=src%2FApp.jsx
Any help is appreciated! You all are anyway appreciated
Thank you.
ScrollTrigger breaks when navigating back ( useGSAP + React + React Router )
in GSAP
Posted
Not sure, I guess I will have to rely on the work around.
Noted! I completely missed that!
I had updated my ScrollTrigger order after this reply, I thought I got them right?
Either way, thank you so much for your time! I am sticking to the solution of scrolling to the top on route change