Testing swipes not works for me

[esseifforte]

I've read all the features and I'm really excited about your script. but sincerely I'm not able to make it work. If you can kindly help me.

I attach my test files that I use in a localhost thank you!

https://github.com/esseifforte/testSwupJS

[Hai-San]

@esseifforte Probably it is not detecting the click on your link

Add this LINK_SELECTOR: '.swup-link' in swup options and add class .swup-link in your links

The initial animation happened, but did not trigger the final animation. Other mistakes happened that I can not explain:

swupjs.min.js:1 Access to XMLHttpRequest at 'file:///D:/wamp/www/sites/testSwupJS-master/index.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

This has some relation with security in the header

[esseifforte]

thank you @MartDSam now this works. I do not know if I missed something in the info of the plugin or I'm careless, but I had not really seen that a special link had to be put in the html.

The CORS you told me appeared to you, maybe it depends on your server setting, with MAMP everything works fine in all browsers.

[esseifforte]

let options = {
    debugMode: true,
    support: false,
    LINK_SELECTOR: 'a[href^="' + window.location.origin + '"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="./"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup])',
    LINK_SELECTOR: '.swup-link',
    animations: {
        'homepage>*': {
            in: function(next){
                document.querySelector('#swup').style.opacity = 0;
                TweenMax.to(document.querySelector('#swup'), 1, {opacity: 1, onComplete: next});
            },
            out: function(next){

                TweenMax.to(document.querySelector('#swup'), 1, {opacity: 0, onComplete: next});
            }
        },
    }
}

const swupjs = new Swupjs(options);

/////

I followed the instructions (I have to do a particular animation from home to internal pages and another only between internal pages) but now only a lot of mistakes!: Uncaught TypeError: Cannot read property 'out' of undefined at r.t.exports [as getAnimation] (plugins.js:38) at r.t.exports [as loadPage] (plugins.js:38) at r.t (plugins.js:38) at HTMLDocument. (plugins.js:38)

ps. I use plugin.js to collect all the plugins here. but the error comes precisely from swupjs.js

[Hai-San]

You go find a better documentation here: SWUP

The SWUPJS is diferent of SWUP only in animations possibilities.

Here is my actually configuration:

const options = {
  LINK_SELECTOR: '.js-link',
  FORM_SELECTOR: '.js-form',
  elements: [
      '#main'
  ],
  animations: {
      '*': {
          out: function(next){
              TweenMax.to(document.querySelector('#main'), 0.5, {
                x:"-100%",
                onComplete: next
              });
          },
          in: function(next){
              TweenMax.fromTo(document.querySelector('#main'), 1, {
                x:"100%"
              }, {
                opacity: 1,
                x:"0%",
                onComplete: next
              });
          }
      },
  },
  cache: true,
  pageClassPrefix: '',
  scroll: false,
  debugMode: true,
  preload: true,
  support: true,
  skipPopStateHandling: function(event){
      if (event.state && event.state.source == "swup") {
          return false;
      }
      return true;
  },
  animateHistoryBrowsing: true,
}

const swup = new Swupjs(options);

[esseifforte]

thank you @MartDSam ! It's a nice solution! I immediately do a bit of tests! but have you ever tried to do as I tried too? or various animations depending on the pages? for example: 'homepage> about'?

[gmrchk]

Hi,

swup by default works for links with the href attribute starting with / or current domain (like localhost, example.com...). The links in your demo don't start with either of those. Change your links or as @MartDSam suggested, changing the option and adding the class will help too.

Access to XMLHttpRequest at 'file:///D:/wamp/www/sites/testSwupJS-master/index.html This refers to browser not being able to make a request. Making requests is not possible when simply opening a file in a browser (hence your url string with file:///). Running the page in a server environment like MAMP will solve this.

Cannot read property 'out' of undefined Animation object (option) is missing the definition for * value. This is required as a fallback for any transitions not defined in the animation object.

animations: {
      '*': {
          // this needs to be defined   
      },
      'homepage>*': {
          // this is optional
      },
  },

[esseifforte]

Thank you so much, I do not want to bother you or make you waste unnecessary time for my requests. but I would really like to understand and learn this script for my sites, as I really like it.

I would not just like a default animation, that thanks also to the help of @MartDSam I solved.

I try to explain myself better. I have a site with 4 pages: an index (homepage), about, music, contacts. the home has no navigation but a slider with links to the 3 pages, while each page has an internal menu between the same three pages. Now. from the homepage> to the about, music and contact pages I would like to do a kind of animation and then enter the menu. while in the 3 pages by clicking on the menu we go around in the same 3 pages. I hope to understand better as soon as possible and then do not bother you anymore! :)

thank you!

[gmrchk]

@esseifforte No worries, but I'm not quite sure I understand your issue.

I think we've covered how to do different animations for different page transitions and that it's no longer an issue for you, correct?

The issue you are describing rather sounds like a project description. If you want to know how to do some particular thing, I'm happy to help. If you have some wireframes or something to explain your intention closer, that would be awesome, but the question needs to be specific.

If your issue is that the menu is not there on one of the pages, it should be as simple as hiding the menu on the homepage with CSS, based on the class you assign to the <body> tag. However, navigation should be part of the page on all pages, and be only hidden with CSS.

[esseifforte]

Thank you very much @gmrchk . I hope to be able to learn well the mechanisms of your script (obviously in js) and then be able to exploit it in all my sites. I created this animation to make you better understand what I had explained.

0. Of course I work everything with Gsap
1. every body has its own class (home, about, projects, contacts)
2. the fullpage.js block of the home comes alive at the entrance and when you click on the remaining buttons 'discover' there is an animation that lets everything out, while the logo remains and only the photo of the chosen page.
3. at each entry of the internal pages directly from the home, enter the menu, and the animation of the contents of each page.
4. the animations between the 3 pages about, projects and contacts is simple, the one you explained to me, while the logo and the menu are still.

I really hope I can understand this fantastic script !!!! :)

[gmrchk]

Nice demo! I would start step by step.

Fading away all the contents, displaying the menu based on the body class, excluding the main photo of the chosen page from fading away, fading in only the rest of the contents of the page on the pages about/project/contacts, without the main picture (so it looks like it never switched to the next page, even when it did)...

Based on your demo, I'm pretty sure you could achieve this even with swup (without swupjs). Could be more straightforward to implement based just on classes, but that depends on what you're more comfortable with.

Seems like you have it pretty figured out tho, so I'm not sure whether you need some more assistance from me. I'm going to close this, but feel free to open a new issue if you have some particular problem.

[esseifforte]

thank you! however, it remains the problem that I can not understand which class I have to put in order to get what I did in the demo. that is, the transition ONLY when we go to the other pages from the homepage:

animations: {
    '*': {
        out: function (next) {
            TweenMax.fromTo (document.querySelector ('# swup'), 0.5, {x: '0%'}, {x: '- 100%', onComplete: next});
            
        },
        in: function (next) {
             TweenMax.fromTo (document.querySelector ('# swup'), 1, {x: '- 100%'}, {x: '0%', onComplete: next});
        }
    },
    'homepage> * about': {
        out: function (next) {
            TweenMax.fromTo (document.querySelector ('. container-fullpage'), 0.5, {opacity: 1}, {opacity: 0, onComplete: next});
         },
         in: function (next) {
             TweenMax.fromTo (document.querySelector ('. Container-fullpage'), 1, {opacity: 0}, {opacity: 1, onComplete: next});
         }
    },
}

forgive me, you can also close, maybe I open another post.

[gmrchk]

I think I see what you mean. Your definition for the animation page is wrong (homepage> * about is not valid animation name in swupjs). You can use any url (with the exception of homepage where the word 'homepage' is used instead, as there is no route). When using *, swup just assumes it can be any url. The animation that is the most "fitting" is chosen automatically, but your animation name has wrong format so it was assumed by swup as "not fitting" by default and the '*' animation was used instead.

animations: {
    'homepage>*': {
        // this is used for transition from homepage to any other page
    },
    '*': {
        // this is used for any other transition, between the subpages OR from subpage to homepage
    },
}

[esseifforte]

on MAMP your animations works fine! animations: { 'homepage>': { // this is used for transition from homepage to any other page }, '': { // this is used for any other transition, between the subpages OR from subpage to homepage }, }

but NOT online :(((( this is the error www.website.com/Cannot%20tween%20a%20null%20target.

thank you for precious help