Jump to content
GreenSock

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

Flip click on a link between pages

Recommended Posts

4 hours ago, Yakov said:

Yes, about him. It's just that if codesandbox couldn't work with barba, then the usual opacity wouldn't work, right?

 

It's really not working all the way. If you change the duration, it won't complete. It should wait 10 seconds before showing the next page. Locally it will work fine. It's just something with codesandbox's environment. 🤷‍♂️

 

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

 

 

  • Like 1
Link to comment
Share on other sites

41 minutes ago, Yakov said:

Very interesting, I realized that js barba periodically falls off when it is connected like this: https://unpkg.com/@barba/core

 

It might have something to do with the fact that it has redirect to get the latest version, so it will return this.

https://unpkg.com/@barba/core@2.9.7/dist/barba.umd.js

 

It might be swapping the instance out in the middle of the transition.

  • Like 1
Link to comment
Share on other sites

On 7/29/2021 at 7:04 PM, OSUblake said:

 

It might have something to do with the fact that it has redirect to get the latest version, so it will return this.

https://unpkg.com/@barba/core@2.9.7/dist/barba.umd.js

 

It might be swapping the instance out in the middle of the transition.

Good afternoon.

I managed to make a transition animation when clicking on "Back", but when clicking on a link with index.html it is not possible to implement flip.

In Slack Barba, only one person answered me, but he says that barba is not very good... But it turns out to make an animation in the cover__div block... P.S.: codesandbox why doesn't it work out the transition here... 

 
Maybe there is really some option with another plugin for the transition? 😒
Link to comment
Share on other sites

Sorry, I'm not familiar with xslt or how that would work.

 

You don't need to use npm with Vue, but it's better as it will create a smaller build. I posted a demo on the previous page with Vue.
 

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

 

Link to comment
Share on other sites

 

 
Is it possible to do this in codesandbox?

Just a question, how to combine this with the transition? Let's say I don't understand the principle itself, how these two functions are combined.

I have never worked with either Vue or travelapp :(

1 hour ago, OSUblake said:

Sorry, I'm not familiar with xslt or how that would work.

 

You don't need to use npm with Vue, but it's better as it will create a smaller build. I posted a demo on the previous page with Vue.
 

 

 

 

 

Link to comment
Share on other sites

Yes, you can do it on CodeSandbox.

 

The best way to learn is by checking out their docs.

https://vuejs.org/

Link to comment
Share on other sites

On 8/4/2021 at 5:42 PM, OSUblake said:

Yes, you can do it on CodeSandbox.

 

The best way to learn is by checking out their docs.

https://vuejs.org/

I tried to make your example from codepen to begin with, just transferring it to the site, I connected all the js, and inserted the codes, but nothing worked for me. Although banal https://vuejs.org/v2/guide/#Declarative-Rendering it works. So vue connected correctly

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