[need assistance with environmetal issues with vue cli]

@ZachSaucier

HYG!

 

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

 

[need assistance with environmetal issues with vue cli]

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

[need assistance with environmetal issues with vue cli]

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

[need assistance with environmetal issues with vue cli]

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

[Multiple autoAlpha to multiple elements]

@ZachSaucier

this is really strange!

 

in codepen, It runs as expected

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

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!

[jest mock gsap]

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

 

[How to mock scrollTrigger in jest?]

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

[Multiple autoAlpha to multiple elements]

Also found out that using `delay` is more stable

e.g:
 

.to('#something', 0.8, { opacity: 0, delay: 4 })

 

[Multiple autoAlpha to multiple elements]

I replaced autoAlpha with opacity, It does the trick

[Multiple autoAlpha to multiple elements]

Thanks! with codepen it is okay,

 once I apply it in a Vue app, it does only show elements which results in overlapping

 

[Multiple autoAlpha to multiple elements]

Hi @mikel

Appreciate your response

how about something like this:

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

 

[Multiple autoAlpha to multiple elements]

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)

 

[Gsap hooks with Vue js]

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.

 

[Gsap hooks with Vue js]

Hey Zach,

HYG,

 

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

[Gsap hooks with Vue js]

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!

[WAAPI-Powered GSAP? Unlikely]

On 12/14/2017 at 4:09 PM, OSUblake said:

 

Hehe. Searching for CSS Houdini doesn't bring up a lot of results, so after a few pages, most of the results are about that, and after that, the results are about the magician. And that's where the name comes from. It allows you to tap into the magic of Styling and Layout on the web.

 

@Dipscom

 

Before I forget, here's a good web worker demo, which is just like a worklet. Get the number of objects up to 5-10,00, and then toggle the workers to see the performance difference.

 

 

 

@Sahil I saw your question. I was going to respond back later on with some more stuff.

 

 

@OSUblake

I was thinking to measure how it could affect performance!
you really did a good job! thanks a lot!
I was looking for that!

 

I have 2 queries in mind:

1- Will it be possible or useful running gsap on the web-worker?
2- How to optimize SVG to boost the performance of the client side?

[Vue jest mock gsap]

Hey Zack!
oh yeah, I was looking for threads discussing this issue!
thanks for these recommendations

[Vue jest mock gsap]

I am using gsap in a component

<script lang="ts">
  import { DiagramSvgHelper } from '@/mixins'
  import { gsap } from "gsap/all"
  import {
    Component
  } from "vue-property-decorator";

  @Component({})
  export default class Diagram extends DiagramSvgHelper {
    // someCodeHere
  }
</script>

I would like to test the component without `gsap`for now, once i created a jest test this response comes:

 

 

I used `gsap.to()` and `gsap.set()` methods

 

Thanks all

 

[cannot access elements nested in <svg> via listener]

Thanks for the proper info

 

[cannot access elements nested in <svg> via listener]

hey zack!
so I have to use a tool like illustrator to fix this?

 

[cannot access elements nested in <svg> via listener]

Nested elements like `<image />` are not recognized via listener using native js, jquery, or even vuejs

 

Just looking for a way to define them to the listener

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

[New way of typewriter]

Super like the approach!

it looks even simpler!

 

ok now If I would like to rebuild something like this awesome animation:

https://codesandbox.io/s/nw10kz7m3j

there are multiple lines, that's why I did try to build the simplest mechanics for the typo
if you have any other suggestions, please share!

Thanks for the helpful code!

[New way of typewriter]

Just trying 2 different easy approaches to get this typewriter works like a charm!
 

My issue is to sync both animations of the #text element and the chars and I do believe it is really simple to do!

I am looking for an easy approach to take down this latency

this animation is what i need to edit:

// need to sync this block with the above animation
gsap.from('#text', {width: 2, duration: 2, ease: SteppedEase.config(20) })

my target is to code this without the use of any other JS Libs like jquery

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