Jump to content
Search Community

Help - Page Transitions (GSAP + barba.js + wordpress)

clickdeproduto test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi guys! I'm learning GSAP a few months, with the help of community, this is my first work using GSAP, in progress yet.

 

 

Thanks all for help! And i have another  question, about page transitions, shared element transitions between pages.

 

See website reference at link: 

https://alfacharlie.co/

 

See the effect of transitions between pages, the softness the animations. 

I used the barba.js in html + css and it worked, but not working fine in wordpress, someone to help me achieve page transitions in wordpress site?

Link to comment
Share on other sites

Hey clickdeproduto, your site looks nice!

 

15 minutes ago, clickdeproduto said:

not working fine in wordpress, someone to help me achieve page transitions in wordpress site?

 

That's quite a broad statement. The issue with page transitions in WordPress using something like Barba is that Barba assumes that you have all of the HTML of the next page already. So since WordPress doesn't have set .html pages, I can see it being difficult if not impossible to use something like Barba to transition between pages in WordPress. 

 

Maybe there's a WordPress plugin that can help with full page transitions similar to Barba? I don't know ?‍♂️


In any case, this is a bit unrelated to GreenSock so I don't know how much help you'll be able to receive on this forum. 

Link to comment
Share on other sites

1 minute ago, ZachSaucier said:

In any case, this is a bit unrelated to GreenSock so I don't know how much help you'll be able to receive on this forum. 

 

There have, however, been other discussions here about using Barba in the past, maybe if you search around you'll find something that might be of use?

 

https://greensock.com/forums/search/?page=1&q=barba

 

  • Like 2
Link to comment
Share on other sites

Others might have worked. I know that one can use Barba + GSAP and WordPress together as I've met others who have worked with it. I just haven't done myself.

 

Hopefully someone will chime in on the matter is you'll find enough information in the other threads.

Link to comment
Share on other sites

  • 1 year later...
On 8/2/2019 at 2:07 PM, clickdeproduto said:

Hi guys! I'm learning GSAP a few months, with the help of community, this is my first work using GSAP, in progress yet.

 

 

Thanks all for help! And i have another  question, about page transitions, shared element transitions between pages.

 

See website reference at link: 

https://alfacharlie.co/

 

See the effect of transitions between pages, the softness the animations. 

I used the barba.js in html + css and it worked, but not working fine in wordpress, someone to help me achieve page transitions in wordpress site?

Please help how i can implement WordPress and Barba do you have any source code I can look at? or learning resources? 

Link to comment
Share on other sites

On 8/3/2019 at 12:17 AM, clickdeproduto said:

help me and recommend any online courses that teach advanced GSAP, thanks.

 

Like this site:

https://alfacharlie.co/

Hey! By far, the BEST GSAP lessons you can get is Bella by @Ihatetomatoes Petr is a great teacher and not only you will learn super GSAP and ScrollTrigger techniques, but you will learn how to properly structure code, how to implement  Barba and LOT more. It catapult me to another level. Highly recommended 👍 

  • Like 1
Link to comment
Share on other sites

  • 3 months later...
On 8/3/2019 at 12:12 AM, clickdeproduto said:

ZachSaucier and Dipscom, thanks for feedback. 

 

I thought someone could have had the same problem using barba.js, GSAP and wordpress, because I see many sites that use GSAP with page transitions, I will keep searching.

Same problem. I am using a plugin called Steroides for Elementor that include Barba.js but I can't get it work.

Link to comment
Share on other sites

1 hour ago, mauro33 said:

Same problem. I am using a plugin called Steroides for Elementor that include Barba.js but I can't get it work.

@mauro33 we don't really support 3rd party tools here, but it might help if you gave more details about what's happening. Are you getting some kind of error? Are you trying to use ScrollTrigger and maybe forgot to kill() the old ones before moving to a new page or something? A minimal demo always gives you the best shot at getting a useful answer. 👍

Link to comment
Share on other sites

I don't know if my two cents will be really helpful but I'll try.

I'm working with WordPress a lot and have done so for quite a while and I'm rather sure that your problems really have little to do with WordPress.

WordPress it self is more ore less only handling the  backend stuff, your problems are with the front end things. This is taken care of (in almost all cases) by the theme you use. Fixing and debugging WordPress-theme related front end trouble is actually not very different from fixing the same problem with plain HTML sites.

The only thing that makes it more complex ist that you have to understand where to change what in WordPress, as there are a lot of potential influences.

 

My meaning is, that focusing on the WordPress side of things is usually the wrong way to start. I would suggest to Make heavy use of your browsers debugger to unterstand what's going wrong un the front end, once you figured that out, you might have to dig deeper into WordPress - or not. :-)



 

  • Like 2
Link to comment
Share on other sites

On 6/12/2021 at 7:27 PM, GreenSock said:

@mauro33 we don't really support 3rd party tools here, but it might help if you gave more details about what's happening. Are you getting some kind of error? Are you trying to use ScrollTrigger and maybe forgot to kill() the old ones before moving to a new page or something? A minimal demo always gives you the best shot at getting a useful answer. 👍

Yes, there's an error when I inspect the page in the navigator dev tool . It is related to the ScrollToPlugin.min.

Screen-Shot-2021-06-16-at-2.45.13-PM.jpg

Link to comment
Share on other sites

  • 2 months later...
On 6/17/2021 at 2:57 AM, GreenSock said:

What's the error message exactly (from the console)? 

 

If you want some help, we'll definitely need a minimal demo please. Otherwise we're just totally taking shots in the dark and guessing :)

 

I have not yet been able to find out what the error is. I am going to buy a hosting to upload the project since I am using elementor. Thanks

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