Jump to content
Search Community

Trying to identify how to use SVG barba.js transition with ScrollTrigger

Mattrudd test
Moderator Tag

Recommended Posts

Hi folks,

I'm struggling to work out why the GSAP transition isn't firing as apart of the barba.js transition?

 

https://codepen.io/matt-rudd/project/live/ApLrbb

(Ignore the 404 below, link works!)

I've read and re-read pretty much all the other GSAP/barba.js/loco scroll posts on here, tried to dissect @akapowl's stackblitz but can't fathom what I'm doing wrong - likely around killing and refreshing the ScrollTriggers, or potentially some basic errors in my functions?

 

Been staring at this for days. This seems like the very last technical hurdle I'm facing...so any insight at all will be massively appreciated!

 

 

See the Pen AgMYpE by matt-rudd (@matt-rudd) on CodePen

Link to comment
Share on other sites

  • Mattrudd changed the title to Trying to identify how to use SVG barba.js transition with ScrollTrigger

 

Ha, that looks a bit like a best off of my forum answers 😋 ...just kidding; good job getting it all together ! 💪

 

But it still is a whole lot (too much) to parse through.

 

I even had to look around for the link that is supposed to bring you to the other page for quite a while to begin with.

 

I am pretty sure it is a barba-logic related issue you are having, and as you might already have read in one of the other posts, the GSAP forums would not exactly be the right place to ask about that - as they are supposed to help with directly GSAP related questions.

 

 

 

I could offer to have another look, but:

 

If you are having problems with just the transition, it would be great if you could

 

a) reduce everything to that sole problem, so it becomes a lot easier to concentrate on that - everything else doesn't seem needed if all that doesn't work for you is the transition itself.

 

and b) port things over to stackblitz, where I can easily fork and tinker with things - as the number projects one can have on codepen is very limited.

 

 

 

One thing I can tell you right away with regard to your ScrollTriggers is that you will definitely have to call ScrollTrigger.sort() after you have set all your ScrollTriggers up [or alternatively set refreshPriorities], because you are not creating them in order of appearance on the page, but are creating (some of) them in loops and your fake-horizontal section for instance doesn't work as supposed to because of that.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.sort()

 

 

 

Edit:

And after another look I realized that your loaderIn() and loaderAway() functions are faulty.

 

For one, you are targetting an element, that is supposed to have the class swipeup, but you don't have such an element anywhere - neither on the index.html nor the subpage.html

 

The other thing is, that you can not sequence tweens like that. You will probably want to set up a timeline and return that timeline from that function.

 

// bad

function loaderIn() {
    // GSAP tween to stretch the loading screen across the whole screen
    return gsap.set(swipeup, {
           autoAlpha: 1,
           attr: {d: "M 0 100 V 100 Q 50 100 100 100 V 100 z"}  //bottom line
          },
          {
           duration: .8,
           ease: "power4.in",
           attr: {d: "M 0 100 V 50 Q 50 0 100 50 V 100 z"}      //arc top
          },
          {
           duration: .5,
           ease: "power2",
           attr: {d: "M 0 100 V 0 Q 50 0 100 0 V 100 z"}        //full square
          }
         );
 }

 

 

 

Bad...

 

See the Pen vYpwopZ by akapowl (@akapowl) on CodePen

 

 

 

... vs. better.

 

See the Pen mdpYNXq by akapowl (@akapowl) on CodePen

 

 

  • Like 3
Link to comment
Share on other sites

Hi @akapowl - hahaha it is indeed a greatest hits compilation of your work on here. Hope you take it as a massive compliment - every time I searched for the effect I was after, your answer appeared!

'Talent borrows, genius steals' so the saying goes, except I have neither trait - certainly not where coding is concerned! Not at this pretty early stage any way 😉 Steadily hoovering up on JS learning as I go.

 

Incredibly kind of you to offer your help!

 

Unfortunately I've run into some trouble porting a stripped down version to Stackblitz - not very familiar with the platform - can't seem to get it to load as a page (blank page in Chrome, Safari gets stuck 'connecting to dev server' but does seem to half-work in the edit preview!

 

Here's the link all the same... https://stackblitz.com/edit/web-platform-7jbj9m?file=js/main.js

 

(The same code appears correctly back in Codepen, with Loco Scroll functioning, but I do appreciate you can't fork this...https://codepen.io/matt-rudd/project/editor/ZKoPzr#)

 

Just for context,  what I'm aiming at on the finished site is barba links to four subpages from the horizontal section (only one of these subpage added for simplicity sake!)

 

Here's the transition animation I built:

See the Pen xxpepJd by matt-rudd (@matt-rudd) on CodePen

Looking to incorporate this SVG animation as the barba transition, but as you can see the way I've poorly added it to my project just results in a lovely white block at the top of the screen 😅

 

What would be amazing is to get to a stage where I can add back in my other GSAP animations to the 'setupScrollTriggeranims' function in barba.after hook, and it all 'just works' 😬

Link to comment
Share on other sites

 

Sorry Matt, but that stackblitz is not really reduced. It still has ALL the code in it and as mentioned that is too much. If you need help with the transition, please reduce your code to that.

 

8 hours ago, akapowl said:

For one, you are targetting an element, that is supposed to have the class swipeup, but you don't have such an element anywhere - neither on the index.html nor the subpage.html

 

☝️That is also still the case - there still is no element with that class to be found in your HTML. So maybe it's an easy fix if you to just target the right element.

 

 

One thing you will definitely need to keep in mind for barba is that you can not only just load the css that is neccessary for the one page your are currently on in the <head>. Barba will not update the <head> when transitioning so it won't load a new stylesheet. You will need to have all the CSS that you need site-wide (so for all the other pages too) ready on every other page - unless you implement a way that loads the neccessary styles only dynamically somehow.

 

Your app.css breaks off at some point, btw, with a closing bracket (and maybe even some more styling after that) missing. Also on the two different pages you are loading two very different sets of js files - that is also something you might want to change.

 

There is a lot of things that will be interconnected with barba somehow, so you will really need to be careful with everything, even more than on regular websites that do not work as an SPA. Copy-Pasting things together will only get you so far, trust me, I've been there. In the end you will need to try and get a deeper understanding of how barba works - there just isn't a way around that. There are just too many bumps along the road that will hit you off track if you don't.

 

  • Like 2
Link to comment
Share on other sites

Hey so I've done my best to strip down further (figured you meant removing all animation code from main.js), added the missing reference to swipeup, added the reference to the subpage.css on index.html and also the missing css for the loader SVG.

 

https://stackblitz.com/edit/web-platform-7jbj9m?file=js/main.js

 

It did occur to me that it'd be better to have two JS files for each of the pages - I struggled to find any info or examples of how to make that work with barba to be honest.

 

Totally understand in terms of getting my head more into barba - I've watched lots of videos and read through the docs in detail, but found it a stretch to apply the hooks/required kills and refreshes with my particular set of demands - an svg transition between pages with ScrollTriggers and Loco Scroll. 

 

 

Link to comment
Share on other sites

Here is the transition stripped down to a minimum (actually built up from scratch to a minimum from that other stackblitz of mine).

This took me way longer than it should have, to be honest, because some things you were doing caught me off guard.

 

You might want to read up on clipPathUnits and how exactly objectBoundingBox behaves - I had to, because the values of your path-data gave me quite some wonky result, so I had to adjust the path-data for the tweens.

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/clipPathUnits

 

 

 

Also note, that I quickly just threw pointer-events: none on both, the SVG and the clipped container, so they don't block what's underneath them (as they sit on top of everything). So you might want to add some proper handling of visibility/opacity/autoAlpha instead, when beginning and ending the transitions.

 

https://stackblitz.com/edit/web-platform-e34kjf

 

 

 

4 hours ago, Mattrudd said:

It did occur to me that it'd be better to have two JS files for each of the pages - I struggled to find any info or examples of how to make that work with barba to be honest.

 

It is the same as I mentioned for the CSS - unless you were going to somehow dynamically load the file neccessary for every page only, it wouldn't work. Barba does not update anything outside of the data-barba="container" except for the page's title. Have you taken a look at the that tutorial I linked to in those other threads you probably have visited? It does mention that in several occasions, e.g. in the part about Page Reloading And Common Parts. But maybe I just misunderstand what you mean by "two JS files for each of the pages"

 

https://waelyasmina.com/barba-js-v2-tutorial-for-total-beginners/

 

I hope that will help get you where want. Happy transitioning and good luck with the project!

 

  • Like 4
Link to comment
Share on other sites

You sir @akapowl, are the MAN.

 

Incredibly grateful for your help and this generous platform. 

 

Successfully got Loco scroll to work and added a tween back in - just need to figure out what's causing the scroll issue/preventing the subpage from scrolling to top on enter.

Think it's to do with the '.is-home body' class which is something I'm not familiar with, so I'll get digging there.

https://stackblitz.com/edit/web-platform-9uhzjr?file=css/app.css.

 

Thanks again!

 

Link to comment
Share on other sites

15 minutes ago, Cassie said:

Also just bumping that we have our own smooth scrolling plugin.

https://greensock.com/scrollsmoother/

It's more accessible than locomotive scroll.

Hey Cassie, thanks for mentioning! I fully intend to sign up as a club member as soon as possible (I've already had more than the fee's worth in forum support alone!) so I'll swap that out.

  • Like 3
Link to comment
Share on other sites

Forgive me for resurrecting this thread... getting so very close here, and learned a ton in the last few days of reading/experimenting! 

 

@akapowl I responded to your advice about running two different sets of JS for the two pages in my project. I'd read about barba views before and think I've got my head around them after some great help from @Ihatetomatoes Youtube piece on views! (thanks!)

 

Added the 'view' on line 91 (tried to minimise this project down as much as possible!)

https://stackblitz.com/edit/web-platform-dyckmk?file=js/main.js

 

Got the second page JS to load as a function within this view, but at the expense of breaking the ScrollTrigger pinned sidebar tween.

I've a strong idea the fix is about refreshing ScrollTrigger in some way... have tried to work out the right place to do this/connect the Barba/GSAP plumbing properly - but alas after studying all the help out there and scouring this forum I'm struggling to identify where this needs to happen.

 

Thinking maybe it's simply a case of finding the right place to add 

ScrollTrigger.refresh();

?

 

(Tried adding a barba 'Enter' sub-hook within the same 'view' but no joy.)

 

Feels like my brain is experiencing that 'freeze' right before a thaw of understanding hits!

 

Appreciate I'm still in tenuous GSAP connection territory here, but as this is linked to getting ScrollTrigger to work on the second page (in my view at least, pun intended!) I thought I might just sneak it in 😬🤠😨

 

Link to comment
Share on other sites

19 minutes ago, Mattrudd said:

Added the 'view' on line 91 (tried to minimise this project down as much as possible!)

 

You are still creating all the other ScrollTriggers in a global hook though and you've got a couple of warnings hinting you about that on the subpage.

 

23 minutes ago, Mattrudd said:

I've a strong idea the fix is about refreshing ScrollTrigger in some way

 

I don't have the time to dig in deep, but honestly I don't think it's an easy fix like that.

 

Because of how you are handling things (e.g. as mentioned above) you are creating some problems. One of them being that you are not keeping the proper order for the execution of things with regard to ScrollTrigger to work with locomotive-scroll. And I'm pretty sure that with the way you are handling things, you are also creating a new instance of locomotive scroll on every page transtion if you haven't noticed, thus you might have to kill the old one.

 

Unbenannt.png.7bce37f5cdd44eb167d02cfe6bcc8923.png

 

 

 

Also barba will have the current container and the next container in the DOM at the same time when that hook you created in the view fires, so you might have to remove the current container in a global hook before you create new ScrollTriggers or else their positions won't be set correctly - or rather: they will be set correctly by ScrollTrigger, but they will not be where you think they are because of that.

 

Those are just the things that I can think of off the top of my head - there might be other things at play on top of that here. But there is just too much involved for me to offer any more help than that. You are trying to combine three libraries that need rather careful handling to work as intended on their own already, and getting them to work together needs you to be extra careful with the order of execution - most of it comes down to the logic of how barba works in the end, and that is nothing I can guide you with.

 

  • Like 2
Link to comment
Share on other sites

Thanks loads @akapowl

 

I understand. I'm a designer/writer and so the complicated logic required here doesn't come easily to me... spent time grasping each of the three libraries/JS language but then there's the added requirement of engineering them together of course. That's science, and I'm more art ha! Thanks for being so patient with my beginner questions 🙌

 

Think I got the project framework so close with your kind help to what I'm after, that I started jumping steps again - to the extent that I wasn't even  factoring in orders of execution!

 

I'll go back to the beginning - really helpful to be guided towards a few things.

 

Failing that, might be time to try and get a bite on the jobs board again!

Link to comment
Share on other sites

  • 4 weeks later...

Just posting this here to increase the eyes on it... really need a fix. Hope that's ok?

 

Planning to post all details of a fix on this thread after the work's done, hopefully to help others on a similar journey (🌊⬅️🐢⬅️🥚🏖️)
 

 

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