Jump to content
Search Community

Drawing one image in multiple canvas

Tissi_2 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi everybody!

I am completely new to GSAP. First of all I´d like to notice that I really have a hard time to get into this stuff. The documentation isn't that good for a beginner. I neither don't know what kind of plugins or other 3rd party java stuff is needed to use the gsap plugins, nor I really do not get it how to call up funtion to do something with gsap. So, how did I get here? I already programmed a little website for a geocache listing, but on mobile devices the site is kind of slow. Somebody told me to "do the trick" with gsap because it is much faster than jquery. My goal is to change the colors of pictures, borders and text when a checkbox is clicked. Here you can see what I mean:

 

My example website

 

I removed the images (actual code not in the example page) and now want to draw one corner image in 4 canvas. Here is what I got so far.

 

<script>
window.onload = function() {
    var canvas = document.getElementsByClassName("edge_can"); // I gave the canvas a class named "edge_can" / not on the example page!
    var ctx = canvas.getContext("2d");
    var img = new Image();
	img.src = "https://www.tissi-solutions.de/caches/matrix/edge.jpg";
    ctx.drawImage(img,0,0,100,100);
}; 
</script>

 

Do the canvas need all one "id" or can I use a class to draw 1 picture in multiple canvas? How do I do that?

Do I really need canvas for this or can I manipulate the colors by just calling a gsap funtion?

Which plugins are needed to change all mentioned colors?

Do I need PixiJS for the Pixi plugin?

Am I on a right approach or do you think that the speed won´t improve by changing to gsap?

Any suggestions are welcomed!

 

Thanks in advance!

Tissi

Link to comment
Share on other sites

Hi @Tissi_2 :)

 

Welcome to the forum.

 

I'm not 100% sure what the overall question is here, but it sounds like you're just trying to make your site faster on mobile? Do you mean it's loading slowly or animation performance is not good on mobile? I'm not seeing much animation beyond some opacity changes on your site. GSAP is certainly a great choice for animation, but your assets could be a bottleneck. You have to remember that GSAP is animating the values, but doesn't do any of the rendering. That's all done by the browser.

 

You could certainly use PIXI if you like. In answer to your question - yes, you will need Pixi.js to use the GSAP Pixi plugin. There are some nice examples on the plugins doc page here:

https://greensock.com/?product-plugin=js-pixiplugin

 

You can also search the forum for Pixi and you'll find several threads with good examples. My two cents worth though, Pixi might be overkill for what you need and you'd also be loading another library so that may not help your mobile performance either. From what I'm seeing, you're trying to shift some of the images from green --> red --> blue. I think I'd recommend a simple CSS hue-rotate() filter. That would probably work fine. More info:

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

 

You could also keep the animation as you have it now and use GSAP instead of CSS transitions for the opacity changes in the images too. It sure won't hurt to try it for comparison.

 

Regarding the documentation, if you have a specific idea about ways to improve them, you're welcome to submit it. To help you get going with GSAP, there is an excellent learning section here: https://greensock.com/learning

 

Hopefully that gets you started. Happy tweening.

:)

 

 

 

  • Like 4
Link to comment
Share on other sites

Hi Craig!

Thank you for your answer! I think gsap isn´t the right way to go for me. I tried a lot of things with jquery, css checkbox hack, css hue rotate filter, divs instead of tables, changing the queue, changing the structure of the code etc. Any of these changes did not speed up the ios browser speed, neither with firefox nor with safari. It seems that the code just needs a powerful CPU or GPU to handle all commands simultaneously, or the ios / mobile browsers are not optimized to do this at once. I spent a looooot of time to come to this conclusion.... I think I am stuck here with my little experience. Nevertheless I implemented a nice css filter that you have mentioned. Thank you anyway for giving me a hint to improve my knowledge.

Best regards

Tissi_2

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...