need assistance with environmetal issues with vue cli

[Nasr Galal]

If we imagine two stages of a simple animation like shown in codepen, I used gsap.utils to do this test.

this code functions properly on online editors, but when it comes to the local environmental setup, here is the unexpected behavior:

all animations run at the same time

 

This issue is noticed also in the following post:

This post could help others to be aware of such topic

 

Thanks

See the Pen VweNvdg by nasr3090 (@nasr3090) on CodePen

[ZachSaucier]

Hey Nasr. You're saying that the code in the demo above runs the .from() and .to() at the same time? Can you please share a file that shows that issue in your build system? 

 

Side note: We recommend that you use all GSAP 3 syntax (including putting the duration inside of the vars parameter and using the condensed string form of eases):

 

[Nasr Galal]

Hey Zack!
I am using Vue CLI 4. Nothing fancy with the config:

// const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const SitemapPlugin = require('sitemap-webpack-plugin').default

const paths = [
  {
    path: '/',
    lastmod: new Date().toISOString().slice(0,10),
    priority: '0.8',
    changefreq: 'hourly'
  },
  {
    path: '/products',
    lastmod: new Date().toISOString().slice(0,10),
    priority: '0.7',
    changefreq: 'hourly'
  },
  {
    path: '/about',
    lastmod: new Date().toISOString().slice(0,10),
    priority: '0.7',
    changefreq: 'hourly'
  }
]

module.exports = {
  publicPath: '/',
  configureWebpack: {
    optimization: {
      minimize: true,
      moduleIds: 'hashed',
      runtimeChunk: 'single',
      splitChunks: {
        minSize: 10000,
        maxSize: 250000,
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all'
          }
        }
      }
    },
    plugins: [
      new SitemapPlugin('htttps://www.codewetrust.com', paths, {
        filename: 'sitemap.xml',
        lastmod: true,
        changefreq: 'hourly',
        priority: '0.8'
      })
    ]
  },
  transpileDependencies: [
    "vuetify"
  ],
  chainWebpack: config => {
    // config.plugin("webpack-report").use(BundleAnalyzerPlugin, [])
    config.plugin("VuetifyLoaderPlugin")
      .tap(args => [{
        progressiveImages: true
      }])

    config.plugin("MiniCssExtractPlugin").use(MiniCssExtractPlugin)
  }
}

 

I have a component that contains the whole scene that builds on the same concept provided at codepen.
This is the code part i am using for the animation:

// gears intro
 gsap.utils.toArray('.element').forEach((el: any, i) => {
	tl.from(el, {
		y: i % 2 === 0 ? i * 2 + 120 : i * 2 + 150,
		duration: 6
	}, 0)
})

// gears rotation and rest of scene animations
// First: ball animation (not for the current discussion)
tl.to("#ball", {
	duration: dur * 6,
	motionPath: {
		path: '#CAD_Arc__x2D__by_Points_20_',
		align: "#CAD_Arc__x2D__by_Points_20_",
		autoRotate: true,
		alignOrigin: [0.5, 0.5],
		start: 1,
		end: 0,
		},
	})

gears.forEach((gear: any, i) => {
	tl.to(gear, {
		rotation: i % 2 === 0 ? 360 : -360,
	}, (dur) * i)
})

dialogs.forEach((dialog: any, i) => {
tl.to(dialog, {
		opacity: 1,
	}, dur * i)
})

hope this helps a bit

[ZachSaucier]

It definitely seems related to your build process (but I think you knew that already). Would you mind including all of what I need to recreate the issue? Or you could create a repo on GitHub that I could download and install from.

[Nasr Galal]

let me recreate it. I will post the repo on here

[Nasr Galal]

@ZachSaucier

HYG!

 

https://github.com/sniperadmin/gsap-runtime-bugs

 

[ZachSaucier]

From what I can tell there is no bug here. Your code is different.

// What you have in your CodePen
tl.from(el, {
  y: ...,
}, 0)
tl.to('.gear', {
  rotation: ...,
})

// What you have in your Vue file
tl.from(el, {
  y: ...,
}, 0)
tl.to('.gear', {
  rotation: ...,
}, (dur) * i) // Your position parameter is different

Since i = 0 on the first element, the first rotation starts when the elements are still being translated.