Share Posted December 3, 2019 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 Link to comment Share on other sites More sharing options...
Share Posted December 3, 2019 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? Link to comment Share on other sites More sharing options...
Author Share Posted December 3, 2019 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 More sharing options...
Share Posted December 3, 2019 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 3 Link to comment Share on other sites More sharing options...
Share Posted December 4, 2019 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}); 1 Link to comment Share on other sites More sharing options...
Author Share Posted December 4, 2019 Hello Guys! Thank you both for your help! OSUblake your advice helped, thank you very much Link to comment Share on other sites More sharing options...
Share Posted August 31, 2020 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 More sharing options...
Share Posted August 31, 2020 @nolafs are you using v3? The previous posts talked about the very old v2 stuff, that's why I ask. I would of course STRONGLY recommend using v3. Did you gsap.registerPlugin(Draggable)? The error you mentioned sounds like maybe you forgot to do that. Very difficult to troubleshoot blind though. 1 Link to comment Share on other sites More sharing options...
Share Posted August 31, 2020 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 More sharing options...
Share Posted August 31, 2020 Ah, so you're saying that you're calling gsap.registerPlugin(Draggable) BEFORE the window/document/<body> even exists? If so, yeah, you should add some conditional logic to wait until those things exist before calling gsap.registerPlugin(Draggable). Does that help? 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now