Seamless page transition when clicked on a small image.

[Kshitij98k 0 Likes (Newbie)]

I am looking for a page transition effect when clicked on a smaller image and then that small image is going to animate and cover the full screen and now will behave as a different page...

Refer to this portfolio website :- https://www.chriswilcock.co/

 

(Just click on any image like: Discovery Land co, Bear Grylls, etc..), a liquid kind of page transition happens, if you look at the url while transitioning, it is actually a different page...

 

Addon:-

 

I think this page is using barba.js for the transitions, but please help me, because I want to create a similar transition, and I am also using locomotive scroll on my website.

 

[GreenSock 18,265 Likes (Superhero)]

This is exactly what the Flip plugin can help with. Check it out: https://greensock.com/docs/v3/Plugins/Flip

 

It's a membership benefit of Club GreenSock.

 

 

There's a video there that explains it all. 

 

Happy tweening!

[velkas 7 Likes (Newbie)]

Also looking to recreate this effect in a Nextjs application – anyone have an example or two they could share that uses the Flip plugin?

[GreenSock 18,265 Likes (Superhero)]

5 hours ago, velkas said:

Also looking to recreate this effect in a Nextjs application – anyone have an example or two they could share that uses the Flip plugin?

Not really (I'm not a Next.js guy), but I'd encourage you to wire up something very simple, like in CodeSandbox (here's a next starter: https://codesandbox.io/s/gsap-next-js-starter-jekrn) and then if you get stuck, post it back here and we'd be happy to help with any GSAP-specific questions. 

[velkas 7 Likes (Newbie)]

Thanks! Codesandbox is giving me server errors so I have a local Nextjs setup attempting to create an implementation of the Vue example here: 

See the Pen LYQaOBm by cassie-codes (@cassie-codes) on CodePen

 

Running into an error when calling Flip.getState in the effect cleanup: TypeError: Cannot read properties of null (reading '_gsap')

 

import { Flip } from "gsap/dist/Flip";
import { gsap } from "gsap";
import { useEffect, useRef } from "react";

function Potions() {
  gsap.registerPlugin(Flip);
  let iconRefs = useRef([]);

  useEffect(() => {
    let iconRefValue = null;

    if (iconRefs.current) {
      iconRefValue = iconRefs.current;
      Flip.getState(iconRefValue); // Works
    }

    return () => {
      if (iconRefValue) {
        Flip.getState(iconRefValue); // Doesn't work
      }
    };
  }, []);

  return (
    <>
      <img
        className="avatar flipMe"
        ref={(el) => {
          iconRefs.current.push(el);
        }}
        src="/person.svg"
      />
      <img
        className="potion flipMe"
        ref={(el) => {
          iconRefs.current.push(el);
        }}
        src="/potions.svg"
      />
      <img
        className="spell flipMe"
        ref={(el) => {
          iconRefs.current.push(el);
        }}
        src="/spell.svg"
      />
    </>
  );
}

export default Potions;

 

 

[Cassie 5,141 Likes (Superhero)]

Heya!

 

You're importing FLIP from the UMD files and GSAP from the ESModules. 

 

next.js doesn't do ESModules - you'll need to import both files from the dist directory.

[velkas 7 Likes (Newbie)]

I get the same error when importing as follows:

import { Flip } from "gsap/dist/Flip";

import { gsap } from "gsap/dist/gsap";

[Cassie 5,141 Likes (Superhero)]

Ok, well glad your imports are consistent now at least!

 

Why are you trying to grab the state here? Are you trying to emulate vue's beforeUnmount event?
 

return () => {
 if (iconRefValue) {
   Flip.getState(iconRefValue); // Doesn't work
 }
};

 

As you're using react maybe this demo is more helpful?

See the Pen MWmqzjE by GreenSock (@GreenSock) on CodePen

 

If not maybe try chat to these folks - Lunch dev discord community Lots of React experts there, but very friendly to beginners.

[velkas 7 Likes (Newbie)]

Thanks Cassie! Working with the Lunch dev crew on a solution and here's where we're at: https://codesandbox.io/s/empty-sun-o3h0yq?file=/pages/index.js

 

No console errors but the images in the demo aren't being properly animated by the Flip plugin - they flash on screen after a delay. Anyone available to take a look?

[Cassie 5,141 Likes (Superhero)]

Ok - I had a look and simplified it down a bunch. I'm using flip-data-id to keep a relationship between elements as brand new DOM is being rendered each time.

Here's my best bash at it. For some reason it's not working when you navigate back to whichever page you first landed on.

That seems like something someone with more react understanding would be able to pin down. (sorry I can't help any more than this)

https://codesandbox.io/s/elated-wood-f9y3bi?file=/pages/_app.js

[Cassie 5,141 Likes (Superhero)]

Maybe @SteveS? Or possibly someone in Lunch Dev.

 

[velkas 7 Likes (Newbie)]

Thanks for your help @Cassie 😄 Hopefully someone can step in and help get this across the finish line 😅

[velkas 7 Likes (Newbie)]

On 8/24/2022 at 12:03 PM, velkas said:

Thanks for your help @Cassie 😄 Hopefully someone can step in and help get this across the finish line 😅

Any React gurus available to help out? This is where I'm at:

https://codesandbox.io/s/cool-moon-y1wcni?file=/pages/index.js

[Cassie 5,141 Likes (Superhero)]

Not having any luck over on the lunch dev discord?

I'm afraid we're a little short on 'react guru's' over here

[velkas 7 Likes (Newbie)]

Yeah, no luck there - it's stumping them too. I'll make a post on SO and report back 👍

[Rodrigo 5,087 Likes (Superhero)]

Hey @velkas,

 

I think one approach that you should try is to use layouts and persistent nested layouts in your app. The approach you have in your last sandbox sample is no good since everything is being re-rendered everytime you go to a different route. I recommend you to check these links in order to get a better grasp of these concepts:
https://nextjs.org/docs/basic-features/layouts#per-page-layouts

https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/

https://www.cutintothejamstack.com/articles/dynamic-content-nextjs-shared-layouts

 

I've used some of the concepts in Adam Wathan's article in a SaaS built on top of Next, but never applied to page transitions, but it should help you get started to persist some state data using the Flip Plugin (like @Cassie's Vue example). Also you could explore Next's dynamic imports and see if those can be of any help.

 

Unfortunately I don't have time right now to set up  an example of this approach applied to page transitions, but hopefully those links are enough to get you started.

 

Also take a look at this video since is from 2021. While Adam's article is great and most of the features you see in it should still work in Next, it's from 2019, which is a bit outdated in web-dev years :

 

 

Happy Tweening!!!

[velkas 7 Likes (Newbie)]

Thanks @Rodrigo! I'll take a look at those resources and post back with any developments 👍

[velkas 7 Likes (Newbie)]

So after much debugging, the following "works":

https://codesandbox.io/s/dazzling-estrela-kj4qkf?file=/pages/index.js

 

Only thing I'm not sure of is why it only works when the following line is present in the effect cleanup: Flip.getState(flipEls); Demo breaks if that line is removed. No idea why... 🤷‍♂️ Any ideas?

[Rodrigo 5,087 Likes (Superhero)]

The reason for that is because you're still rendering the three images on every route change. That's the main idea of layouts and having as many layouts as your app might need, depending on the design and use, and extract every element that will be used in every of those routes into the layout. In this case the three images could be in the specific layout component for those routes and the rest of the content could change on a per-route basis.

 

@velkas I believe is crucial to understand exactly what you intend to do here. @Cassie's sample is a bit different from the website mentioned by the OP in the first post of this thread. But regardless of that, you should move the images or the elements/content you want to flip or animate on every route change, that is common to all the routes, to the layout and handle the flipping animation in the layout while checking for pathname in Next router using an useEffect hook to trigger the animation. Also this will simplify and reduce your code significantly.

 

Happy Tweening!!!

[Rodrigo 5,087 Likes (Superhero)]

@velkas

 

Take a look at this:

https://stackblitz.com/edit/nextjs-bvdjmq?file=components%2FImagesContainer.js,pages%2F_app.js

 

That's basically the idea I was referring to, keep everything outside the pages and render it just once and Flip the images on route changes. The layout component is there and could be used in a similar fashion for nested routes, but for this example is actually not needed.

 

Happy Tweening!!!