SWUP: попытка получить разные анимации для разных "от" и "до".

Question

Не уверен, это вопрос здесь или для GSAP.

Я использую Wordpress (последняя версия) и GSAP 3.3.1.

Я установил 2 разные анимации для использования на сайте, но у меня возникли проблемы с назначением их различным маршрутам (?).

Похоже, что документация, предоставленная SWUP, в частности JS Plugin, использует старый GSAP (v2).

Вот мой код из моего основного файла index.js. Я тоже использую WebPack.

domready(() => {

  function init() {

    // Initialise LazyLoad
    const projectImagesLazyLoad = new LazyLoad({
      elements_selector: ".project-image-lazy-load",
      load_delay: 300 //adjust according to use case
    })

    // Enable 'touch' class for mobile/tablet devices
    if (touchDevice) {
      document.body.classList.add('touch')
    }

    // Scroll window to top on every page load
    window.scroll({
      top: 0,
      left: 0,
      behavior: 'auto'
    })

    // Initialise global header component
    document.queryAll('[data-component="global-header"]').forEach(element => {
      new GlobalHeader({
        element
      })
    })

    // Initialise global footer component
    document.queryAll('[data-component="global-footer"]').forEach(element => {
      new GlobalFooter({
        element
      })
    })

    // Initialise PageIntroduction component
    document.queryAll('[data-component="page-introduction"]').forEach(element => {
      new PageIntroduction({
        element
      })
    })

    // Initialise InstagramFeed component
    document.queryAll('[data-component="instagram-feed"]').forEach(element => {
      new InstagramFeed({
        element
      })
    })

    // Initialise Accordions component
    document.queryAll('[data-component="accordions"]').forEach(element => {
      new Accordions({
        element
      })
    })

  }

  // animationOptions
  const animationOptions = [
    {
      from: '(.*)',
      to: '(.*)',
      out: (next) => {
        var defaultTransitionOut = gsap.timeline({repeat: 0, repeatDelay: 0, paused:true, onComplete: next})
        defaultTransitionOut.to("[data-component='default-transition']", {visibility: "visible", opacity: 0});
        defaultTransitionOut.to("[data-component='default-transition']", {duration: 0.8, opacity: 1});
        defaultTransitionOut.play()
      },
      in: (next) => {
        var defaultTransitionIn = gsap.timeline({repeat: 0, repeatDelay: 0, paused:true, onComplete: next})
        defaultTransitionIn.to("[data-component='default-transition']", {duration: 0.8, opacity: 0});
        defaultTransitionIn.to("[data-component='default-transition']", {visibility: "hidden"});
        defaultTransitionIn.play()
      }
    },
    {
      from: '(.*)',
      to: '/workshop/',
      out: (next) => {
        var mwTimelineOut = gsap.timeline({repeat: 0, repeatDelay: 0, paused:true, onComplete: next})
        mwTimelineOut.to("[data-component='mw-transition']", {opacity: 1, visibility: "visible"});
        mwTimelineOut.to("[data-component='mw-transition']", {duration: 1, x: 0, y: 0, ease: "expo.out"});
        mwTimelineOut.to("[data-component='mw-transition'] svg", {duration: 0.8, opacity: 1}, "+=0.5");
        mwTimelineOut.to("[data-component='mw-transition'] #rotate", {rotation: 180, transformOrigin: '50% 31px', ease: "expo.out", duration: 1.5}, "+=0.5");
        mwTimelineOut.play()
      },
      in: (next) => {
        var mwTimelineIn = gsap.timeline({repeat: 0, repeatDelay: 0, paused:true, onComplete: next})
        mwTimelineIn.to("[data-component='mw-transition']", {duration: 0.8, opacity: 0});
        mwTimelineIn.to("[data-component='mw-transition']", {visibility: "hidden"});
        mwTimelineIn.to("[data-component='mw-transition']", {x: "100%"});
        mwTimelineIn.play()
      }
    }
  ]

  // swupOptions
  const swupOptions = {
    plugins: [
      new SwupBodyClassPlugin(),
      new SwupDebugPlugin(),
      new SwupJsPlugin(animationOptions)
    ],
  }

  // Initialise global init
  init()

  // Initialise swup
  const swup = new Swup(swupOptions)

  // Re-initialise JS on page load
  swup.on('contentReplaced', init)

})

По сути, я хочу, чтобы на каждой странице использовалась первая анимация. Если вы собираетесь/workshop/ URL Я хочу, чтобы использовалась вторая анимация.

Вы можете просмотреть текущее состояние разработки по этому ЭТАПНОМУ URL:https://makemodels.weareduo.com.au/

Также существует проблема начальной загрузки сайта (даже жесткого обновления), когда при нажатии на ссылку переход происходит очень скачкообразно и мигает.

Любая помощь будет принята с благодарностью.

Благодарность