Anyone using animated transitions between website pages? #925

PetersOtto · 2023-12-01T12:06:06Z

PetersOtto
Dec 1, 2023

Hello all!
So far, I have not used animated transitions between website pages.
Have any of you ever tested this together with Yellow? Maybe barba.js, swup.js or similar solutions? Can you recommend a solution?

Edit:
I like the page from Pandolfini. All jumps between pages are very smooth there.

Answered by schulle4u

Dec 1, 2023

Even if I can relate to this idea for e.g. app-like websites, I never had the thought to implement something like this for Yellow. However this is mostly due to the fact that I'm a keyboard/screen reader user, and most JS transitions I've seen so far seem to have a slower performance than loading the page directly. But this is just my experience, I've never proven it with facts. 🙂

View full answer

schulle4u · 2023-12-01T13:41:43Z

schulle4u
Dec 1, 2023
Maintainer

Even if I can relate to this idea for e.g. app-like websites, I never had the thought to implement something like this for Yellow. However this is mostly due to the fact that I'm a keyboard/screen reader user, and most JS transitions I've seen so far seem to have a slower performance than loading the page directly. But this is just my experience, I've never proven it with facts. 🙂

0 replies

PetersOtto · 2023-12-02T14:58:11Z

PetersOtto
Dec 2, 2023
Author

I think it always depends on the purpose of the website. A website for a rock band or a movie looks very different from a wiki page. A wiki page certainly doesn't need this effect. In general, I find the effect visually appealing. I think I'll give it a try. Let's see how difficult it is to integrate it into Yellow.

0 replies

PetersOtto · 2023-12-11T14:00:12Z

PetersOtto
Dec 11, 2023
Author

I have tested barba.js in combination with anime.js. I like it 🙂
Here is a quick and dirty example. Maybe someone would like to test it.

1. header.html

<script src="https://cdn.jsdelivr.net/npm/@barba/core"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.js" integrity="sha512-FSNQjUUq97PtDnAJyMlBTH8EhV4o5X5FLVbzS9ttrdEVVbmrssJBh/PgXFQbxS+6yYx5n5irOj7de6Th0TRQZA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

and change this ...
<body>
to
<body data-barba="wrapper">

and change this ...
<div class="<?php echo "page layout-".$this->yellow->page->getHtml("layout") ?>" >
to
<div class="<?php echo "page layout-".$this->yellow->page->getHtml("layout") ?>" data-barba="container" data-barba-namespace="home">

2. footer.html

<script>
    barba.init({
    transitions: [{
        async leave() {
            await anime({
                duration: 250,
                targets: '.main',
                opacity: ['1', '0'],
                easing: 'easeOutSine',
            }).finished;
        },
        enter() {
            anime({
                duration: 250,
                targets: '.main',
                opacity: ['0', '1'],
                easing: 'easeInSine',
            });
        }
    }]
});
</script>

Good Luck!

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Anyone using animated transitions between website pages? #925

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments

{{title}}

{{title}}

{{title}}

Select a reply

Anyone using animated transitions between website pages? #925

PetersOtto Dec 1, 2023

Replies: 3 comments

schulle4u Dec 1, 2023 Maintainer

PetersOtto Dec 2, 2023 Author

PetersOtto Dec 11, 2023 Author

PetersOtto
Dec 1, 2023

schulle4u
Dec 1, 2023
Maintainer

PetersOtto
Dec 2, 2023
Author

PetersOtto
Dec 11, 2023
Author