Page Transition Animation

[mrtsrds]

Hi,

 

http://www.macandevelopment.com/fr I want to make a site similar to this site. I could not find an example of page change animations on the site. Can you help with this? I am using vuejs and gsap.

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

Animations with Vue and GSAP are a breeze, in fact Vue's official documentation mentions GSAP as one of the alternatives to create animations since some members of the core team in Vue actually use GSAP in their projects.

 

I don't have enough time to set up a working sample right now, but you should start by checking Vue's documentation on animations:

 

https://vuejs.org/v2/guide/transitions.html

 

And then Vue Router's docs on the same subject:

 

https://router.vuejs.org/guide/advanced/transitions.html

 

Happy Tweening!!!

[akapowl]

 

Maybe this can help get you started with regard to using GSAP with it ( the example on there makes use of GSAP 3.5.0 )

 

https://dev.to/danielhult/vue-page-transitions-4d41

[mrtsrds]

Thank you for your answers. I'll investigate a little more. The part I can't do is when a div goes to the right side of the site with an animation when the page changes.

[akapowl]

 

I am not familiar with vue at all, so I won't be much of a help from here on, but what you describe ( if I understood correctly is the animation when clicking on 'projets' on that page e.g. ) might be an ideal usecase for GSAP's FLIP-Plugin , which is a Club GreenSock plugin for ShockinglyGreen members and above.

 

Joining the club usually pays off within a short amount of time - especially with regard to the FLIP-Plugin because it can just save you enormous amounts of time and thinking about what would be neccessary for an animation like that.

 

There is an example of Flipping between pages with vue in this thread below. I am not sure it does exactly what you'll need for that type of animation on the page you linked to, but maybe it can help you get started or inspired at least.

 

 

[mrtsrds]

Yeah. Thank you. I can do whatever I want with the examples on this page.