marcodellabate

@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).

@Dipscom you are the MVP! Many thanks

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.

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?

That worked, thanks!

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!

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

https://codepen.io/shiedesign/pen/KKMBMQr 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?

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

https://codepen.io/shiedesign/pen/vYKaBXq 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?

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

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.

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

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

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!