Trying to get different animations for different 'from' and 'to'

[dayneh88]

Hi legends,

Not sure if this is a question for here or for GSAP.

I'm using Wordpress (latest version) and GSAP 3.3.1.

I've setup 2 different animations to be used on the site but having trouble assigning them to various routes(?).

It seems the documentation provided by SWUP, specifically JS Plugin, is using the old GSAP (v2).

Here is my code from my main index.js file. I'm also using 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)

})

Basically, I want every single page to use the 1st animation. If you are going to the /workshop/ URL I want the 2nd animation to be used.

You can view the current state of development at this STAGING URL:
https://makemodels.weareduo.com.au/

There is also an issue of the initial site load (even hard refresh) where when you click on a link the transition is super jumpy and flash's.

Any help would be greatly appreciated.

Thanks

[dayneh88]

Hi guys,

I would love it if someone could please help me out.

Thanks,
Dayne

[gmrchk]

Duplicate of swup/swup#275