Share Posted January 18, 2021 Hi all, first of all thanks for the new Flip-Plugin! All I saw are supernice and easy transitions. Currently wanting to use it in a project, where I transition from an image on a project-list.vue to some kind of header image on the respective project detail page. It is the same image but two different instances of it and, of course, they're lying in two different files and also routes. From what I saw in the Flip-Plugin, it is totally possible to animate two different targets but I was wondering how that might work if the targets are not in the same file. How can I get the state of the other target? Emitting an event with the state as a payload will problably not work as project.vue will only be loaded once the user navigates to it. This is btw. exactly whats the purpose of this animation: a page transition. This example only uses two divs in the same file. Short excerpt of my code looks like this: in project-item.vue // project-item.vue // event handler to start transition <div @click="transitionImage" /> // ... // the html structure with the flip-id <image-zoom v-if="project.fields.image_top.length && isCurrent" :image="project.fields.image_top[0]" class="image" data-flip-id="img" /> // ... transitionImage() { // TODO: get state of other image in project.vue const state = Flip.getState('.image') Flip.from(state, { duration: 0.6, fade: true, // make sure iamges cross-fade rather than just swap ease: 'power1.inOut' }) } and in project.vue // project.vue <div data-flip-id="img" class="image"> <base-image :image="page.fields.image_top[0]" /> </div> See the Pen XWKLYWe by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Share Posted January 18, 2021 Hey super.asdf and welcome. Can you please provide a minimal example in Vue of what you're trying to accomplish? That will make it a lot easier for us to help you with the transition Side note: We will eventually be coming out with a tutorial about doing some basic page transitions with Flip. It will be focused on using libraries like Barba to do so, but perhaps it can also include some basic demos of React and Vue as well. 5 Link to comment Share on other sites More sharing options...
Author Share Posted January 19, 2021 Hi Zach, Thanks for your reply. Sure here it is. Forked this one from another Vue library called "vue-flip-toolkit", which kinda illustrates the desired behaviour. The blue box should be an image, which, on click, leads to a new route and transitions the image to full screen or some different size. I also added the GSAP function and id's but uncommented it to indicate where I reckon they belong. https://codesandbox.io/s/tzq9r Oh really, that would be really helpful! Is there any due date when we might be expecting these tuts? Will look into that lib you mentioned, though... Link to comment Share on other sites More sharing options...
Share Posted January 19, 2021 Thanks for the demo! That was helpful. I created a basic demo Flipping between pages using Vue here. It's my first demo I made in Vue so if I'm making any mistakes please let me know See the Pen eYdXZJZ by GreenSock (@GreenSock) on CodePen 5 hours ago, super.asdf said: Oh really, that would be really helpful! Is there any due date when we might be expecting these tuts? Not sure - I have some more important things to do ahead of it. Though with how easy it was to setup this page transition in Vue, maybe it'll be coming sooner rather than later 5 hours ago, super.asdf said: Will look into that lib you mentioned, though... It's really for no-framework projects. If you're using something like Vue you probably don't need it as my demo shows. 2 1 Link to comment Share on other sites More sharing options...
Share Posted February 25, 2021 On 1/19/2021 at 3:23 PM, ZachSaucier said: Thanks for the demo! That was helpful. I created a basic demo Flipping between pages using Vue here. It's my first demo I made in Vue so if I'm making any mistakes please let me know Not sure - I have some more important things to do ahead of it. Though with how easy it was to setup this page transition in Vue, maybe it'll be coming sooner rather than later It's really for no-framework projects. If you're using something like Vue you probably don't need it as my demo shows. This looks like a really useful plugin. Is there a working example in the demos of this working with route changes in React + react-router? Link to comment Share on other sites More sharing options...
Share Posted February 25, 2021 1 hour ago, robwalsh said: Is there a working example in the demos of this working with route changes in React + react-router? Not at this point, no. But it should definitely be achievable. None of us who have been making demos with the Flip Plugin are very good with React at this point though. Link to comment Share on other sites More sharing options...
Share Posted February 25, 2021 Cool. No worries. Thought there might be one I was missing. Will post an example once I've done it. Link to comment Share on other sites More sharing options...
Share Posted February 25, 2021 @ZachSaucier are there any tutorials yet on using Flip with Barba.js? Link to comment Share on other sites More sharing options...
Share Posted February 25, 2021 FLIP is pretty new for tutorials, only a few months old. Could be some, but I still don't know about them. As for barba.js you can check out ihatetomatoes. He also have some other nice courses on gsap. https://ihatetomatoes.net/get-barba-101/ 2 Link to comment Share on other sites More sharing options...
Share Posted February 25, 2021 Hey @Kyle Craven and welcome to the GreenSock forums. 12 minutes ago, Kyle Craven said: are there any tutorials yet on using Flip with Barba.js? No, we haven't been able to get to a more full tutorial with Barba.js yet (though I started work on it a while back). The closest thing currently is the introduction/overview video in the Flip docs. That along with the Flip how-to pens and showcase should get you started. If you have a specific question please ask! It'd probably be best to start a new thread though Link to comment Share on other sites More sharing options...
Share Posted August 21, 2022 On 2/25/2021 at 4:18 PM, ZachSaucier said: Hey @Kyle Craven and welcome to the GreenSock forums. No, we haven't been able to get to a more full tutorial with Barba.js yet (though I started work on it a while back). The closest thing currently is the introduction/overview video in the Flip docs. That along with the Flip how-to pens and showcase should get you started. If you have a specific question please ask! It'd probably be best to start a new thread though Any update here? 😄 Link to comment Share on other sites More sharing options...
Share Posted August 21, 2022 These links may be helpful? Link to comment Share on other sites More sharing options...
Share Posted August 21, 2022 I'm not really sure whether you're after barba or nuxt or vue... You've commented on a couple of threads But maybe this is helpful See the Pen LYQaOBm by cassie-codes (@cassie-codes) on CodePen At the end of the day it's all the same thing really - you just need to wrangle the right entrance/exit/mounted/onmount events, which takes a bit of docs reading and some trial and error sometimes. Pop back with a demo and make a new thread if you need more specific help. Good luck! Link to comment Share on other sites More sharing options...
Share Posted August 21, 2022 Thanks! Looking for a react example (nextjs specifically) but I’ll reference the above and see if I can link a workable demo 👍 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