• Content count

  • Joined

  • Last visited

Community Reputation

1 Newbie

About LucitheR

  • Rank

Recent Profile Visitors

390 profile views
  1. how to debug DrawSVG in Angular?

    thanks a ton @OSUblake, console.log("GSAP Plugins", shows the Plugin but it does not work. i got it to work with TweenMax.fromTo(circl, 1.25, { drawSVG: 0 }, { drawSVG: '0 100%', stroke: '#f7f7f7', ease: Power2.easeInOut, onUpdate: () => { DrawSVGPlugin.getPosition(circl); } }).play(); but i wonder why is that working and simple use of drawSVG not? is there anyway to substitute 'drawSVG' with DrawSVGPlugin ? it might help with other Plugins too (ScrollTo will not get work, for instance)
  2. how to debug DrawSVG in Angular?

    Hi there, i want to draw a circle in an Angular App. This Codepen works fine ( sorry i'm not that crack to mock an Angular app in Codepen), when i use that code in Angular, i suspect the DrawSVGPlugin is not correct imported, though i got no errors, and the changes to the stroke-colors are working; it does not to be a problem with scrollmagic either. the start event fires correctly. What do i wrong? is there anything i overlooked ? how can i log or see if DrawSVG is working? i'm not that familiar with angular(version 5). Help is really appreciated //package.json "gsap": "file:src/app/res/vendor/gsap/src/uncompressed", // animation package / Homepage Component import 'gsap'; import * as DrawSVGPlugin from 'gsap/plugins/DrawSVGPlugin';// i can comment that out, same behaviour -.- import 'imports-loader?define=>false!animation.gsap'; // needed due to bug in ScrollMagic import ScrollMagic from 'ScrollMagic'; import 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators'; // code in Hompage.component.ts // ... this is wrapped in an window.load event since the circle path is inside a child component... // set duration on last element, so it will have an end event und start scrolling again const duration: number = (i === - 1) ? ownHeight : 0; const scene: any = new ScrollMagic.Scene({ triggerElement: el, duration: duration, offset: -triggerHeight }) .setPin(el) .addTo(smCtlr); // if you need trigger and indicators if (GlobalVariable.DEBUG) { scene.addIndicators(); } scene.on('start', (e) => { const circl = el.querySelector('.pathR'); TweenMax.set(circl, { DrawSVG: '0%' }); TweenMax.fromTo(circl, 5.25, { drawSVG: 0,stroke: '#ff0000' }, { drawSVG: '0% 100%', stroke: '#00ff00', ease: Power2.easeInOut }).play(); console.log(TweenMax.isTweening(circl)); });
  3. Hi there, i have two containers inside a horizontal draggable Div. positioned by flex-box inside the second Div i have some absolute positioned items that might be wider than said container. it's trivial to get the widths of those elements. and set the right padding. But when i start dragging that number is overwritten by draggable. i tried onPress, startDrag(). How do i set that Padding initially and persistently? in the screenshots: grey background: correct blue background: incorrect after dragging What am i doing wrong? how does draggable calculate its padding-right? Sorry that i can't make a codepen, but its wip on an ongoing project
  4. Physics 2D example for click eventhandler on a dot

    yay, that works! thank you all
  5. Physics 2D example for click eventhandler on a dot

    thanks, i'm new to Codepen, too; i have deleted it but still no event
  6. Hi there or Moin, first of all i'm a newbie to GSAP, so i may miss the obvious and i'm in a bit of a peril i copied the physics2d Demo, and thought to make it a simple Game, clicking a dot turns it red,but i can't seem to add eventhandlers to the dots. The docs for those tween lite didn't state any callback for the tweened objects, so i ask for your kind help. how stupid am i? here's my codepen cheers, Jan -edit: typo