Jump to content

All Activity

This stream auto-updates     

  1. Past hour
  2. GreenSock

    wiggle path of SVG

    Looks like setting start:0 and taperStart:0 improves things, right @mikel?
  3. mikel

    wiggle path of SVG

    Hi @ZachSaucier,, I´m interested also ... My fork of Jack's pen has a problem with the start/end point: https://codepen.io/mikeK/pen/xNYzVq Kind regards Mikel
  4. One way to do it is to .set the original position of the rocket to the bottom and then change the order of your bezier path to match, like so: var R = 610; TweenMax.set("#rocket", { y: R }); TweenMax.to("#rocket", 5, { bezier: { curviness: 1.5, values: [ {x: 0, y: R}, {x: R / 2, y: R / 2}, {x: 0, y: 0}, {x: -R / 2, y: R / 2}, {x: 0, y: R} ], autoRotate: 90, }, ease: Linear.easeNone, repeat: -1 }); https://codepen.io/ZachSaucier/pen/EzQLvx?editors=0010
  5. Hey, I've just added the codepen example.
  6. Today
  7. Hey Lanceken and welcome to the forums! Do you have a CodePen of the project that you can share with us? It would make us helping you easier.
  8. Hey knalle, Which parts of this are you stuck on specifically? The basic approach is the same as Blake's demo, the difference only being to select the points from an existing path instead of creating them.
  9. Hi, I am new to this. I've created a world globe, that is rotating. I would like to create a rocket that is rotating around the world in the other way. That is working fine. But I would like to set the starting point at the bottom. Now it is starting at the top. Is that possible. var R = 610; TweenMax.to("#rocket2", 5, { bezier: { curviness: 1.5, values: [{x: 0, y: 0}, {x: -R / 2, y: R / 2}, {x: 0, y: R}, {x: R / 2, y: R / 2}, {x: 0, y: 0} ], autoRotate: 90, }, ease: Linear.easeNone, repeat: -1 });
  10. There infinite ways to animate between colors. This is one of my favorite graphics to illustrate that and it is just illustrating the RGB color space (pulled from this GraphicDesign.SE answer). Animating between HSL is different, as seen in the visualization of its color space (pulled from this page).
  11. knalle

    wiggle path of SVG

    I wan't to wiggle an existing path - in the style og the blobs here: https://codepen.io/osublake/pen/vdzjyg , but this one creates blobs instead of using an existing. In this previous post there are some discussion on the topic: I have tried Jack's waveSVG that accepts existing path data. But I notice the start and end points aren't aligning in the wave motion. I will only wiggle a blob consisting of around 20 points. The various blobs are used as backgrounds for line icons. Thanks in advance
  12. You can turn off those errors in a tsconfig file.
  13. Hi @najmu, Welcome to the GreenSock Forum. Please take a look at Get started ... If you have specific GreenSock-related questions, get in touch. And then open a new post please. Kind regards Mikel
  14. i want to use this code for angular 6 to draw svg line.How can i achieve this can anyone help me.I am very new to your page.do i need to install any library?
  15. Hi Mikel Thank you for the warm welome Your example is a perfect example of what I am trying to achieve. Thanks!
  16. If I don't import in my typescript file the build fails immediately. error TS2304: Cannot find name 'TimelineLite'. I'll try the third option if I figure out how to do it
  17. Thank you for checking that out for me. Yes i did take out the bubble functions completely the publisher came back with the same thing. I think the tool is possibly testing things incorrectly i will try gain access to the tool and see.
  18. Oddly enough, I think it's actually doing precisely what it's supposed to be doing. Whenever GSAP senses an HSL value, it switches to animate in HSL so that it can keep those values "pure" (if you animate HSL values in an RGB way, it looks very different and is typically undesirable). But of course those animate around the color wheel differently (it's NOT just taking the red, green, and blue and animating those linearly). Again, this is all by design. Here's a demo that shows the HSL values and then their converted RGB counterparts: https://codepen.io/GreenSock/pen/67ccc31471f41af5a36d3a7b9d209a75?editors=0010 (Crack open the console to see). It's using ModifiersPlugin to just intercept things just before they're applied. See what's happening? The HSL values are indeed animating exactly as they should, and then the browser converts them back to RGB which is fine. Again, this is merely a side effect of how HSL values animate compared to RGB. Does that clear things up? If you don't want to animate things in HSL, you could convert them into RGB before feeding them into the tween. This page might be useful: https://css-tricks.com/converting-color-spaces-in-javascript/
  19. I don't really have time to pull it all apart, but I don't see anything obviously "wrong". You might want to try removing the canvas stuff (just for testing), especially the globalCompositeOperation = 'lighter'. It also looke like you've got a bunch of calls to particleTwo() and some drawing stuff that might be slightly problematic (not sure). I'd be curious about removing your calls to drawTwo() just to see how that affects things.
  20. Hi Jack, Thanks for getting back to me on this. I have attached a file here for you to have a look at if you have time. It does use a combination of png's and svg's and some canvas particles. I removed the bubbles for them but they still came back with CPU issues so i don't think it is related to the bubbles. I sent another version removing the will-change property but still they said it's a high CPU load. I use SVG's normally and haven't had this issue before but it is all dependant on the Publisher and how they test things. Cheers, Brad 300x250_parallax.zip
  21. Very weird. For some reason the red rgb value isn't tweening at the same rate as the green and blue values when using an hsl color value. This is something that @GreenSock will have to look into.
  22. Hey @mikel, Hmm, I'm not sure how the issue in the post is related to my case. Anyway, I changed the tween time to 0
  23. Sorry to hear about the trouble, @Bradley Lancaster. I don't have any specific tools outside Chrome's dev tools and watching the frame rate and I think there are some CPU usage things there too, but it's tied to your particular system. In other words, it might be 8% on your powerful system, but on a cheap phone it's 90%. It's all relative. I'm curious - do your banners use SVG? That can be pretty CPU-intensive to render.
  24. Hi @Liad, Welcome to the GreenSock forum. Does this post help? Or set the tween to time 0 please. Kind regards Mikel
  25. So everything has to be inside in a html file? That's seems like a rather odd choice, but okay, I guess base64 might be your only option. That said, I don't see any flicker on the demo you linked to here. Where are exactly do you see flicker? And in what browser and operating system?
  26. Yesterday
  27. Hey guys, I have a simple tween that changes the fill color of an SVG with a value that coming from a CMS system; the problem is that sometimes the returning value is an HSL color and it's causing some weird jumps. Is there a quick fix for this issue? Thanks in advance, Liad
  28. Hey guys, So i have encountered some feedback from a publisher that the HTML5 banners i created were using to much CPU. I don't have a way to check this properly i looked in Chrome Dev tools and can only see GPU there. Activity monitor was only 8% but they were saying it comes in @ 60% which i find hard to believe. I can't upload them here yet as the campaign hasn't launched but i will soon. Do you guys have a set of tools/programs you use specifically for CPU performance. They are using https://advalidation.com we are getting pricing on this but i would prefer a free or cheap method. Cheers, Brad
  1. Load more activity
  • Newsletter

    Want to keep up to date with all our latest news and information?

    Sign Up