Jump to content


  • Posts

  • Joined

  • Last visited

About jorma

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

jorma's Achievements


Newbie (1/14)



  1. The answer to my question is... I'm an idiot. But seeing as I'm probably not the only idiot on the planet, I'll just answer my question and hopefully it's useful to someone else. The image is just blurry because it's a raster image rendered to a screen with 4 physical pixels for every 1 pixel in the image. That's why you need to scale up the canvas by a factor of 4 (2 x 2) and then scale it down. Only then does the canvas contain a pixel for every physical pixel. But then downloading that canvas will of course result in an image twice as wide and twice as high. That's the intended result! My question originated from my simple disability to believe that the correct image size could look that pixelated. Sorry for being dumb. Have a nice day
  2. Hey all, Now, this question is not directly related to GSAP but is tangentially relevant I think. However, if you disagree just let me know and I'll remove it. What I'm trying to do is render an SVG to a PNG through the canvas and then save it on machine with a retina display (all these bits are relevant). Drawing the SVG to the canvas and then getting the dataURL from the canvas will do this (see pen). However, on retina screens where CSS pixels do not match physical pixels the canvas becomes blurry. Please note that you will only see this effect if on your device the image in the pen shows 'dpr: 2' (or some other value !== 1). When displaying the canvas this blur is easily solved by multiplying the width and height attributes with window.devicePixelRatio and setting the CSS width and height to the width and height that the image should be on screen. This essentially creates the canvas in a higher resolution and shows it at the scaled resolution removing the blur. However, when downloading that PNG the result is an image with scaled up dimensions and a lower resolution. And I need the image to be the original width and height and not the scaled width and height... The attached pen tries to show this. On the left is the source SVG, in the middle column is the canvas without scaling (blurry) and the resulting PNG underneath. On the right is the scaled canvas (not blurry) and the resulting PNG underneath. The problem is that when downloading the resulting PNG (saveAs on the image on the bottom right or by clicking the link underneath) the result is a 600 x 600 px image with half the resolution (see attachment). My question: does anybody know how to get a 300 x 300 image with the correct resolution. Attaching a monitor that doesn't scale and has a devicePixelRatio of 1 works but is not something I can ask of my users. Any help would be much appreciated.
  3. jorma

    drawSVG bug?

    Got it. Thank you!
  4. jorma

    drawSVG bug?

    The initial state of the animation the very first time the page is initialised seems incorrect. The line in my CodePen is drawn from the start state of the last tween, not the first. This only happens the first time the drawing is animated. To reproduce this behavior just change the log text and watch the animation.
  5. jorma

    Strange order effects

    It's super simple to solve. Just doing a fromTo was easy enough and setting opacity = 1 is a good option also. I might at a later time change the other part of the application to use a style although for some reason I prefer attributes on SVG... but I don't have any actual reasons for my preference. Anyway, this forum rocks! You guys are super responsive and helpful. You make it very easy to recommend GSAP, paying for the license and engaging on this forum. Much thanks!!
  6. jorma

    Strange order effects

    It's because another part of the application sets the attribute and the style overrides that when both are set. Do you normally use CSS styles for opacity on an SVG element? If so when would you use a style and when an attribute. Also, GSAP knows the default for the opacity on a style = 1 and can Tween to it when it's not explicitly set but it works differently for attributes?
  7. Have a look at the pen for a demo: I have three elements: <svg width="200" height="100"> <circle id="redCircle" cx="50" cy="50" r="50" fill="red"></circle> <circle id="blueCircle" cx="150" cy="50" r="50" fill="blue"></circle> <line id="greenLine" x1="0" y1="0" x2="200" y2="100" stroke="green" stroke-width="3"></line> </svg> I animate them as follows: let tl = new TimelineMax(); tl.from('#redCircle', 1, { attr: { opacity: 0 } }, 'start'); tl.fromTo('#blueCircle', 1, { attr: { opacity: 0 } }, { attr: { opacity: 1 } }, 'start'); tl.fromTo('#greenLine', 1, { drawSVG: '0%' }, { drawSVG: '100%' }, 'start'); What happens is that the red circle does not animate at the same time as the others. Please note that I need to animate the attribute opacity and not the style because of other considerations in my app. This works: let tl = new TimelineMax(); tl.fromTo('#redCircle', 1, { attr: { opacity: 0 } }, { attr: { opacity: 1 } }, 'start'); tl.fromTo('#blueCircle', 1, { attr: { opacity: 0 } }, { attr: { opacity: 1 } }, 'start'); tl.fromTo('#greenLine', 1, { drawSVG: '0%' }, { drawSVG: '100%' }, 'start'); And this: let tl = new TimelineMax(); tl.from('#redCircle', 1, { opacity: 0 }, 'start'); tl.fromTo('#blueCircle', 1, { opacity: 0 }, { opacity: 1 }, 'start'); tl.fromTo('#greenLine', 1, { drawSVG: '0%' }, { drawSVG: '100%' }, 'start'); Just not the first one... am I missing something? THX! Jorma
  8. To be clear, it works perfectly fine as long as I don't add TweenMax to the scripts property in .angular-cli.json. So there really is no problem to solve. With that out of the way... I get the following error in the console of the page (not the terminal): ERROR TypeError: gsap_1.TimelineMax is not a constructor I import TimelineMax like so: import { TimelineMax, Power2 } from 'gsap'; in my component. I can also import TweenMax in the same fashion (if I needed to). Why would I want to load it globally? I understand this is necessary for DrawSVGPlugin because it is used indirectly by GSAP.
  9. Thank again @OSUblake! For those that come across this post: you need to restart ng serve for this to work. And I don't seem to need the TweenMax line. In fact I get an error when I include that file (the minimised version to be precise).
  10. @OSUblake, regarding DrawSVGPlugin, the only way I can get it to work is by adding it as a script tag to my HTML. Like so: <script src="assets/gsap/plugins/DrawSVGPlugin.min.js"></script> Doing something like this: import * as DrawSVGPlugin from '../../../assets/gsap/plugins/DrawSVGPlugin'; works for plugins that are directly addressed in the component but doesn't work for DrawSVGPlugin when I use the attribute 'drawSVG' in my vars object. Any ideas as to how I should import it? Or is my script tag solution actually the best way? Thanks in advance!
  11. @Sahil, I just upgraded all the packages in my project and got the same error as you did. When transpiling, typescript would warn about overwriting my .js files. Setting allowJs back to false in tsconfig.json fixed that issue. I don't really know why I needed that particular setting earlier and ran into this issue after upgrading. Maybe a change in the way typescript transpiles JavaScript files...? Anyway, I hope it helps for you!
  12. Just a guess but could it have to do with the fact that you put the files in the folder 'vendor'? That sounds like a folder that could be used as a destination for compiled files. Again, just guessing... Good luck!
  13. I put all the plugins into: src/assets/gsap/plugins I referenced them like so: import * as DrawSVGPlugin from '../../../assets/gsap/plugins/DrawSVGPlugin'; (obviously you need to tailor the nr of ../'s to your directory structure) And I added: "allowJs": true, to tsconfig.json. That was it...
  14. I did have to add "allowJs": true, in tsconfig.json.
  15. Yup! Both those tips were spot on. Thank you so much. Enjoy your day!