Jump to content
Search Community

FLIP-Plugin: animate across routes in Vue.js 2

s94QREspJB test
Moderator Tag

Recommended Posts

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

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.

  • Like 5
Link to comment
Share on other sites

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

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.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

  • 1 month later...
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

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

  • 1 year later...
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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...