Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
BrainsBlow

DrawSVGPlugin - Angular production issue

Recommended Posts

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

Share this post


Link to post
Share on other sites

Hey BrainsBlow and welcome to the GreenSock forums. I like your animation! Thanks for being a Club GreenSock member.

 

How are you importing GSAP and GSAP's plugins?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


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

Share this post


Link to post
Share on other sites

Hello Guys!

Thank you both for your help!

OSUblake your advice helped, thank you very much

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×