[scrollerProxy among different components in Vue]

@Page Tailoring I instanced smooth scroller in the Parent component and then used the Vuex store to pass the instance to a child of a child (if you have a simple parent-child case you can pass it via the props instead).

Then I used the instance as you usually would with scrollerProxy (as mentioned in the docs).

[SplitText and interpolations in Vue]

@Dipscom you are the MVP! Many thanks

[SplitText and interpolations in Vue]

You're right, it does act problematically if I use innerHTML.
But then SplitText does not work with dynamic/JS-generated text?

I'm gonna ask on the Vue forum too in the meanwhile.

[SplitText and interpolations in Vue]

Hello again,

sorry for the second question in such a short time but I came up with a new problem using SplitText in Vue.

I have a text interpolation:

<h1>{{ text }}</h1>

 

I animated it through a method that includes splitText and GSAP similar to this one:

splitTitle() {
    let titleSplit = new SplitText("h1", {
            type: "chars",
          });

          let charsTimeline = new TimelineMax({
            onComplete: () => {
              titleSplit.revert();
            },
          });

          charsTimeline
            .from(titleSplit.chars, {
              duration: 1,
              scale: 0.4
            })
}

when the animation is finished (the text is introduced), when the user interacts in a certain way (say click) the text is supposed to change through the vue interpolation:

 

this.text = "newText"

 

but this doesn't happen and text stays the same and doesn't change anymore when the splitText is applied.
It looks like SplitText is replacing the parametric {{ text }} with a raw html text that removes the reactivity ties with Vue.

Is this expected behaviour? Is there any workaround?

[scrollerProxy among different components in Vue]

That worked, thanks!

[scrollerProxy among different components in Vue]

Hello,

I have Vue project with a parent component which has attached a Smooth Scroller from IdiotWu (same one used in the scrollerProxy tutorial). 
This component acts as a wrapper for multiple children components, one of which needs some ScrollTrigger events attached to it.

I cannot figure out how to use the scrollerProxy to make the scrollTrigger work in such a situation. Explanation:

 

// Parent component

<template>
  <div id="wrapper">		<---- this div has smooth scroller
  	<child-component />
    <div>//Stuff</div>
    <div>//Stuff</div>
  </div>
</template>

<script>
import Scrollbar from "smooth-scrollbar";
import childComponent from "childComponent.vue"

export default {

	mounted() {
		Scrollbar.init(document.querySelector("#wrapper"), options);
	}
}
</script>

// child component

<template>
  <div class="divs-to-scrolltrigger">
    <div class="div"></div>
    <div class="div2"></div>
  </div>
</template>

<script>
  
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);
  
export default {
  // ??
}
</script>

In such a case, where do I insert the scrollerProxy?
Thanks in advance!

[Animate path points in canvas/Pixi.js]

Amazing, the onUpdate did the trick!! 
Thanks so much for the help

[Animate path points in canvas/Pixi.js]

See the Pen KKMBMQr by shiedesign (@shiedesign) on CodePen

I created a simple pen trying to apply what you said but there is no animation happening on the endpoint. What am I getting wrong?

[Animate path points in canvas/Pixi.js]

Do you mind clarifying how to use objects for canvas paths?

[Animate path points in canvas/Pixi.js]

See the Pen vYKaBXq by shiedesign (@shiedesign) on CodePen

This is basically what I want to do, these are the two eyelids (they are coded so that they take up the whole viewport in width and height). What I want to achieve mainly is to Tween the arcs so that they morph from an horizontal line to the arc shown in the codepen.
The type of animation is very similar to the pen in the first post: an horizontal line that draws from left and then the eye that opens.

Is there any way to animate the control points directly through gsap?

[Animate path points in canvas/Pixi.js]

Hello,
I am trying to achieve something very similar to the codepen but with PixiJs instead of SVG.
I can't find recent or accurate information on how to animate paths through GSAP into PixiJs v5, I can only find information about animating the drawing of a line, but not about tweening the points themselves.

More specifically, what I'm trying to achieve is to tween the position of the mid point of a bezier curve made up of 3 points.

 

Can anyone give me a lead?
Thanks much appreciated

 

See the Pen MazWqb by chrisgannon (@chrisgannon) on CodePen

[Draggable-Angular: Property '_gsTransform' does not exist on type 'HTMLElement']

I don't know if it's only me, but it looks like Angular 6 has become a lot more strict with the TS syntax than before.

[Draggable-Angular: Property '_gsTransform' does not exist on type 'HTMLElement']

That actually made the trick, the error is gone now. Thanks!!

[Draggable-Angular: Property '_gsTransform' does not exist on type 'HTMLElement']

import 'gsap';

import TweenMax from 'gsap';
import Draggable from 'gsap/Draggable';

These are the imports, and this is a small portion of the code that uses _gsTransform

 

 Draggable.create("#foo", {
      type: "rotation",
      bounds:{ minRotation:0, maxRotation:270 },
      onDrag: function () {
        angle = $("#foo")[0]._gsTransform.rotation; 

tell me if you need something more

[Draggable-Angular: Property '_gsTransform' does not exist on type 'HTMLElement']

Hello,
I'm building an application with Angular 6 that includes Draggable. I've imported Draggable successfully and the application works perfectly but I keep getting this typescript error:
 

error TS2339: Property '_gsTransform' does not exist on type 'HTMLElement'.

How can I get rid of this irritating error?
Thanks!

[Can't get CustomEase to work with Angular]

The result is the same, even in the console log

[Can't get CustomEase to work with Angular]

There are all the easings names under easing (Back, BackIn ecc.) but I don't see any CustomEase

[Can't get CustomEase to work with Angular]

I'm sorry but I'm new to angular and I still have to learn.
I added the line you provide, and while I don't get any error in VSCode, I still get a "CustomEase not defined" error in the firefox console.

[Can't get CustomEase to work with Angular]

Now when I start the ng serve I get this error
 

ERROR in node_modules/@types/gsap/index.d.ts(14,5): error TS2300: Duplicate identifier 'export='.
src/typings.d.ts(6,44): error TS2300: Duplicate identifier 'export='.

EDIT: Solved by adding this line to tsconfig.json
 

    "paths" : {
      "*" : [
        "../TSProjectA/node_modules/@types/*",
        "./node_modules/@types/*",
        "*"
      ]
    },

but I keep getting the CustomEase error defined in the first post

[Can't get CustomEase to work with Angular]

Okay, I've tried to delete gsap to do a fresh install. I've used this code
 

npm install -S gsap @types/greensock

I've added this line to the main.ts file
 

import 'gsap';

but when I put my tweenings into app.component.ts I get this error:

 

The TimelineMax name was not found

same goes for CustomEase. Where am I going wrong?

[Can't get CustomEase to work with Angular]

Good morning, I'm making a project with Angular 5 and I've imported GSAP along with TimelineMax but I can't seem to get CustomEase to work.
The terminal doesn't give me errors but when I load the page in the browser I get the "Error: CustomEase is not defined"

Can someone explain me the exact procedure to import and use CustomEase? Maybe I'm missing something.