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 === this.ao.length - 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));
});