Yakov Posted July 26, 2021 Share Posted July 26, 2021 Once again, good time of day! I want to implement a link transition between pages, as on this site (I attach a screenshot and an example link) https://studio-size.com/ - https://prnt.sc/1g61lut - screen An example of flip is made in codepen, for the first time, I tried to connect flip for images first. It worked for one image, BUT not for the cycle The first one in the cycle opens all the time... I set the data-flip-id of the element @id, it didn't help... <xsl:template match="page" mode="сases-block"> <div> <a href="{@link}"> <img class="thumbnail" data-flip-id="img{@id}" src="{.//property[@name = 'jpg_case_preview']/value}" alt="" /> <img class="full-size" data-flip-id="img{@id}" src="{.//property[@name = 'jpg_case_preview']/value}" /> </a> </div> </xsl:template> Maybe it is necessary to do js in a different way than in the example codepen? And the second question is how can I implement Flip animation for switching between pages. See the Pen XWKLYWe by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted July 26, 2021 Share Posted July 26, 2021 Flipping between page changes is a little more involved, and it's hard to advice without knowing how you are doing page changes. If the pages are dynamically loaded, like with a SPA, so some parts of your JavaScript never get reloaded, then you can save the state before the page changes, wait for the new page to load, and then do the animation. If you're not dynamically loading the new page, then it's probably not possible because there would be no way to save the state from the current page and apply it to the next page. 2 Link to comment Share on other sites More sharing options...
Yakov Posted July 27, 2021 Author Share Posted July 27, 2021 16 hours ago, OSUblake said: Flipping between page changes is a little more involved, and it's hard to advice without knowing how you are doing page changes. If the pages are dynamically loaded, like with a SPA, so some parts of your JavaScript never get reloaded, then you can save the state before the page changes, wait for the new page to load, and then do the animation. If you're not dynamically loading the new page, then it's probably not possible because there would be no way to save the state from the current page and apply it to the next page. My pages are not loaded dynamically. Therefore, you can make a transition, I have already done a simple transition between pages. I just need a specific animation, as in the given reference But while I'm facing a problem, I have a flip triggered over the entire area and opens one picture, which is the first in order. It seems that I did it, as in the example from codepen... I can't understand what the error is 😥 Link to comment Share on other sites More sharing options...
Yakov Posted July 27, 2021 Author Share Posted July 27, 2021 18 hours ago, OSUblake said: Flipping between page changes is a little more involved, and it's hard to advice without knowing how you are doing page changes. If the pages are dynamically loaded, like with a SPA, so some parts of your JavaScript never get reloaded, then you can save the state before the page changes, wait for the new page to load, and then do the animation. If you're not dynamically loading the new page, then it's probably not possible because there would be no way to save the state from the current page and apply it to the next page. I output 7 blocks of links, each block has its own static page id. In data-flip-id= " img{@id}" I use {@id} so that the data-flip-id is different and tied only to a specific block, but I'm watching the video now, in fact it should work, but I persistently see one block as a link Link to comment Share on other sites More sharing options...
Cassie Posted July 27, 2021 Share Posted July 27, 2021 Hey @Yakov If you need help with this could you make a minimal demo for us, thanks! Link to comment Share on other sites More sharing options...
Yakov Posted July 27, 2021 Author Share Posted July 27, 2021 48 minutes ago, Cassie said: Hey @Yakov If you need help with this could you make a minimal demo for us, thanks! Thanks!) I did, by the way, I had a suspicion, suddenly due to the fact that I take the output of certain pages. But the bug remained in the simple layout too I See the Pen jOmZmQQ by eglit_m (@eglit_m) on CodePen 1 Link to comment Share on other sites More sharing options...
Cassie Posted July 27, 2021 Share Posted July 27, 2021 Hey there! Are you trying to expand *just* the image that you click on to be full screen? Link to comment Share on other sites More sharing options...
Cassie Posted July 27, 2021 Share Posted July 27, 2021 If so, you may not need duplicate images in your markup as that's only necessary when crossfading between two different elements. I've refactored it with some notes. The principle is 1) loop through all the images 2) for each one add a 'click' event listener --- 1) when clicked, get the current state of the image 2) make a state change by toggling a class 3) animate to the new state See the Pen 0f32cad9b2e2070a11560936857e85fb by cassie-codes (@cassie-codes) on CodePen 2 Link to comment Share on other sites More sharing options...
Yakov Posted July 27, 2021 Author Share Posted July 27, 2021 26 minutes ago, Cassie said: Hey there! Are you trying to expand *just* the image that you click on to be full screen? In fact, not quite this, I need to implement the transition effect, as given in the reference at the beginning of my question topic. That when you click on a block in which there is some image with a link, when you click on it, a transition occurs, another page opens. I need to hang the flip effect on the page transition somehow. On 7/26/2021 at 4:44 PM, Yakov said: I want to implement a link transition between pages, as on this site (I attach a screenshot and an example link) https://studio-size.com/ - https://prnt.sc/1g61lut - screen Gsap is still difficult for me, it was more difficult to work only with threejs. Link to comment Share on other sites More sharing options...
Yakov Posted July 27, 2021 Author Share Posted July 27, 2021 (edited) 37 minutes ago, Cassie said: Hey there! Are you trying to expand *just* the image that you click on to be full screen? By the way, I was able to connect barba, I thought I read that it is well compatible with gsap, but I can't figure out where to attach the animation yet... And I'm not lucky with examples =_= I found a description here, but with an old version of barba... Edited July 27, 2021 by Yakov I added about the old version of barba Link to comment Share on other sites More sharing options...
OSUblake Posted July 27, 2021 Share Posted July 27, 2021 7 hours ago, Yakov said: My pages are not loaded dynamically. Therefore, you can make a transition, I have already done a simple transition between pages. Then you're loading them dynamically. It's impossible to transition between pages on a hard navigation change because it reloads an entirely new page. 48 minutes ago, Yakov said: I found a description here, but with an old version of barba... Go through their documentation. It shows GSAP usage and even their site uses GSAP.https://barba.js.org/docs/getstarted/basic-transition/ For Flip, you would probably have to save the Flip state to a global variable outside of barba's init, like inside one of the beforeLeave/leave callbacks, and then do the Flip animation in one of the enter or after callbacks. https://barba.js.org/docs/getstarted/lifecycle/ 4 Link to comment Share on other sites More sharing options...
Yakov Posted July 28, 2021 Author Share Posted July 28, 2021 16 hours ago, OSUblake said: For Flip, you would probably have to save the Flip state to a global variable outside of barba's init, like inside one of the beforeLeave/leave callbacks, and then do the Flip animation in one of the enter or after callbacks. https://barba.js.org/docs/getstarted/lifecycle/ That's just how I can't understand the beforeLeave/leave principle... How to link it 😟 Link to comment Share on other sites More sharing options...
OSUblake Posted July 28, 2021 Share Posted July 28, 2021 What did you try? Put a minimal demo up on codesandbox, and I'll take a look. Link to comment Share on other sites More sharing options...
Yakov Posted July 28, 2021 Author Share Posted July 28, 2021 38 minutes ago, OSUblake said: What did you try? Put a minimal demo up on codesandbox, and I'll take a look. It seems that I tried to make a project, but she tells me that the Trial version of GSDevTools is deployed... https://codepen.io/eglit_m/project/editor/Abayny Link to comment Share on other sites More sharing options...
OSUblake Posted July 28, 2021 Share Posted July 28, 2021 Codesandbox.... just fork this. https://codesandbox.io/s/lively-sun-896wz?file=/index.html Link to comment Share on other sites More sharing options...
Yakov Posted July 28, 2021 Author Share Posted July 28, 2021 17 minutes ago, OSUblake said: Codesandbox.... just fork this. https://codesandbox.io/s/lively-sun-896wz?file=/index.html I made a project using your link! How to connect barba via beforeLeave/leave with Flip, so that it is like in the given reference in the topic? https://codesandbox.io/s/pedantic-lake-sh77z?file=/index.html:2921-3313 I worked with before in the Fullpage plugin once, but I suffered for three days then... I haven't found an example working on this functionality yet..😟 It feels like I'm missing some theoretical point in the stage, and because of this there is a deadlock... Link to comment Share on other sites More sharing options...
OSUblake Posted July 28, 2021 Share Posted July 28, 2021 Codesandbox's server doesn't seem to play nicely with barba. I did this locally, and it seemed to work fine, so it should help you get started. index.js gsap.registerPlugin(Flip); let flipState; barba.init({ transitions: [ { sync: true, beforeLeave(data) { const target = data.current.container.querySelector("[data-flip-id]"); if (target) { flipState = Flip.getState(target); } }, enter(data) { const target = data.next.container.querySelector("[data-flip-id]"); if (target && flipState) { gsap.set(data.current.container, { opacity: 0, position: "absolute" }) return Flip.from(flipState, { targets: target, absolute: true, scale: true }); } } } ] }); index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="styles.css" /> <title>Static Template</title> </head> <body> <div data-barba="wrapper"> <main data-barba="container" data-barba-namespace="home"> <a href="cases.html">Cases</a> <div> <img data-flip-id="img" class="thumbnail" src="https://sun6-22.userapi.com/s/v1/ig2/awq7qUcGZAS-9dsYLrQoqJHwj9fpjNo6pi0DdawtulIcSqr6fqicNesTWXdtTwzynhR9S1oHx8G5gUyZMvOeJ12P.jpg?size=400x0&quality=96&crop=1,136,1077,1077&ava=2" alt="" /> </div> </main> </div> <script src="https://unpkg.com/@barba/core"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Flip.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js"></script> <script src="index.js"></script> </body> </html> cases.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="styles.css" /> <title>Static Template</title> </head> <body> <div data-barba="wrapper"> <main data-barba="container" data-barba-namespace="cases"> <a href="index.html">Home</a> <div> <img data-flip-id="img" class="bgimage_block" src="https://sun6-22.userapi.com/s/v1/ig2/awq7qUcGZAS-9dsYLrQoqJHwj9fpjNo6pi0DdawtulIcSqr6fqicNesTWXdtTwzynhR9S1oHx8G5gUyZMvOeJ12P.jpg?size=400x0&quality=96&crop=1,136,1077,1077&ava=2" alt="" /> </div> </main> </div> <script src="https://unpkg.com/@barba/core"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Flip.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js"></script> <script src="index.js"></script> </body> </html> You're probably going to like dynamically adding a data-flip-id attribute on click. myElement.setAttribute("data-flip-id", "img"); 1 Link to comment Share on other sites More sharing options...
Yakov Posted July 28, 2021 Author Share Posted July 28, 2021 (edited) Unfortunately, it does not work... Even if I add @id to img in data-flip-id, so that it is different, because img must be different in this data. But it doesn't work out... And on pages like cases.html there should be such a block... There may be a video inside the div.bgimage_block. Therefore, there is a block there. <div class="bgimage_block" style="background-image: url(https://img2.goodfon.ru/original/320x240/1/a1/bow-lake-banff-national-park.jpg); "> </div> Barba work, but without animation.. Edited July 28, 2021 by Yakov about animation Link to comment Share on other sites More sharing options...
OSUblake Posted July 28, 2021 Share Posted July 28, 2021 The code I provided works. You're going to have to customize it to fit your project. The markup doesn't matter, it can flip between an image and a block. We are animating between elements with the same flip-data-id on different pages. If you need more help, be sure to read through all the Flip docs. Check out the showcase demos and the how-to demos. This video is a good starting place. 1 Link to comment Share on other sites More sharing options...
Yakov Posted July 28, 2021 Author Share Posted July 28, 2021 I have already watched the video, I have practiced doing something from there, taking into account the recommendations of Cassie. And it worked. But here is not a separate working out of flip, namely in the transition. In the gsap topics, I found a description, only according to the old version of barba... I took your example, barba works, but the flip process itself seems to work only at the end, when the page has already opened, there is some flashing of the block on the page. But it does not work during the download process... As in the reference, in it, flip is in the process... https:/ / studio-size. com/ https://prnt.sc/1g61lut - screen Some simple animation of the transition is obtained, but the entire page as a whole, for example, opacity or zoomout, but not a separate block... There is clearly some nuance here that I don't understand and probably just don't know that it exists Link to comment Share on other sites More sharing options...
OSUblake Posted July 28, 2021 Share Posted July 28, 2021 I don't know what to tell you. Flip is working as intended. IF you need help with Barba, it would be best to ask questions over on their slack. https://join.slack.com/t/barbajs/shared_invite/enQtNTU3NTAyMjkxMzAyLTkxYWUwZmM1YWQxMmNlYmE0ZjY4NDQxMGUxYjkwYWFlMzEzOWM4OTRhMWRmYTQyYzFlMmQ3OGFmYmI3MWY0OWY If you need finer control over the loading process, perhaps try using a framework with a router, like Vue. See the Pen eYdXZJZ by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Yakov Posted July 29, 2021 Author Share Posted July 29, 2021 20 hours ago, OSUblake said: Codesandbox's server doesn't seem to play nicely with barba. By the way, this code works, but why doesn't the other option work? barba.init({ transitions: [{ name: 'opacity-transition', leave(data) { return gsap.to(data.current.container, { opacity: 0.2 }); }, enter(data) { return gsap.from(data.next.container, { opacity: 0.8 }); } }] }); Link to comment Share on other sites More sharing options...
OSUblake Posted July 29, 2021 Share Posted July 29, 2021 Are you talking about on codesandbox? Link to comment Share on other sites More sharing options...
Yakov Posted July 29, 2021 Author Share Posted July 29, 2021 1 hour ago, OSUblake said: Are you talking about on codesandbox? Yes, about him. It's just that if codesandbox couldn't work with barba, then the usual opacity wouldn't work, right? Link to comment Share on other sites More sharing options...
Yakov Posted July 29, 2021 Author Share Posted July 29, 2021 Very interesting, I realized that js barba periodically falls off when it is connected like this: https://unpkg.com/@barba/core But when I saved it and connected it locally as a file barba.umd.js, it stopped falling off Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now