Tween animation slows down randomly

[jacobiwan]

Background

I created a codepen so you can see how it's supposed to work. I've actually developed the site in Vue, so I've pasted the code from that component below. Put simply. I just want a list of logos to continuously flow from left to right. My implementation uses gsap to animate the sliding and then repeats the box of images so that it seems infinite.

 

Problem

When I start the vue server fresh or when I build it, the movement of the banner is about half speed. It never quite finishes the first box of logos and then restarts. I can't quite figure out why this is happening, but I imagine it's simple and I'm just overlooking it. The part that truly confuses is that if I put the line console.log(-imagesBox.scrollWidth) just above the gsap.timeline() and save it, it returns to full speed and working properly. Then I remove it and it continues to work fine until the next time I start up the server or build it.

 

The only thing I've figured out is that initially on build or server start the value of -imagesBox.scrollWidth is -448, while the real value of it is -2240(values in the codepen may be a bit different) . Not sure why this is different on load vs after I make a change to the function and save.

 

<template lang="pug">
section#sponsors.section-home
  .sponsors
    .images(v-for="n in 2")
      .image(v-for='s in sponsors' :key='s.id')
        g-image(:src="s.logoDark.file.url")
</template>

<script>
import { gsap } from 'gsap'

export default {
  name: "Sponsors",
  props: {
    sponsors: {
      type: Array,
      required: true
    }
  },
  methods: {
    slideSponsors() {
      const imagesBox = document.querySelector('.sponsors')
      gsap.timeline()
        .to('.sponsors', {
          x: -imagesBox.scrollWidth / 2, 
          duration: 10,
          ease: 'none'
        })
        .repeat(-1)
        .then(this.repeatImages)
    },
    async repeatImages() {
      const imagesBox1 = document.querySelector('.sponsors > .images:first-of-type')
      const sponsorsBox = document.querySelector('.sponsors')
      sponsorsBox.appendChild(imagesBox1)
    }
  },
  mounted() {
    this.slideSponsors()
  }
}
</script>

<style lang="stylus" scoped>
#sponsors
  background linear-gradient(135deg, nl2, nl0)
  box-sizing border-box
  padding s0 0
  height sp9
  overflow-x hidden
  > .sponsors
    display flex
    flex-direction row
    width 100%
    height 100%
    > .images
      display flex
      flex-direction row
      justify-content center
      align-items center
      height 100%
      > .image
        box-sizing border-box
        margin-left sp4
        max-width sp10
        min-height sp2
        > img 
          max-width sp10
          min-height sp2
</style>

See the Pen eYdxKpz by jakeatunova (@jakeatunova) on CodePen

[ZachSaucier]

Hey jacobiwan and welcome to the GreenSock forums.

 

I don't know about your Vue setup, but in the CodePen demo you can get it to work by changing your x value (I also commented out your margin-left to it perfectly loops):

See the Pen xxEMaNq?editors=0010 by GreenSock (@GreenSock) on CodePen

[jacobiwan]

Hey @ZachSaucier

 

Thanks for checking it out! I tried updating the x value like you had it, unfortunately it didn't seem to actually do anything. Here is a link to a screen recording of how it works for me (it seems that it's not an issue on mobile Chrome, but it is an issue on mobile/desktop Edge/Firefox and desktop Chrome). You can see that it starts slow and doesn't quite finish the rotation. Then around the 20ish second mark, I update the function adding the line console.log(imagesBox.scrollWidth) and save it and you can see it refresh and go back to normal. I wish I had a better way to put the Vue component in there so I can replicate it exactly. Let me look into that.

[ZachSaucier]

You can put a Vue component on CodePen. We talk about doing so in the thread about making a minimal demo towards the end of the video.

[jacobiwan]

Ha. I was just setting one up and struggling with adding gsap as an npm package. That video helped, thanks! I'll attach it anyways... but it seems to be working correctly in the new

See the Pen NWRoOjK by jakeatunova (@jakeatunova) on CodePen

.

 

I just checked the staging site as well and it appears to be working (I haven't checked it in a while since it still wasn't working locally). I guess as long as it's working on the staging and there's nothing inherently wrong with my setup, I'll just go with it for now. Thanks for your help Zach!