Jump to content
Search Community

GSAP+BarbaJS

GeorgeErshov test
Moderator Tag

Recommended Posts

Hello, everybody. Not so long ago I started studying GSAP and fell in love with its features. I have achieved almost everything I wanted for my project and not long ago I started to study the Barba js bibliography. 
My question probably concerns GSAP + Barba interaction. 
If you open the project and scroll through not much to a block with a project called Blue (there are guys on a moto), you can click on the photo and you will be redirected to another page, absolutely the same. Apart from the fact that the first block says: this PROJECT PAGE or this INDEX PAGE
First the gsap animation is played, and then there is a transition and at this point all my scripts stop working, you can see that the base scrollbar is back and smooth animation with ScrollTrigger stopped working.
I saw an example of barba + gsap + locomotivescroll, but I don't know much about it yet and I'm asking you to look specifically at my example. Help me set up my script correctly so that my animation will play, and then the page will open and all scripts will work correctly.

https://codepen.io/GeorgeDesign2020/project/editor/ZLrYEY

See the Pen ZLrYEY by GeorgeDesign2020 (@GeorgeDesign2020) on CodePen

Link to comment
Share on other sites

Hey GeS. @Ihatetomatoes made some useful articles about GSAP + Barba that you should check out. The core issue here is that you are not recreating/updating the relevant ScrollTrigger and smooth scroll stuff when the new page loads. Unfortunately we don't have the capacity to fix all of the issues for you though.

 

Some pointers related to your tweens though:
 

tl.to(".blue", {
  // ...
  left: "-100%",
  ease: "Expo.easeInOut",
});
  • It's best to use translations instead of left/right/etc. So x: "-100%". But if you have that, it's better to use xPercent.
  • "Expo.easeInOut" is an invalid ease. You're mixing the old and the new syntax. It should just be "expo.inOut".

Read more about those and other mistakes in the most common GSAP mistakes article.

  • Like 2
Link to comment
Share on other sites

6 hours ago, Ihatetomatoes said:

Здравствуй @GeS, Зак прав, я создал несколько обучающих ресурсов Barba.js, которые могут вам помочь.

 

Более конкретно, вот пример репозитория Barba + Smooth ScrollBar + GSAP  и GitHub .

 

Я бы порекомендовал изучить Barba.js, сначала посмотрев этот плейлист на YouTube .

 

Надеюсь, это поможет.

thank you so much!
yes, i just signed up for your free gsap and barba js course, i am taking it with great pleasure! thank you!

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