anime.js and swup

[Josedev24]

Describe the problem 🧐

I created two web pages in html, css and js. To create some effects on the text and elements on the pages I used the animate.js library.

I added the lenis.js library to have smooth scrolling, and everything works fine.

Wanting to insert transitions between the two pages, I used the swup.js library, but the problem is that transitions work well, but animated text with the animate library doesn't work.

Here's the pages:

[swup.zip] — link removed
[swup.zip] — link removed

Describe the propsed solution 😎

How could I solve the problem? Maybe delaying animate.js animations immediately after the page transition made with swup or a similar solution.

Alternatives considered 🤔

Use another method for page transitions

How important is this feature to you? 🧭

Nice to have

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for related problems
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

[daun]

Hi! I've converted this to a discussion as it's more of an integration question than an issue with swup.

And a little note on the side: nobody in their right mind will click on and download zip files from a public comment :) If you want help by other people, consider putting a public version of your project online, e.g. on CodeSandbox, Replit, Glitch, etc.

[daun]

Your issue might be related to (re)running javascript on each page visit, e.g. the anime.js init scripts mentioned. Feel free to check out the official docs on Reloading JavaScript and report back.

[Josedev24]

Good morning and thank you for your response and suggestion. Yes, in fact it involves loading the anime.js library immediately after the page transition made with swup.js
Unfortunately I'm not familiar with coding, however I will try to make some attempts, if anyone is more familiar than me, please help me, thanks.

[daun]

If you have specific suggestions on what's missing in the official docs, we're happy to hear them!

[daun]

The "official" way of re-running code after each swup page transition is by registering a hook handler for the page view hook. See the example below.

swup.hooks.on('page:view', (visit) => {
  /* run anime.js animations */
});

[Josedev24]

First of all, thank you for your messages. This problem is driving me crazy ;-) but in any case I'm trying to solve it step by step, looking for online resources, forums etc etc.

I believe, despite not knowing anything about js programming but going by "intuition" that the whole problem is just writing a few lines of code in the js function at the end of the document so that (once swup finishes loading the destination page) so that the animation of the "anime.js" library starts.
I have already partially solved this problem: using the plugin indicated in the swup documentation pages, it would be enough to write the relevant js code for the anime.js library, ensuring that all the elements ("target") of the library are loaded sequentially page, as I indicate below:

<script src="https://unpkg.com/swup@3"></script>

    <script>
        const swup = new Swup();

        // Run once when page loads
        if (document.readyState === 'complete') {
        init();
        } else {
        document.addEventListener('DOMContentLoaded', () => init());
        }

        // Run after every additional navigation by swup
        swup.on('pageView', () => {
            
            var tl = anime.timeline({
                translateY: [30, 0],
                opacity: [0, 1],
                duration: 800,
                easing: 'easeOutQuad',
                delay: 500
            });

            // Add children
            tl
            .add({
                targets: '.title',
                translateY: [30, 0],
                opacity: [0, 1],
                duration: 400,
                delay: 200,
                staggervalue: 150
                
            }) ......and so on....
        });
    </script>
    
    This method works, but it has a problem: the animations start all together and not when the visitor reaches the viewport. 

Instead, in the file I included, the animations are linked directly in the html code in the different elements to be animated: this makes insertion where needed easier and faster and allows the animation to be displayed in the viewport.

Finally: in your message you show me the official code from the swup documentation:

swup.hooks.on('page:view', (visit) => {
/* run anime.js animations */
});

Here...where it says "run anime.js"
All I need is a code that says it allows all the animations on the page to take place, without having to specify each target...
Sorry, it seems a bit complex, but I try to explain myself as clearly as possible, my English is not excellent :-)

Could you ask the gentlemen who developed swup to post a complete example with anime.js?

Thanks again for your support
Giuseppe

[hirasso]

Guiseppe, you are asking too much. You also ignored the request for a minimal reproduction. I‘ll close this as that kind of behaviour is not acceptable here.

[Josedev24]

Honestly, I went into the explanation in order to provide as many details as possible so that someone could help me more easily. I didn't think this violated the community rules. Thank you all the same.