Replies: 2 comments 5 replies
-
So, the alpine init event won't rerun when you swap the new code in. Also, can you clarify if you're using Livewire or something?
But you just need to evaluate the script tags before changing the DOM. Maybe even just use the actual browser view transitions api. |
Beta Was this translation helpful? Give feedback.
-
I'm not using Livewire, the stack I use is Orchard Core with Liquid(Shopify) support. Here's simplified Layout file which might explain a bit more:
So based on that my script's should rerun after page change. |
Beta Was this translation helpful? Give feedback.
-
Hi all,
The issue I encounter right now is quite simple, yet I can't find the source of the problem and how to fix it.
I have very basic full page transition applied (covered by barba) with this code:
barba.init({ transitions: [{ name: 'opacity-transition', leave(data) { return gsap.to(data.current.container, { opacity: 0, duration: 1, }) }, enter(data) { return gsap.from(data.next.container, { opacity: 0, duration: 1, }) } }], });
Alpine code:
document.addEventListener('alpine:init', () => { Alpine.data('animatedNumber', () => ({ startValue: 0, endValue: 1, })) });
Problem:
When I navigate from url A to url B the transition will be fine, but my alpine code will not be initialised:
Alpine Expression Error: animatedNumber is not defined Expression: "animatedNumber"
If I use following code in enter(data) before returning animation:
Alpine.discoverUninitializedComponents((el) => { Alpine.initializeComponent(el); });
It seems to initialise components properly, but the animation stop and it looks like first half (leave) take place and second half (enter) is skipped. This literally looks like fading out previous page and refresh on next page.
Does anyone seen this issue before? Can I initialise alpine components without refreshing the page and carry on with animation?
Maybe someone used better library to animate full page transition on websites which use Alpine?
TIA
Matt
Beta Was this translation helpful? Give feedback.
All reactions