Jump to content
Search Community

Seamless page transition when clicked on a small image.

Kshitij98k test
Moderator Tag

Recommended Posts

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.

 

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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;

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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 :D:

 

 

Happy Tweening!!!

  • Like 3
Link to comment
Share on other sites

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!!!

  • Like 3
Link to comment
Share on other sites

@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!!!

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...