Next.js Discord

Discord Forum

Framer Next Question

Unanswered
Arinji posted this in #help-forum
Open in Discord
soo all i wanted to make was some sort of a slider, when you change the page.. a big green slider moves from the left of the screen to the right, while still showing the old page. And then when it redirects to the new page.. a green slider moves from the right to the left.. showing the new page
any idea how i can acchieve this?
https://codesandbox.io/p/github/Arinji2/jardownloader/master?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clk6oflvd000g356m0jwgu7m3%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clk6oflvd000b356mq783if9h%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clk6oflvd000f356m7v8pxvy3%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clk6oflvd000d356m8igo5ny5%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clk6oflvd000b356mq783if9h%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clk6oflvc000a356m5h2f1745%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clk6oflvd000b356mq783if9h%2522%252C%2522activeTabId%2522%253A%2522clk6oflvc000a356m5h2f1745%2522%257D%252C%2522clk6oflvd000d356m8igo5ny5%2522%253A%257B%2522id%2522%253A%2522clk6oflvd000d356m8igo5ny5%2522%252C%2522activeTabId%2522%253A%2522clk6og25w0109356m18sn1e8v%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A3000%252C%2522id%2522%253A%2522clk6og25w0109356m18sn1e8v%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522clk6oflvd000f356m7v8pxvy3%2522%253A%257B%2522id%2522%253A%2522clk6oflvd000f356m7v8pxvy3%2522%252C%2522activeTabId%2522%253A%2522clk6ofz9200pe356mnvezyfkx%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clk6oflvd000e356mq1oiiaax%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clk6ofm8h0023h1ga4iyr68bo%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522clk6ofz9200pe356mnvezyfkx%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D
Thats the sandbox,its not a virus lol

11 Replies

https://github.com/Arinji2/jardownloader


Thats thr github soo yall can try stufff.. thanks in advance :D
So uh, is this even possible with framer
@Arinji So uh, is this even possible with framer
Brown bear
Let me see if I understand: when clicking a link you want the old page to be covered entirely from left to right, then when the new one is loaded it's "unveiled" from right to left?
On my attempts I got the 2nd part the unveiling thing working
But see how when it's veiling.. the background doesn't have text in it..
@Arinji But see how when it's veiling.. the background doesn't have text in it..
Brown bear
yes, that's because the page has already routed to the new page. You need to implement a function on the Link that, when clicked, first runs the animation and THEN goes to the new route. Do that and it should be perfect
The Link component implements all the underlying <a> tag methods, so you can use a onClick on the link
hmmm
oki lemme try