_ayushagrawal
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by _ayushagrawal
-
-
30 minutes ago, OSUblake said:
Thanks! The first post can be a little weird because it's expecting a CodePen url.
This looks more like a router/CSS issue because it will briefly show both pages at the same time, so overflow is kicking in. You could try setting the outgoing page like this.
gsap.fromTo( node, { position: "absolute", top: 0, left: 0, opacity: 1, }, { opacity: 0, duration: 1, } );
Instead of doing that, I usually just set
overflow-y
toscroll
on the body.body { font-family: "Poppins", sans-serif; overflow-y: scroll; }
The reason for that is if you have 1 page that doesn't have scrollbars but then you transition to a page that does, it will cause a layout shift by the width of the scrollbar, so I'd prefer having a visible scrollbar over a layout shift.
Oh thanks a lot it solved the problem, now when the transition is clear without the scroll shift I realized that the exiting animation is not kicking in. Sorry for the trouble should've noticed it earlier.
- 1
-
14 minutes ago, OSUblake said:
Welcome to forums @_ayushagrawal
It's hard to say what's going on without seeing a minimal demo. You can make one on CodeSandbox. Thanks!
I am sorry it's my first forum so i was getting a hard time with the codepen url so I pasted the url in the content section. Hope it works
-
I am trying to learn page transitions in react using react-transition-groups but what's happening right now is that when I route between the pages the transition effect is showing but all the routes i.e. "/" and "/contact" are rendering for a split second exposing the scrollbar, maybe it's because of the timeout property in the <Transition />. Can someone please tell me what am I doing wrong here
Image horizontal scrolling effect
in GSAP
Posted
I am trying to recreate an effect from https://antoni.de/ in which when we scroll horizontally the columnar effect is occurring is which each div is I guess translating the image by different value not sure. Can someone please help or give some idea on how to achieve this kind of effect.