Jump to content
Search Community

Flip click on a link between pages

Yakov test
Moderator Tag

Recommended Posts

Once again, good time of day!

I want to implement a link transition between pages, as on this site (I attach a screenshot and an example link)

https://studio-size.com/ -

https://prnt.sc/1g61lut - screen

 
An example of flip is made in codepen, for the first time, I tried to connect flip for images first. It worked for one image, BUT not for the cycle :( The first one in the cycle opens all the time... I set the data-flip-id of the element @id, it didn't help...

 

	<xsl:template match="page" mode="сases-block">
		<div>
			<a href="{@link}">
				<img class="thumbnail" data-flip-id="img{@id}" src="{.//property[@name = 'jpg_case_preview']/value}" alt="" />
				<img class="full-size" data-flip-id="img{@id}"  src="{.//property[@name = 'jpg_case_preview']/value}" />
			</a>
		</div>
	</xsl:template>

Maybe it is necessary to do js in a different way than in the example codepen?

 

And the second question is how can I implement Flip animation for switching between pages.

 

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

Link to comment
Share on other sites

Flipping between page changes is a little more involved, and it's hard to advice without knowing how you are doing page changes. If the pages are dynamically loaded, like with a SPA, so some parts of your JavaScript never get reloaded, then you can save the state before the page changes, wait for the new page to load, and then do the animation. If you're not dynamically loading the new page, then it's probably not possible because there would be no way to save the state from the current page and apply it to the next page.

 

  • Like 2
Link to comment
Share on other sites

16 hours ago, OSUblake said:

Flipping between page changes is a little more involved, and it's hard to advice without knowing how you are doing page changes. If the pages are dynamically loaded, like with a SPA, so some parts of your JavaScript never get reloaded, then you can save the state before the page changes, wait for the new page to load, and then do the animation. If you're not dynamically loading the new page, then it's probably not possible because there would be no way to save the state from the current page and apply it to the next page.

 

My pages are not loaded dynamically. Therefore, you can make a transition, I have already done a simple transition between pages. I just need a specific animation, as in the given reference
 
But while I'm facing a problem, I have a flip triggered over the entire area and opens one picture, which is the first in order. It seems that I did it, as in the example from codepen... I can't understand what the error is 😥
Link to comment
Share on other sites

18 hours ago, OSUblake said:

Flipping between page changes is a little more involved, and it's hard to advice without knowing how you are doing page changes. If the pages are dynamically loaded, like with a SPA, so some parts of your JavaScript never get reloaded, then you can save the state before the page changes, wait for the new page to load, and then do the animation. If you're not dynamically loading the new page, then it's probably not possible because there would be no way to save the state from the current page and apply it to the next page.

 

I output 7 blocks of links, each block has its own static page id. In data-flip-id= " img{@id}" I use {@id} so that the data-flip-id is different and tied only to a specific block, but I'm watching the video now, in fact it should work, but I persistently see one block as a link

Link to comment
Share on other sites

If so, you may not need duplicate images in your markup as that's only necessary when crossfading between two different elements.

I've refactored it with some notes. 

The principle is 

1) loop through all the images
2) for each one add a 'click' event listener

---


1) when clicked, get the current state of the image

2) make a state change by toggling a class
3) animate to the new state

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

  • Like 2
Link to comment
Share on other sites

26 minutes ago, Cassie said:

Hey there!

Are you trying to expand *just* the image that you click on to be full screen?

 

In fact, not quite this, I need to implement the transition effect, as given in the reference at the beginning of my question topic. That when you click on a block in which there is some image with a link, when you click on it, a transition occurs, another page opens. I need to hang the flip effect on the page transition somehow.

 

On 7/26/2021 at 4:44 PM, Yakov said:

I want to implement a link transition between pages, as on this site (I attach a screenshot and an example link)

https://studio-size.com/ -

https://prnt.sc/1g61lut - screen

Gsap is still difficult for me, it was more difficult to work only with threejs. 

Link to comment
Share on other sites

37 minutes ago, Cassie said:

Hey there!

Are you trying to expand *just* the image that you click on to be full screen?

By the way, I was able to connect barba, I thought I read that it is well compatible with gsap, but I can't figure out where to attach the animation yet... And I'm not lucky with examples =_=

 

I found a description here, but with an old version of barba...

Edited by Yakov
I added about the old version of barba
Link to comment
Share on other sites

7 hours ago, Yakov said:

My pages are not loaded dynamically. Therefore, you can make a transition, I have already done a simple transition between pages.

 

Then you're loading them dynamically. It's impossible to transition between pages on a hard navigation change because it reloads an entirely new page.

 

48 minutes ago, Yakov said:

I found a description here, but with an old version of barba...

 

Go through their documentation. It shows GSAP usage and even their site uses GSAP.
https://barba.js.org/docs/getstarted/basic-transition/

 

For Flip, you would probably have to save the Flip state to a  global variable outside of barba's init, like inside one of the beforeLeave/leave callbacks, and then do the Flip animation in one of the enter or after callbacks.

https://barba.js.org/docs/getstarted/lifecycle/

 

  • Like 4
Link to comment
Share on other sites

16 hours ago, OSUblake said:

For Flip, you would probably have to save the Flip state to a  global variable outside of barba's init, like inside one of the beforeLeave/leave callbacks, and then do the Flip animation in one of the enter or after callbacks.

https://barba.js.org/docs/getstarted/lifecycle/

 

 

That's just how I can't understand the beforeLeave/leave principle... How to link it 😟

Link to comment
Share on other sites

17 minutes ago, OSUblake said:

I made a project using your link! How to connect barba via beforeLeave/leave with Flip, so that it is like in the given reference in the topic?

 

I worked with before in the Fullpage plugin once, but I suffered for three days then...

I haven't found an example working on this functionality yet..😟

It feels like I'm missing some theoretical point in the stage, and because of this there is a deadlock...

 

 

Link to comment
Share on other sites

Codesandbox's server doesn't seem to play nicely with barba. 

 

I did this locally, and it seemed to work fine, so it should help you get started. 

 

index.js

gsap.registerPlugin(Flip);

let flipState;

barba.init({
  transitions: [
    {
      sync: true,
      beforeLeave(data) {
        const target = data.current.container.querySelector("[data-flip-id]");

        if (target) {
          flipState = Flip.getState(target);
        }
      },
      enter(data) {
        const target = data.next.container.querySelector("[data-flip-id]");
        if (target && flipState) {

          gsap.set(data.current.container, {
            opacity: 0,
            position: "absolute"
          })

          return Flip.from(flipState, {
            targets: target,
            absolute: true,
            scale: true
          });
        }
      }
    }
  ]
});

 

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="styles.css" />

    <title>Static Template</title>
  </head>
  <body>
    <div data-barba="wrapper">
      <main data-barba="container" data-barba-namespace="home">
        <a href="cases.html">Cases</a>
        <div>
          <img
            data-flip-id="img"
            class="thumbnail"
            src="https://sun6-22.userapi.com/s/v1/ig2/awq7qUcGZAS-9dsYLrQoqJHwj9fpjNo6pi0DdawtulIcSqr6fqicNesTWXdtTwzynhR9S1oHx8G5gUyZMvOeJ12P.jpg?size=400x0&quality=96&crop=1,136,1077,1077&ava=2"
            alt=""
          />
        </div>
      </main>
    </div>

    <script src="https://unpkg.com/@barba/core"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Flip.min.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js"></script>
    <script src="index.js"></script>
  </body>
</html>

 

cases.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="styles.css" />

    <title>Static Template</title>
  </head>
  <body>
    <div data-barba="wrapper">
      <main data-barba="container" data-barba-namespace="cases">
        <a href="index.html">Home</a>

        <div>
          <img
            data-flip-id="img"
            class="bgimage_block"
            src="https://sun6-22.userapi.com/s/v1/ig2/awq7qUcGZAS-9dsYLrQoqJHwj9fpjNo6pi0DdawtulIcSqr6fqicNesTWXdtTwzynhR9S1oHx8G5gUyZMvOeJ12P.jpg?size=400x0&quality=96&crop=1,136,1077,1077&ava=2"
            alt=""
          />
        </div>
      </main>
    </div>

    <script src="https://unpkg.com/@barba/core"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Flip.min.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js"></script>
    <script src="index.js"></script>
  </body>
</html>

 

You're probably going to like dynamically adding a data-flip-id attribute on click. 

myElement.setAttribute("data-flip-id", "img");

 

  • Like 1
Link to comment
Share on other sites

Unfortunately, it does not work... Even if I add @id to img in data-flip-id, so that it is different, because img must be different in this data. But it doesn't work out...

 

And on pages like cases.html there should be such a block... There may be a video inside the div.bgimage_block. Therefore, there is a block there.

 

<div class="bgimage_block" 
	style="background-image: url(https://img2.goodfon.ru/original/320x240/1/a1/bow-lake-banff-national-park.jpg);
">
</div>

Barba work, but without animation..

Edited by Yakov
about animation
Link to comment
Share on other sites

The code I provided works. You're going to have to customize it to fit your project. The markup doesn't matter, it can flip between an image and a block. We are animating between elements with the same flip-data-id on different pages.

 

If you need more help, be sure to read through all the Flip docs.

 

Check out the showcase demos and the how-to demos.

 

This video is a good starting place.

 

 

 

  • Like 1
Link to comment
Share on other sites

I have already watched the video, I have practiced doing something from there, taking into account the recommendations of Cassie. And it worked.

But here is not a separate working out of flip, namely in the transition. In the gsap topics, I found a description, only according to the old version of barba...

I took your example, barba works, but the flip process itself seems to work only at the end, when the page has already opened, there is some flashing of the block on the page. But it does not work during the download process...

As in the reference, in it, flip is in the process...

https:/ / studio-size. com/

https://prnt.sc/1g61lut - screen

Some simple animation of the transition is obtained, but the entire page as a whole, for example, opacity or zoomout, but not a separate block...

There is clearly some nuance here that I don't understand and probably just don't know that it exists :(

Link to comment
Share on other sites

I don't know what to tell you. Flip is working as intended. IF you need help with Barba, it would be best to ask questions over on their slack.

https://join.slack.com/t/barbajs/shared_invite/enQtNTU3NTAyMjkxMzAyLTkxYWUwZmM1YWQxMmNlYmE0ZjY4NDQxMGUxYjkwYWFlMzEzOWM4OTRhMWRmYTQyYzFlMmQ3OGFmYmI3MWY0OWY

 

If you need finer control over the loading process, perhaps try using a framework with a router, like Vue. 

 

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

 

 

  • Like 2
Link to comment
Share on other sites

20 hours ago, OSUblake said:

Codesandbox's server doesn't seem to play nicely with barba. 

By the way, this code works, but why doesn't the other option work?

 

barba.init({
  transitions: [{
    name: 'opacity-transition',
    leave(data) {
      return gsap.to(data.current.container, {
        opacity: 0.2
      });
    },
    enter(data) {
      return gsap.from(data.next.container, {
        opacity: 0.8
      });
    }
  }]
});

 

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