LucitheR

how to debug DrawSVG in Angular?

Recommended Posts

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));

        });

 

Share this post


Link to post
Share on other sites

It always hard to tell what's going on with projects that import files. For a quick sanity check to see if the plugin is even loaded, try to log out the version the number.

console.log("DrawSVGPlugin Version", DrawSVGPlugin.version)

 

You can also see what plugins are loaded by logging this out.

console.log("GSAP Plugins", window.com.greensock.plugins)

 

  • Like 1

Share this post


Link to post
Share on other sites

And here's an old DrawSVG demo from Angular 2 that might be of help.

 

 

 

 

  • Like 2

Share this post


Link to post
Share on other sites

thanks a ton  @OSUblake

 

console.log("GSAP Plugins", window.com.greensock.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) 

 

 

 

 

 

Share this post


Link to post
Share on other sites

I don't know why it happens, but it happens with few other plugins. If you console log DrawSVGPlugin before using it or just execute 'DrawSVGPlugin;' statement, drawSVG works. By executing it maybe just makes those functions available for you to use.

 

But if you import it directly as follows, it works without needing to execute that statement.

 

import "gsap/DrawSVGPlugin";

 

 

  • Like 2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.