Jump to content
Search Community

how to debug DrawSVG in Angular?

LucitheR test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

        });

 

See the Pen aEOOGW by LucitheR (@LucitheR) on CodePen

Link to comment
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
Link to comment
Share on other sites

  • 2 weeks later...

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) 

 

 

 

 

 

Link to comment
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
Link to comment
Share on other sites

  • 1 year later...

I had been through many topics trying to use  DrawSVGPlugin and MorphSVGPlugin bonus plugins in Angular 8.0 with no results. After reading three days a bunch of questions related with it, it worked after doing this.

1. First import the plugins files in the nodes_modules/gsap folder.

2.Import the script in your component.ts file as import DrawSVGPlugin from 'gsap/DrawSVGPlugin';

3. add   "scripts": [
              "node_modules/gsap/DrawSVGPlugin.js"]    in the angular.json file.

And that's it, no need for to add  const plugins=[DrawSVGPlugin]; 

dra.gif

Link to comment
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.
×
×
  • Create New...