andrewandopen

Hey @ZachSaucier, so after a week of figuring out how to setup and use my HTML canvas I've figured out how to draw all of my elements to it, but I can't figure out how to animate them using the method I used in this post . New pen here where I have set up my canvas and drawn my elements to it : https://codepen.io/andrewandopen/pen/jOrQWPx

Thanks @ZachSaucier, I'll do some research and see if I can pull it off. Cheers for your help

Out of curiosity, why don't the GSAP demos for this plugin(which are very similar to the animation I've shown) need to use canvas?

Hey @ZachSaucier, I managed to figure out the easing by using gravity, velocity etc as you mentioned. How would I replicate this exact animation by using canvas as opposed to using the DOM? For clarity I am a background image in each of those coloured shapes that are animated. Thanks for your help so far.

Hey @ZachSaucier, thanks for your help with this, here's a demo of where I'm at so far https://codepen.io/andrewandopen/pen/xxOzgOG

Thanks for your reply @ZachSaucier. Is there a way I can add custom easing to these shapes so that they aren't all falling at the same pace?

Hey all, Just wondering if it possible to achieve what I've mocked-up below using this plugin? Basically, I want all of the shapes to build up and the bottom of the page as opposed to falling off. Thanks in advance.

Thanks everyone!

Thanks for the update @mulegoat. Generally am I better off hosting all my js files myself rather than using a CDN?

Hey guys, getting the attached error on all of my sites that are using gsap. Any idea why this might be? Thanks

Thank you both @Shrug ¯\_(ツ)_/¯ @OSUblake! @Shrug ¯\_(ツ)_/¯ I am! I've done some of their courses in the past, however this project was not related to any of them. I use their editor sometimes as it gives you access to a live link (which is what I sent you). As I said, I've done some of their courses, but am not a teacher, nor do I work for them.

Thank you all so much! It looks like you've solved it! I'm relatively new to this coding stuff, so was always under the impression if my images are below 1MB everything should be OK. @Shrug ¯\_(ツ)_/¯I certainly wasn't aware that scaling images would put more pressure on the browser. Again, I was under the impression the only thing that caused problems was the actual file size as opposed to the dimensions of the image. @OSUblake Would you mind explaining how you calculated this so I don't make the same mistake in the future? @GreenSock @Shrug ¯\_(ツ)_/¯ @OSUblake Thank you so much! Only started using GSAP this week and am really overwhelmed by how responsive and helpful the community is!

Hey Jack, yes I tried different variations of "x" and "y" as opposed to top/left, it didn't seem to make any difference.

So for your attached code I'm using the GSAP drawsvgplugin to draw an SVG line, I'm not really sure why this would cause trouble? The glitching/staggering is only visible in one particular part of the page (where the clouds and plane animate) , everything else is working fine. This is why I'm having so much trouble getting to the bottom of it.

Thanks for your reply Zach. I’m always happy to make a minimal demo if I can isolate the problem first, but with this I honestly can’t tell what’s causing the problem in the first place. by “a lot going on” do you mean I have too many animations working on the page as a whole??

Hey Guys, Wondering if anyone can shed any light on this for some reason this particular animation keeps glitching/staggering when it enters a particular area (plane & clouds). All other parts seem to be working very smoothly, but this areas "skips" about half way through. wondering if you guys could shed any light on it? Thanks!

Thank you so much Zach! I started using GSAP last week for the first time! Have to say your support is amazing! I'm converted!!!!!!

Hey Guys, Having a bit of trouble with an animation here. I'm using .set() to constantly transform an element using random values. When I scroll I want to transform this element off the page. The scroll animation is being triggered and it's working, but once it's complete it reverts back to it's original position (I think it's because the random value is constantly being created in the background). How would I overcome this? Thank you

Hi, I just signed up to Club Greensock to access the 2d physics plugin but can't seem to find it in the minified folder in the downloads ... Am I missing something?

Hi, just signed up to a GS membership to use the drawSVG plugin, but having trouble getting it working. I'm loading tweeMax from a cdn first and then after it link to the drawSVG script file, but it's not working ...