Jump to content
Search Community

Issue with GSAP 3 & BarbaJS when page loads to itself

digitalfunction test
Moderator Tag

Recommended Posts

Hi All…

 

Trying to learn GSAP using Barba – I’m self-taught so constantly running into issues and thanks for this forum it has helped in many ways.

 

I am hoping this question can be answered without a demo, because I am working in a dynamic environment and my issue is related to navigating from project to project, which technically is the same layout within the system, just loading in the content dynamically based on the project.

 

To set this up, using JS & HTML, I have the latest versions of GSAP, ScrollTrigger, & Barba plugged up and the page transitions work from one page type to the next – took some time, but slowly figured it out.

 

My issue now, are the project pages of the site within the portfolio section. The first time you navigate to a project, the page transitions and tl animations work as I created. The problem is when I navigate from one project page to the next project, on leave the page transitions out as expected, but then nothing is happening on enter. The page transition and tl animation don’t seem to reload. I have tried kill, reset, & clearProps – it could be the placement, but tried it many places with no luck. Based on the console logs everything is firing based on the sequence I setup, but I feel the whole page/timelines/ScrollTrigger needs to be reset/restart.

 

Also, not sure where to place the reset – within Barba I am using both views and transitions. It is just the page is loading on to itself so how do I reset everything, so it starts all over and goes through all the animations when you go to the next project page. Any direction or link to other examples would be helpful.

Link to comment
Share on other sites

  • 3 weeks later...

 

On 8/7/2021 at 5:11 PM, Cassie said:

Hey there @digitalfunction

I'm afraid it's pretty difficult to debug blind.

Is there any chance you could set up a minimal demo on codesandbox?

Failing that - maybe you could show the code you're trying to execute onLeave and onEnter and what's logging out to the console?

 

Here is the link to the codepen project files - https://codepen.io/jeff-stark/project/editor/XLQNOO

 

Again the demo is static, but the site I am working on is dynamic so the different page types will have different animations - so if you navigate from one subpage to another subpage (namespace = the same name) everything should reset or recalculate so the animations start all over from scratch. Same concept for portfolio page types to the next portfolio page type. 

 

I am not sure if my issue is with gsap3 or barba. I am basically trying to reset/refresh/recalculate all the animations to start from scratch when you go back and forth between the 2 pages. 

 

When the page initially loads and leaves all the animation trigger - main container. black background, the page title, then the content. It all animates out as I want it, but the next container  only animates the main container and everything beyond that does not. 

 

I have tried everything - kill, restart, to, from, fromTo etc... I can get the main container within the barba wrapper to animate between the pages, but data-barba="container" data-barba-namespace="subpage"  does not reset. Once it goes to the next page/container the timeline inline styles are removed from the data-barba-namspace="subpage" containers so it does not animate. Not sure why this is happening.

  • GSAP - Again, I have tried just about everything - I am novice to JavaScript so having a hard time figuring this out. 
  • Barba - tried "views", different transition namespaces, all the different hooks - just not sure where to put the kill or reset or whatever I am missing to make it reset all the timeline values on the next container.

I am hoping someone can help. PLEASE and thank you for your time. 

 

Let me know what else you need.

 

 

 

 

 

 

 
Link to comment
Share on other sites

Hey @digitalfunction

 

My initial response was totally heading in the wrong direction, so I hope this time I got your problem right. If so, it is a barba related logic problem, that I myself actually stumpled upon in a bit different way and that one of my first questions here was about, so I'll try to help you out here.

 

The reason the individual elements do not animate in anymore on page-change is because in your JS you only get the elements once on page load. Since the elements that are being stored in those variables will get wiped by barba on page-change, there will be no more reference to any elements anymore that you could animate in. So on every page-change you'll have to get the neccessary elements from scratch, as they will change every time. I did that inside each of the functions you are calling here for the animations, and it seems to work just as I'd expect.

 

Is that what you were going for?

 

https://codepen.io/akapowl/project/editor/d04bbd7aa2fcc207f1ab0b363835fab2

 

  • Like 3
Link to comment
Share on other sites

22 hours ago, akapowl said:

 

 

@akapowl thank you very much - I would have never figured that out on my own. Plus I have not seen any other examples setup this way anywhere. I feel like I have seen these types of pages transitions using GSAP & Barba. This has solved my initial issue and your explanation makes sense. I am just not 100% sure I understand the pattern, but again not a JS expert at all. 
 

I got these changes added to a more complex framework and got the base page transitions working. Based on this page type is leaves & enters how i want - and set it for 2 different pages types! 

Now, I am running into other issues where I need to reset GSAP arrays... So within the individual page enter function, we are animating other elements after the page loads and when the user scrolls down the page - we have images staggering/animating in with a parallax effect. Any thoughts on how to reset these too?

 

using your (el) to reset the elements within these functions. So these work on the initial page load, but not when you go to next container with the same namespace these arrays are not starting from scratch.

 

example of one of the arrays - how would I reset something like this?

 

sap.utils.toArray('.section-parallax .parallax-content').forEach((section, i) => {
        const heightDiff = section.offsetHeight - section.parentElement.offsetHeight;

        gsap.fromTo(section, {
            y: -heightDiff
        }, {
            scrollTrigger: {
                id: 'collectionParallax',
                trigger: section.parentElement,
                scrub: true
            },
            y: 90,
            ease: "none"
        });
    });

 

Is my issue a combination of GSAP & Barba ? Or strictly a Barba issue? Or is it how I am structuring my JS?

 

I guess I was naïve to think that I could just reset everything back to the initial starting point when the next container loads.

 

Let me know if you if you have any thoughts or other examples we can take a look at.

 

Thank you for the help. Made it over a big hurdle! No on to the next one!

 

 

 

 

Link to comment
Share on other sites

 

I can not really give you any advice on that without seeing it in context, I'm afraid.

There are just too many possible reasons why it doesn't work as you'd expect.

 

It might be just another logic problem that you'd have to find a solution for within the context of barba (which would be my best guess here), like having to kill all your ScrollTriggers when leaving a page and re-initializing the page-specific ScrollTriggers when entering a new page.

 

You'll find a link collection to different threads on that one in this thread here. 

It might just as well be something totally different, though.

 

 

 

 

This thread here might also be helpful, as it links to another code example of GSAP together with Barba and to @ihatetomatoes' learning ressources. He also offers awesome courses on GSAP with Barba, the latest of them also with ScrollTrigger incorporated, if I am not mistaken.

 

 

 

 

These forums actually try to stay focussed on GSAP specific questions, but if none of those ressources linked to does help you find a solution, I could take a peek at your code, if you'd update your codepen project (or even better create a minimal new one so the context of the previous questions remains intact) and I find the time.

 

  • Like 3
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...