SWUP JS external function call

Question

this is my first time using swup js with the js plugin. https://swup.js.org/plugins/js-plugin

I can see that the trigger to go to the clicked page lies inside the object array of options.

My question is there anyway I can trigger the "next" from external function

const options = [
  {
    from: '(.*)',
    to: '(.*)',
    in: function(next) {
      document.querySelector('#swup').style.opacity = 0;
      TweenLite.to(document.querySelector('#swup'), 0.5, {
        opacity: 1,
        onComplete: next
      });
    },
    out: (next) => {
      document.querySelector('#swup').style.opacity = 1;
      TweenLite.to(document.querySelector('#swup'), 0.5, {
        opacity: 0,
        onComplete: next
      });
    }
  }
];

const swup = new Swup({
  plugins: [new SwupJsPlugin(options)]
});

how do I trigger the "next " from another outside function not within Const options?

for example

counts trigger = function(){
 
 options.next();

thanks

this doesn't work

thanks

i think your second code sample is broken. Can you please fix that? — Ente, Jun 22 '20 at 07:36
We at GreenSock recommend that you use [GSAP 3 formatting](http://greensock.com/3). — Zach Saucier, Jun 22 '20 at 20:04
Hi Thanks guys, So basically i just want to call the "next" function within the GSAP onComplete event that nested inside the const options from the outside. Is there any way to do that? — Kiki Restive Creatives, Jun 23 '20 at 00:10

score 0 · Answer 1 · answered Nov 29 '20 at 19:07

You cannot do that. Swup JS plugin uses the defined options to run in and out functions at the right time while passing the next argument to it.

The next argument is present only as a way to let swup know that the animation has finished and it can continue in whatever it needs to do next.

SWUP JS external function call

1 Answers1