issue with Draggable inertia and snap points

[pauloguerraf]

Hi,

I am trying to get Draggable working with an slider example. The example works fine in codepen https://codepen.io/pauloguerraf-the-scripter/pen/oNZvqRL

But when trying to adapt it and use it with nuxt-gsap-module the slides never snap or show inertia. I think it has to do with not having access to the endX parameter and "this" scope between gsap and nuxt but not completely sure. Any help would be greatly appreciated

the following is my current nuxt code. hope it helps. thank you

<template>
  <section id="wrapSection" ref="wrapSection">
    <div id="masterWrap" ref="masterWrap">
      <div id="panelWrap" ref="panelWrap">
        <section></section>
        <section></section>
      </div>
    </div>
    <div ref="dots" class="dots"></div>
    <div class="titleWrap">
      <div class="title">slide 1</div>
      <div class="title">slide 2</div>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      colorArray: ['#683A5E', '#262626'],
      slides: null,
      container: null,
      master: null,
      dur: 0.5,
      oldSlide: 0,
      activeSlide: 0,
      dots: null,
      navDots: [],
      offsets: [],
      iw: 0,
      dragMe: null,
    }
  },
  mounted() {
    this.slides = this.$refs.panelWrap.querySelectorAll('section')
    this.container = this.$refs.panelWrap
    this.master = this.$refs.masterWrap
    this.iw = window.innerWidth

    this.initSlider()
    this.dragMe = this.$Draggable.create(this.container, {
      type: 'x',
      edgeResistance: 0.9,
      snap: this.offsets,
      inertia: true,
      bounds: '#masterWrap',
      onDragEnd: this.animDrag,
      allowNativeTouchScrolling: false,
      zIndexBoost: false,
    })
    this.sizeIt()
    window.addEventListener('wheel', this.slideAnim)
    window.addEventListener('resize', this.sizeIt)
  },
  methods: {
    initSlider() {
      for (let i = 0; i < this.slides.length; i++) {
        this.$gsap.set(this.slides[i], {
          backgroundColor: this.colorArray[i],
        })
      }
    },
    sizeIt() {
      this.offsets = []
      this.iw = window.innerWidth
      this.$gsap.set(this.container, { width: this.slides.length * this.iw })
      this.$gsap.set(this.slides, { width: this.iw })
      for (let i = 0; i < this.slides.length; i++) {
        this.offsets.push(-this.slides[i].offsetLeft)
      }
      this.$gsap.set(this.container, { x: this.offsets[this.activeSlide] })
      this.dragMe[0].vars.snap = this.offsets
    },
    slideAnim() {
      this.oldSlide = this.activeSlide
      this.activeSlide = this.offsets.indexOf(this.endX)
      this.activeSlide = this.activeSlide < 0 ? 0 : this.activeSlide
      this.activeSlide =
        this.activeSlide > this.slides.length - 1
          ? this.slides.length - 1
          : this.activeSlide
    },
  },
}
</script>

<style lang="scss">
#wrapSection {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: #1d1d1d;
  font-family: Asap, sans-serif;
}

#masterWrap {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

#panelWrap {
  height: 100%;
}

section {
  height: 100%;
  display: flex;
  align-content: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  position: relative;
  float: left;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 100%;
  position: relative;
  background-color: #fff;
  margin: 12px 8px;
  cursor: pointer;

  float: left;
}

.dots {
  position: absolute;
  z-index: 100;
  left: 50%;
  bottom: 16px;
}

#leftArrow {
  left: 12px;
}

#rightArrow {
  right: 12px;
}

.arrow {
  position: absolute;
  z-index: 100;
  top: 50%;
  cursor: pointer;
  opacity: 0.75;
  width: 40px;
  height: 40px;
  stroke-width: 8px;
  stroke: white;
  fill: transparent;
}

h1 {
  position: absolute;
  z-index: 100;
  font-size: 18px;
  text-align: center;
  width: 100%;
  text-transform: capitalize;
}

span {
  display: block;
  font-size: 0.75em;
  font-weight: 400;
}

.titleWrap {
  height: 30px;
  position: absolute;
  z-index: 20;
  bottom: 50px;
  left: 50%;
  overflow-y: hidden;
}

.title {
  height: 30px;
  line-height: 30px;
  text-align: center;
}

h3,
p {
  padding: 0;
  margin: 0;
}

h3 {
  font-size: 1.5em;
}

p {
  max-width: 400px;
  font-weight: 400;
  text-align: center;
}

.twitterFollow:hover {
  background: white;
  color: #000;
}

.hideMe {
  opacity: 1;
}
.iconWrap {
  width: 300px;
  margin-top: 30px;
}
</style>

[pauloguerraf]

ok. I guess it has to do with the inertia plugin 😁

https://greensock.com/docs/v3/Plugins/InertiaPlugin

is there any way it can be included within module config? I tried with intertia: true and intertiaPlugin:true but didn't work.

thank you in advance for your answer

[ivodolenc]

Hi, thanks for your interest in this module.

Unfortunately the first example you shared doesn't work, it throws an error, so I can't debug it. If you found an error, please create a minimal repo on github or codesandbox without scss styling or complicated setups.

Don't forget to activate the additional plugins that you want to use. Also, inertia is a premium plugin, so you must have a Club GreenSock membership to be able to use the premium plugins. More info

// nuxt.config.js

export default {
  gsap: {
    extraPlugins: {
      draggable: true,
    },
    clubPlugins: {
      inertia: true,
    },
  },
}

[ivodolenc]

Closing this due to inactivity but as I mentioned, feel free to reopen it if you find an error.