Jump to content
Search Community

marcodellabate

Premium
  • Posts

    21
  • Joined

  • Last visited

Everything posted by marcodellabate

  1. @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).
  2. 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.
  3. 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?
  4. 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!
  5. Amazing, the onUpdate did the trick!! Thanks so much for the help
  6. 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?
  7. Do you mind clarifying how to use objects for canvas paths?
  8. 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?
  9. 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
  10. 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.
  11. 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
  12. 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!
  13. The result is the same, even in the console log
  14. There are all the easings names under easing (Back, BackIn ecc.) but I don't see any CustomEase
  15. 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.
  16. 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
  17. 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?
  18. 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.
×
×
  • Create New...