Nasr Galal

@ZachSaucier HYG! https://github.com/sniperadmin/gsap-runtime-bugs

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

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

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

@ZachSaucier this is really strange! in codepen, It runs as expected https://codepen.io/nasr3090/pen/YzqPWZP in code sandbox, it runs as expected https://codesandbox.io/s/text-opacity-animation-pxlos?file=/src/App.vue but in my vue cli localhost it does not!

I have used your attached code, but when you use a plugin, sometimes it throws this: FAIL tests/unit/components/diagram.spec.ts ● Test suite failed to run TypeError: Cannot read property 'registerPlugin' of undefined

Wondering how to mock scroll trigger in jest for unit tests?

Also found out that using `delay` is more stable e.g: .to('#something', 0.8, { opacity: 0, delay: 4 })

I replaced autoAlpha with opacity, It does the trick

Thanks! with codepen it is okay, once I apply it in a Vue app, it does only show elements which results in overlapping

Hi @mikel Appreciate your response how about something like this: https://codepen.io/nasr3090/pen/oNbrgvM

any simpler way to do this? as the '#note3' will not show up plus, it is a lot repetitive! tl .to('#note1', 0.8, { autoAlpha: 1, }, 5) .to('#note1', 0.8, { autoAlpha: 0, }, 10) .to('#note2', 0.8, { autoAlpha: 1, }) .to('#note2', 0.8, { autoAlpha: 0 },15) .to('#note3', 0.8, { autoAlpha: 1 }) .to('#note3', 0.8, { autoAlpha: 0 }, 20) .to('#note4', 0.8, { autoAlpha: 1, }) .to('#note4', 0.8, { autoAlpha: 0, }, 25) .to('#note5', 0.8, { autoAlpha: 1, }) .to('#note5', 0.8, { autoAlpha: 0, }, 30) .to('#note6', 0.8, { autoAlpha: 1, }) .to('#note6', 0.8, { autoAlpha: 0, }, 35)

Hmm,.. You are absolutely right! I need to change the way I think of things when it comes to problem solving I am still reading the referred article. I really thank you for that reference.

Hey Zach, HYG, https://codepen.io/nasr3090/pen/mdVYEQo

I am using Vue js and the behavior will be hard to explain in here, so i recorded a 3 mins video: glad to discuss.. thanks!