Search the Community
Showing results for tags 'debug'.
Found 6 results
-
Hi guys im trying to use scrollsmoother on my website with tailwindcss however whenever i add data speed to an element it causes the element to just be fixed to the final position relative to where its heading according to the scrollsmoother if it were to smooth the divs on scroll . I have no idea why this is happening, i tried forking other scrollsmoother demos without tailwind and had no issues whatsoever. if someone could provide me with an explanation and or solution it would be much appreciated. Ive attached a codesandbox demo below however i have no idea how to attach the gsap scrollsmother dependency but i linked all the necessary code files within the sandbox. Sorry guys im very new to using codesandbox. I also have images below of the issue. https://codesandbox.io/s/zen-lake-pxlpm0
-
With the arrival of tools in Gsap3, it would be great to see some native tools and methods to optimize debugging. It would be great to see an included method to dissect complexe timeline child data. We forget sometime js offer nice visual debugging tool like console.table. It would be great to have this kind of method at hand natively in gsap. Can be better optimized by a pro from the library to correctly remap the visual hierarchy. I do not yet know all the operation internally, a lot of information difficult to decode. But a simplified version could be interesting. maybe a thing like this gsap.utils.consoleTable(timeLine,options); Any suggest about the good way to map all good thing for debugging a complexe timeLine in a console table ? the code used upper look like this. what do you think? console.table(master.getChildren().map((c)=>{return {_id:c.vars.id,_labels:JSON.stringify(c.labels),...c } }))
-
I am trying to do a simple tweening of increasing the radius of circles whenever the mouse gets clicked over an svg canvas. However, I am getting some jerking/choking on the tweening of the circles, and can't debug it why. This problem only happens when I try to create another circle, before the ones that are currently being animated finishes. Any help is greatly appreciated Main function code is the following: createCircle(evt) { const { clientX: x, clientY: y } = evt const id = `circle-${++this.lastCircleId}` this.circles.push({ x, y, id }) Vue.nextTick(() => { TweenLite.to(`#${id}`, 1, { attr: { r: 50 }, onComplete: () => { this.circles = this.circles.filter(circle => circle.id !== id) }, }) }) }, CodeSandbox example: https://codesandbox.io/s/vue-template-j9my3?fontsize=14 P.S. Sorry I posted a CodeSandbox example instead of CodePen, but couldn't really get the CodePen to work with vue template syntax.
-
Hi, I just plugged GSDevTools to my js file, but GSdevtools not picking up my timeline IDs, and also it default to Global Timeline and continue to play till 90.00sec. why is that? function gotoNext($out, $in) { var tl = new TimelineMax({ id: "sliderOut" }), $slide_left = $out.find(".slider-left"), $slide_svg_path = $out.find(".svg-bg > .svg-bg-left"), $slide_name = $out.find(".slider-project-name"), $slide_desc = $out.find(".slider-description"), $slide_tech = $out.find(".slider-tech > ul li"), $slide_right = $out.find(".slider-right"), $slide_static_name = $out.find(".slider-static-title"), $slide_on = $out.find(".slider-no"), $slide_img = $out.find(".slider-img"); tl .set($in, { autoAlpha: 1, className: "+=active" }) .set($out, { className: "-=active" }); // other tweens } GSDevTools.create({ id:"#sliderOut" });
-
Hi ! I'm really happy to be able to use tweenmax for animation. I've noticed one issue, that is kind of hard to reproduce. Using chrome and a simple command like : `tl.to(parentClass + ' .card-2', cardAnimInDuration, { scale: 1, left: 0, top: 0, rotation: -5, ease: Expo.easeOut, delay: delayDuration }, 'cardsIn')` produce a nice animation which render perfectly in chrome. In chromium it is also perfect. But in some version of Electron, the content is not visible due to an error in the matrix transform. The produced matrix transform is as follow : chrome 51.0.2704 : `transform: matrix(0.99619, -0.08715, 0.08715, 0.99619, 56.9881, -22.7032);` canay chromium : `transform: matrix(0.99619, -0.08715, 0.08715, 0.99619, 56.9881, -22.7032);` electron 1.2.3 : `transform: matrix(0,99619, 0,08715, 0,99619, 0,08715, 0, 871557);` You'll notice that the "." dots are replaced by commas... and this breaks the transform property. I'll be happy to get some help on this issue. Thanks !
-
[see "Why can't code be in <head>?" thread as the problem has been pinned down to putting the timeline in the <head> and .play() in the <body>] Been using jQuery animation and am new to GSAP. I created a TimelineLite animation on a standalone page. The page includes all the scripts and style resources used by my live website so I could check for conflicts. It ran fine -- animation was mostly opacity changes. I put the script into my test site. [uPDATE: On the test site I use a JS closure to encapsulate the TimelineLIte animation -- this seems to be the problem]. I see the text and image resources but nothing is animated until it hits the onComplete on the last line. That calls a TweenLite.to() outside the TimeLineLite to fade everything out. I stepped through the GSAP code (min version) on the test site and it seems to be running through all the steps in the animation. For instance, in TimelineLite.min.js the value of "this._totalDuration" is the total length of all the durations and delays added up. In the TweenLite.min.js code the value "e.id" takes on the values of each of my selectors as it loops around. Yet the screen shows nothing happening. I'm using this resources. <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script> Any tips on debugging a problem like this [closure]? Is there a line in TweenLite.min.js I can set a breakpoint on and see what is really going on?
