mrtsrds Posted April 1, 2021 Share Posted April 1, 2021 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. Link to comment Share on other sites More sharing options...
Rodrigo Posted April 1, 2021 Share Posted April 1, 2021 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!!! 4 Link to comment Share on other sites More sharing options...
akapowl Posted April 1, 2021 Share Posted April 1, 2021 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 3 Link to comment Share on other sites More sharing options...
mrtsrds Posted April 2, 2021 Author Share Posted April 2, 2021 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. Link to comment Share on other sites More sharing options...
Solution akapowl Posted April 2, 2021 Solution Share Posted April 2, 2021 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. 4 Link to comment Share on other sites More sharing options...
mrtsrds Posted April 2, 2021 Author Share Posted April 2, 2021 Yeah. Thank you. I can do whatever I want with the examples on this page. 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