Jump to content
Search Community

DrawSVGPlugin - Angular production issue

BrainsBlow test

By BrainsBlow
in GSAP

Moderator Tag
 Share

Recommended Posts

BrainsBlow test

BrainsBlow

Posted
Posted

Hello!

I am new to GSAP and I started angular project with gsap 2, I have issue with DrawSVGPlugin, on my LocalHost I have setup animation with drawsvg, it is working as expected, but after production build and deploy, this lines stoped to drawing and just loaded http://prntscr.com/q5r0jc

Here is link to my server http://185.233.116.112/

and I have also attached GIF from my LocalHost.

I hope someone can advice how I can find reason or any way to debug it since I don't have any errors.

Best regards

drawSVG.gif

Link to comment
Share on other sites
BrainsBlow test

BrainsBlow

Posted
  • Author
Posted

Hi ZachSaucier!

Thank you for fast reply!

Here is imports:

 

import { TimelineLite, Back, Power1, SlowMo, TimelineMax, TweenMax, Linear, Power4} from 'src/gsap';
import SplitText from 'src/gsap/SplitText';
import DrawSVGPlugin from 'src/gsap/DrawSVGPlugin';

 

and it is code for one line 
TweenMax.from(document.getElementById('Line_10'), 1, {drawSVG: '0%', delay: 4});

Link to comment
Share on other sites
ZachSaucier test

ZachSaucier

Posted
Posted

Hmm. Did you make sure to register the plugins before calling them? gsap.registerPlugin(DrawSVGPlugin, SplitText); That helps keep it from being tree shaken.

 

If that doesn't fix it you could try using the UMD files: import { DrawSVGPlugin } from "src/gsap/dist/DrawSVGPlugin";

 

Side note: It's usually better to use GSAP's timelines for sequenced animations instead of using a bunch of standalone tweens each with their own delay. It will make changing your animations much easier and has other benefits like easier controlling of your tweens as well.

I also highly recommend GSAP 3 :) 

  • Like 3
Link to comment
Share on other sites
OSUblake test

OSUblake

Posted
Posted
6 hours ago, ZachSaucier said:

Hmm. Did you make sure to register the plugins before calling them? gsap.registerPlugin(DrawSVGPlugin, SplitText); That helps keep it from being tree shaken.

 

I believe that @BrainsBlow is using v2, so that won't work. 

 

If using v2, then you can do this to prevent tree shaking from dropping the plugin. 

import { TimelineLite, Back, Power1, SlowMo, TimelineMax, TweenMax, Linear, Power4} from 'src/gsap';
import SplitText from 'src/gsap/SplitText';
import DrawSVGPlugin from 'src/gsap/DrawSVGPlugin';

const plugins = [DrawSVGPlugin];

...
TweenMax.from(document.getElementById('Line_10'), 1, {drawSVG: '0%', delay: 4});

 

  • Like 1
Link to comment
Share on other sites
  • 8 months later...
nolafs test

nolafs

Posted
Posted

Hi guys,

 

I am trying use the draggable plugin in one of my components in angular. All is working fine but the universal server build doesn't like 'registerPlugins'. It all builds fine but server errors with 

 

 Uncaught (in promise): TypeError: Cannot read property 'style' of undefined
TypeError: Cannot read property 'style' of undefined
 

Any ideas? 

 

Cheers

Olaf

Link to comment
Share on other sites
nolafs test

nolafs

Posted
Posted

Hi Jack,

 

Actually that line of code is causing the error. My guess is that Angular Universal cannot render it as it has DOM. So anything that might tries to select an element will through an error. Just speculating,  the only solution is to check if the platform is browser and only init the plugin if this is true.

 

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...