Combining JS Plugin and Parallel Plugin

[Eric-llos]

Hi there!

I'm facing some doubts using the new Swup/Astro and Parallel Plugin.

I was using using Swup in my Astro project via astro.config.mjs and everything was working fine with my Parallel plugin but I need another transitions in other pages and handle some javascript after page transition.

• So, it's not possible to use SwupJsPlugin with some gsap animations and js in astro.config.mjs right? I haven't seen the option.

After try manual swup setup and install and set the configuration as I had it in my Astro config, everything was working fine until I installed SwupJsPlugin. When I installed it, the Parallel transitions were not working and it was like SwupJsPlugin was overriding them.

Is there any way to handle this and use both plugins?

[daun]

Hey 🏓

If you need different transitions for different pages, I'd suggest using the integration's routes option and then differentiate based on the route you're going from or to.

To disable parallel animations on specific visits, you can do so in a hook. See this example in the docs.

There's also mentions of people using GSAP with the parallel plugin, so it should in theory work just fine. However, I can't point you to concrete examples as it's not something we tried.

Lastly, if you really do need to use GSAP and the JS plugin, the way to go is definitely manual setup. The astro integration tries to cover the 80% use case; running your own animations is a perfect candidate for "ejecting" from the integration, so to say.

[daun]

@Eric-llos I've given it a stab and the combination of JS + Parallel Plugin seems to be working fine. You just need to make sure you're grabbing the correct elements and animating both in the in phase of the animation at once:

const swup = new Swup({
  containers: ['main'],
  plugins: [
    new SwupParallelPlugin({ containers: ['main'] }),
    new SwupJSPlugin({
      animations: [
        {
          from: '(.*)',
          to: '(.*)',
          in: async () => {
            const next = document.querySelector('main');
            const prev = document.querySelector('main + main');
            await Promise.all([
              next.animate([{ opacity: 0, transform: 'translateX(100%)' }, {}], 300).finished,
              prev.animate([{}, { opacity: 0, transform: 'translateX(-100%)' }], 300).finished
            ]);
          }
        }
      ]
    })
  ]
})

[Eric-llos]

@daun Many thanks! I think I had a bunch of stuff and was hard for me to understand what was happening... Happy to see you can use Parallel and manage the JS animations in JSPlugins :) Thanks <3

[ercovi]

@daun Hi Philipp,

I'm facing some problems (sorry to be such a dumb :') ) with the actual feedback you wrote me. I'll attach a video and a Layout.astro where I create my swup config. ASAP i'll add a demo.

The transition I wanted to achieve, its working great: The new page enters from the right side, as you can see in the video:
swup-prob.mov.zip

But I'm trying to avoid to scroll to top:0 when I click a link and all the transitions from case-studies or to, start, but there's something missing from my side because I cant achieve it. I've tried inside the animations and with some swup hooks, for example this one:
swup.hooks.on('scroll:top', (e) => { e.scroll.reset = false; console.log('scroll:top hook triggered'); });

Or even using the ScrollPlugin.
Layout.astro.zip

Do you have any idea what could I do?

The other question is, I think i'm having a problem when the page changes and some part of my components doesnt work. I have a scrollTrigger (gsap) that is not triggering the GSAP animation in my Parallel pages(I think because of the Parallel Plugin). It does not calculate correctly when it should start, so it never starts, but clicking events work correctly.
As you can see, scrollTrigger markers seems broken and not where the numbers are.

Could it be because the way

containers are being attached with Parallel? Do you think is there a way to make a reset or recalculate it after page trasitions? I've tried to reset the scrolltrigger when I mount the component but it does not seems to work.

PD: I'll add a demo ASAP

Many thanks and Sorry, I'm a bit worried because I've tried a lot of stuff with this two problems but i can't get the correct answer 😢

[daun]

Feel free to create an online demo or a repo somewhere, and I'm happy to take a look at it. Nothing personal, but I won't be downloading and opening zip archives from strangers 🙃

[ercovi]

@daun Totally understandable!

Here I have a demo (i didn't achieve the same behaviour than my code :/ the transitions are not working and it is the same code.), but maybe it helps answering one of the two questions I wrote.
I updated the video somewhere else and added there, in case you want to see it in my code.

https://stackblitz.com/edit/withastro-astro-pupmsf?file=src%2Fpages%2Fcase-studies%2Fhunza-g%2Fcampaign-strategy-development%2Findex.astro

Could the transition error with Vue be something like this?
vuejs/core#5952

[ercovi]

@daun Jesus, i'm the dumbest developer in the world. Solved the GSAP/Swup problem. My fault. I've seen there was an overflow coming from another component that was breaking everything. Holy shit.

Scroll stuff solved by doing this: (i dont know if its the best option)

{
			from: '/case-studies/(.*)/(.*)/',
			to: '/case-studies/(.*)',
			in: async (e) => {
				const newMain = document.querySelector('main');
				const oldMain = document.querySelector('main + main');
				
				const $scrollPos = scrollPosition.get()
				console.log($scrollPos, 'old scroll position')

				await Promise.all([
					gsap.set(newMain, {
						x: 0,
					}),
					window.scrollTo(0,$scrollPos),
					gsap.fromTo(oldMain, {
						xPercent: 0, 
					},
					{
						xPercent: 100,
						duration: 1	
					}),
				])
				.then(() => {
					console.log('FROM CHILD TO PARENT --- ANIMATION END', {window})
				})
			},
			out: (done) => {
				console.log('done???')
				done();
			}
		},
		{
			//TODO: avoid to scroll 0,0 when clicking link
			from: '/case-studies/(.*)/',
			to: '/case-studies/(.*)/(.*)',
			in: async () => {
				const newMain = document.querySelector('main');
				const oldMain = document.querySelector('main + main');
				
				scrollPosition.set(window.scrollY);
				const $scrollPos = scrollPosition.get()
				console.log('maintain scroll position to', $scrollPos)

				await Promise.all([
					gsap.set(oldMain, {
						x: 0,
						top: -$scrollPos,
					}),
					window.scrollTo(0,0),
					gsap.fromTo(newMain, {
							xPercent: 100,
						},
						{
							xPercent: 0, 
							duration: 1,
						}
					)
				])
				.then(() => {
					console.log('----NEW PAGE LOADED---- PARENT TO CHILD PAGE')
				});
			},
			out: (done) => {
				console.log('done???')
				done();
			}
		},
`
and the css:
`
html.is-changing .tswup-slide {
  /* transition: transform 10s ease-in-out; */
  transition-timing-function: linear;
  @apply bg-beige;
}
.tswup-slide.is-next-container {
  /* transform: translateX(-100%); */
}

.tswup-slide.is-previous-container {
  /* transform: translateX(100%); */
}

html.to-slide-left .tswup-slide.is-next-container {
  /* transform: translateX(100%); */
  z-index: 2;
  @apply absolute top-0 left-0;
}

html.to-slide-left .tswup-slide.is-previous-container {
  z-index: -1;
  /* transform: translateX(0%); */
  @apply fixed left-0 w-screen; 
} 
html.to-slide-right .tswup-slide.is-next-container {
  z-index: -1;
  /* transform: translateX(0%); */
  @apply fixed left-0 w-screen; 
}

html.to-slide-right .tswup-slide.is-previous-container {
  /* transform: translateX(100%); */
  @apply absolute top-0 left-0 w-screen;
  z-index: 2;
}

Many thanks Philipp and sorry again! 😭

[daun]

Haha, glad you got the GSAP part solved. Overflow is hard! I think we've all been bitten by it, and more than once.

[daun]

You might solve the scroll issue by disabling scroll reset in a hook. There's an example in the docs:

swup.hooks.on('visit:start', (visit) => {
  visit.scroll.reset = false;
});

[ercovi]

I've ended solving it by doing some tricky stuff!
But thanks to answer :)

[ercovi]

@daun I have another doubt! "Out" animation is no longer working in this cases? I'd like to animate something to fullscreen in out and in in, scale it to 0!

[daun]

Hard to say without an example. In any case, I won't be able to look into this for a few weeks, unfortunately. Feel free to open a separate discussion to get the attention of other users. Somebody might have had the same problem and solved this already 🏓