OSUblake

And you should use refs instead of selectors. // bad <div id="someElement"></div> gsap.to("#someElement", {...}) // good <div ref="someElement"></div> gsap.to(this.$refs.someElement, {...}) https://codepen.io/osublake/pen/3c4edfeed36f900232b9d8c8a54aa2cc

No, plugins are typically for doing stuff with Vue. You need to make sure the client is available before running an animation. someMethod() { if (!process.client) return; gsap.to(...) }

You need to hide the overflow. body { overflow-x: hidden; }

That error means you're probably executing an animation on the server with SSR. Need to make sure process.client is available before running any anmations.

I made an important fix to that demo to normalize the speed on monitors with high refresh rates. https://codepen.io/osublake/pen/dce29f9c14192035dbf55a32181f0bdc

Not sure how you're trying to do that, but you can't update the frequency without recreating the animation. For it to be dynamic would require some work, like this.

let svg = document.querySelector("svg"), wave = document.querySelector("#wave"), width = 800, sinus = CustomEase.create("sinus", "M0,0 C0.4,0 0.3,1 0.5,1 0.7,1 0.6,0 1,0"), amplitude = 250, frequency = 30, segments = 1000, interval = width / segments; Don't ruin my code your commas. ? That's what minifiers do.

getRatio, is the easing function. You pass in a value between [0, 1], but that's different for v3. https://codepen.io/osublake/pen/ExPMgQq

v3 version. https://codepen.io/osublake/pen/ExPMgQq

Wow. I hope doctors, scientist, and engineers don't take that advice.

Not really a gsap or React error. You're not providing a valid target... or at least not one that can be modified. Console.log your targets to make sure they are what you think they are. const obj = { prop: 42 }; Object.freeze(obj); // Cannot add property _gsap, object is not extensible gsap.to(obj, { prop: 0 })

Safari is rasterizing it for performance. gsap.to(".textVideo h2", { scale: 6, duration: 300, force3D: false })

I don't think those numbers are really representative of developers using jQuery. A lot of those stats are from site add-ons, like a mailchimp form or a wordpress theme. So true. I think jQuery is a crutch and holds a lot of people back.

Then maybe you should create an event bus. https://blog.logrocket.com/using-event-bus-in-vue-js-to-pass-data-between-components/

Just follow my demo. Emit is done inside an arrow function. gsap.to(this.$refs.svg, { rotation: 360, duration: 1, ease: "none", delay: 1, onComplete: () => { this.$emit("animation:complete"); } }); I'm listening for that event. It calls the fadeLinks method. <Logo :width="350" @animation:complete="fadeLinks"/>

It's very easy to trigger another animation using emit. The logo spins, then the links fade away. https://codesandbox.io/s/aged-currying-tdk9o?file=/pages/index.vue

Not sure what you're trying to do. Can you create a simplified demo on codesandbox? https://codesandbox.io/ Some things to note. You should use refs instead of document.querySelector. https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements And emit has 2 arguments, the first being a string. https://vuejs.org/v2/guide/components.html#Emitting-a-Value-With-an-Event

It does. https://codepen.io/osublake/pen/be4368bacd082ccbcf8fa2c7601f2711

There is a timeline type. No need to do gsap.core.Timeline. (tl: GSAPTimelime, animData: Animation[]) I don't think you should be using Animation as class name. That already exists. https://developer.mozilla.org/en-US/docs/Web/API/Animation If you want to use a class like that, then you should provide default values. class MyAnimation { x: number = 0 y: number = 0 rotation: number = 0 duration: number = 0 constructor(...) {} } But I would recommend just using plain old JavaScript objects. GSAP adds properties to the object, like delay, ease, and overwrite.

I don't see how web-workers could be of much use to gsap as it doesn't have access to the window, which gsap needs if you're animating HTML/SVG elements. I think web-workers might be of use with OffscreenCanvas, but that's mostly for canvas operations. https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas

Follow the installation page, and use the install helper. Don't deviate from it. Be sure to watch the npm/yarn video all the way through. https://greensock.com/docs/v3/Installation That won't work. Those are old, and need to be updated. cc @ZachSaucier Ignore the old syntax and use gsap.

Yep. ?

It will work the same way as innerHTML, but I think it's better to use textContent.

Yeah, I totally forgot how you said it works. Like why did it know to use textContent as a property of the element and not the style?