Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Chriz

Creating a full-page morph transition

Recommended Posts

Hello !
I have been creating WordPress sites for years, I still have some good CSS HTML basics and a very little in JS ...
which brings me here is the desire to build more dynamic sites, with possibilities more extensive, more animate than I can do with WordPress...
Where would you advise me to start? I am first interested in morph effects of page transitions ...
Thank you for your advices !
Ps. i'm using Visual Studio and i love it !

Link to comment
Share on other sites

Hey Chriz and welcome to the GreenSock forums! You're about to start a fun adventure into the world of animation :) 

 

I would recommend that you start by learning the basics of JavaScript. There are some free tutorials and video courses that you could go through online that will be very useful to get a foundation in even before you start working directly with GSAP. Most questions that we answer here on the forums end up being logical or JavaScript related issues, not GSAP ones, which is fine because we're happy to help but it shows the importance of having a good understanding of JavaScript.

 

In terms of learning GSAP, our Getting Started article is the best place to start! 

 

 

Once you've read through that it might make sense to check out GSAP's documentation and then the MorphSVGPlugin page :) 

 

 

  • Like 2
Link to comment
Share on other sites

Hi Zach! Many thanks for your reply. Yes i will learn thoses tutos before anything, i already done a litle project on looking a tuto on youtube as you can see here https://www.produits-locaux-rennes.fr/

not fabulous, its just a start. I prefer doin tutos with a project on the air it really enthousiam me, than i'm not a young guy, 52, and lazy but following a tutorial that I really need, like the transition morphing from one page to another, gets me so excited that I learn 10x faster than learning rudiments from B to BA ;)

If you know one doin exactly this i will pay you a cofee or a whisky as you prefer !

Link to comment
Share on other sites

The page I linked to in the previous post has a video about using morphs. We don't have tutorials specifically for morphing "from one page to another" because that doesn't make too much sense :) You can only morph individual elements on a page. 

Link to comment
Share on other sites

perhaps i mistake, but if you click on links on nav top here, you can see what i'm looking for https://www.beangels.eu/fr

i tought the whole section, of main, done a morph... 

Link to comment
Share on other sites

18 minutes ago, Chriz said:

but if you click on links on nav top here, you can see what i'm looking for https://www.beangels.eu/fr

i tought the whole section, of main, done a morph... 

Ah, that's what you mean. Yes, that's just animating one element that covers the whole page :) 

 

The steps to create that are:

  1. Create a morph SVG animation that covers the whole screen.
  2. Create a morph SVG animation that uncovers the whole screen.
  3. When a link is clicked, prevent the default behavior and run the animation created in step 1 (potentially also start preloading the content from the new page).
  4. When that animation has finished, switch out the old page's content with the new page's content.
  5. Once the new content has been loaded, run the animation created in step 2.

Does that make sense?

 

This thread has more information on animating blobs (including one going to full screen at the very bottom of Mikel's demo):

 

There's a handy library called barba.js that you can pair with GSAP to load the next page's content and help run your animations. In fact,  the site you linked to uses barba.js and GSAP on their website (as does the barba.js site)!

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

your advice step by step seems to me very well, it just seems technically difficult for my level :)
I could follow Mikel's codePen to start but his example works on the same page I think. Where would you direct me to start?

Link to comment
Share on other sites

just find a tuto to follow, if it can help others :) 

 

  • Like 2
Link to comment
Share on other sites

Hi @Chriz welcome to the forum.

 

I see you bumped another thread asking for examples. In case you were unaware the video series you posted above has a link to download the working files in the description (click "show more"). Please note however that the tutorial you referenced uses the older version of both GSAP and Barba. So if you are just getting started on your journey with each, then I would highly suggest using GSAP 3 and Barba v2.

  • Like 2
Link to comment
Share on other sites

1 hour ago, Chriz said:

Where would you direct me to start?

I would suggest starting with step 1 that I listed: creating a full page animation of an SVG element. We're happy to help if you get stuck, but the Getting Started article + MorphSVG docs should be enough to get you started.

Link to comment
Share on other sites

Thank you, sorry yes I was looking for a tutorial where I would just have to copy paste the code to advance on my project ... I can't wait to redesign my WP site that's why but it's true that it does is not the best method for learning. I will proceed step by step especially if you are ready to help me it is very kind to you.

Link to comment
Share on other sites

3 hours ago, Shrug ¯\_(ツ)_/¯ said:

Hi @Chriz welcome to the forum.

 

I see you bumped another thread asking for examples. In case you were unaware the video series you posted above has a link to download the working files in the description (click "show more"). Please note however that the tutorial you referenced uses the older version of both GSAP and Barba. So if you are just getting started on your journey with each, then I would highly suggest using GSAP 3 and Barba v2.

hi Shrug thanks for your reply, yes i understand what you say, by replacing the older js lib... i will look at this base to learn a few more about how it works. ;)

Link to comment
Share on other sites

On 2/22/2020 at 5:54 PM, Chriz said:

I will proceed step by step especially if you are ready to help me it is very kind to you.

Sure, like I said we can help wherever you get stuck.

  • Thanks 1
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.
×