Jump to content
Search Community

Help with animation error and js connection

EVA CORPORATION test
Moderator Tag

Recommended Posts

Good afternoon!
I tried to put my problem in CodePen, but it didn't work out there at all.
I made a separate page with just a layout. But for some reason, the same error remained as in CodePen, images from js are not displayed, although the path to the image is made correctly.
Maybe I'm not connecting the plugins that are on Club GreenSock correctly, if everything is paid for.
So I have two questions
1) What am I connecting incorrectly, maybe I'm missing some stage of installation?
2) Here's what happens on the desktop, where the error is, respectively, I just made a separate page so that there wouldn't be a bunch of extra code, etc.:
- the stop trigger does not work,
- the pot is spinning, and all are still showing behind.

 

On the second question, I looked at a lot of examples, I didn't seem to find what the difference was, but still, I probably did something wrong, since the pictures are double...

 

Link project:

http://eglitrx9.beget.tech/

 

Video pot:

 
Link to comment
Share on other sites

 

Welcome to the GreenSock forum, @EVA CORPORATION

 

With regard to the images overlapping each other;  that probably happens because you are not clearing your canvas before re-drawing the next image, so it is more of a canvas related question than a GSAP one - you might want to have a look at the thread linked below.

 

 

With regard to anything else, it is pretty hard to tell without a minimal demo that we can tinker with, and clearly see the issue in an isolated environment. On your website there might be several other things interfering and/or causing your issues, so it is not feasible for us to debug live websites - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc.

 

If you can provide a minimal demo, I'm sure your cahnces of getting help will be a lot better.

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

  • Like 2
Link to comment
Share on other sites

19 minutes ago, akapowl said:

With regard to the images overlapping each other;  that probably happens because you are not clearing your canvas before re-drawing the next image, so it is more of a canvas related question than a GSAP one - you might want to have a look at the thread linked below.

 
I'll try to figure it out >_<
 
 
 
Kind of did... but not a single picture opens...
 

See the Pen QWVMopv by eglit_m (@eglit_m) on CodePen

Link to comment
Share on other sites

1 hour ago, EVA CORPORATION said:

Kind of did... but not a single picture opens...

 

That is because you are trying to load images via http request on a website that is https secured (codepen) - that apparently won't work, and you get quite a load of console warnings in your dev-tools about that.

 

1 hour ago, EVA CORPORATION said:

I'll try to figure it out >_<

 

I exchanged your images with lorem-picsum images, and push them off to the side here, just so you can see how the clearing of the canvas has an effect on the whole thing. If it wasn't cleared, the images that were drawn before would still be visible.

 

onUpdate: (self) => {
  ctx.clearRect(0, 0, example.width, example.height);	// <-- clear canvas before re-drawing new image
  ctx.drawImage(loadedImages[Math.floor(self.progress * 60)].img, 5*Math.floor(self.progress * 60), 0);
  //							          |pushing next image to the right|			
}

 

On a different note:

You arenot loading jQuery in your codepen, but it has references to jQuery, so I loaded that in for you, too. There is also a closing </div> tag missing for the .container in your demo; i added that in my pen.

 

Furthermore, I added one more image to the array, so now it's 61 in total instead of 60, because when reaching the end, with how you have things set up in your drawImage() call, I was getting an error about an img not being found. That's because the array was an image short in that case as the last image you wanted to draw would have to have an index of 60 (progress being 1 multiplied by 60) but you only have 60 images, so the last index available would be 59.

 

Does this work more like you imagined now?

 

See the Pen NWLOqYW by akapowl (@akapowl) on CodePen

 

 

Edit:

Of course you don't have to add an extra image, but could also just limit your calculated index to 59 instead of 60.

 

See the Pen zYJmvWm by akapowl (@akapowl) on CodePen

  • Like 3
Link to comment
Share on other sites

1 hour ago, akapowl said:

I exchanged your images with lorem-picsum images, and push them off to the side here, just so you can see how the clearing of the canvas has an effect on the whole thing. If it wasn't cleared, the images that were drawn before would still be visible.

Oh.. I just adore you!

 

It turns out that's where the problem was, I've just been trying for 4 days to figure out what's wrong, like I didn't forget anything according to the rules, but it turns out I forgot, so I added something extra >_<

 

Then there was a question why the trigger stops the animation of the picture, but when scrolling the page the last frame goes on... and does not stop at the trigger point.?

 

P.S.: I checked just in case that in the full code all the tags are closed, it can be seen when I pulled out a piece, I missed with the tag:(

  • Haha 2
Link to comment
Share on other sites

1 hour ago, EVA CORPORATION said:

Then there was a question why the trigger stops the animation of the picture, but when scrolling the page the last frame goes on... and does not stop at the trigger point.?

 

Sorry, but I don't quite understand what it is you are asking here.

 

Could you maybe try and re-phrase or on the basis of a demo somehow make it clearer,  what you mean?

 

As you can see in this version with markers on and some spacing around that section, the exchange of the images starts and ends exactly where you have set things up; so I'm a bit lost here.

 

See the Pen VwGEvaN by akapowl (@akapowl) on CodePen

 

 

 

Are you saying, you don't want the canvas to scroll with the flow of the page, e.g. when the visible window is above or below that section?

 

...right now you have it positioned fixed, so that is what's to be expected. If you want it contained within your section, but still overlaying other elements, you should probably position it absolute in that section then. And if you want it to stay in place within a certain threshhold of scrolling, you could pin it via ScrollTrigger ( you can read all about pin in the ScrollTrigger docs ).

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

But again; I'm quite lost about what it is you're asking.

 

Edit: Here is an example with what I mentioned above.

 

See the Pen GRXYqgV by akapowl (@akapowl) on CodePen

 

 

  • Like 1
Link to comment
Share on other sites

37 minutes ago, akapowl said:

And if you want it to stay in place within a certain threshhold of scrolling, you could pin it via ScrollTrigger ( you can read all about pin in the ScrollTrigger docs ).

Yes, I meant within a certain threshold of scrolling, you said correctly.

I inserted all the parameters, but your picture does not disappear on the last frame, and for some reason it disappears for me. :(

 

By the way, unfortunately, the site uses jquery version 2.1.3 and you can't install another one >_<

Link to comment
Share on other sites

4 minutes ago, EVA CORPORATION said:

By the way, unfortunately, the site uses jquery version 2.1.3 and you can't install another one >_<

 

I just wanted to jump in here, you don't have to use jQuery you can always just use vanilla JS if your jQuery version has a bug in a certain function. If you still have a bug, please share a minimal demo with that particular bug you're facing. 

Link to comment
Share on other sites

 

Mitchel is right; but with regard to your ScrollTrigger, the jQuery version shouldn't make much of a difference anyway.

I just tested and reverted back to your jQuery version used, and for me the demo behaves exactly the same and works as expected.

 

Have you made sure, the index you are calculating is not larger than the largest index of your array (double-check the console in dev-tools); or maybe for some reason the last image is simply just blank/transparent? ...if you can not reproduce your issue in a minimal demo, I'm afraid I won't be able to be much more of a help than that.

 

  • Like 2
Link to comment
Share on other sites

14 minutes ago, EVA CORPORATION said:

Mm... I thought maybe I missed something and inserted your js from CodePen to myself, with your pictures. Why are there no pictures, it seems to be the same..

 

Because you are creating Errors, as you are not loading jQuery in your codepen, while there is code that relies on jQuery in that demo - again: check your console in dev-tools.

 

Unbenannt.thumb.png.3d0ab9c8e1d930fdac72b75a419e0aa5.png

 

 

Also, JS is only one third of what makes the page; and it doesn't look like you changed what I mentioned earlier about putting your canvas inside of your section and positioning it absolute instead of fixed, in your codepen either - don't forget about that.

 

1 hour ago, akapowl said:

..right now you have it positioned fixed, so that is what's to be expected. If you want it contained within your section, but still overlaying other elements, you should probably position it absolute in that section then. And if you want it to stay in place within a certain threshhold of scrolling, you could pin it via ScrollTrigger ( you can read all about pin in the ScrollTrigger docs ).

 

And then again, in your last codepen there are now only 58 images - that's why at the end there won't be an image visible, because your calculation doesn't match up with the length of the array.

 

Best just swap out the number in your calculations with (images.length - 1). That way you won't have to adjust it and probably won't have to worry about errors with that regard, or an image not showing.

 

// this...
loadedImages[Math.floor(self.progress * (images.length - 1))].img,
  
// ...instead of this
loadedImages[Math.floor(self.progress * 59)].img,

 

That works better now, right (even with your older jQuery version)?

 

See the Pen mdGzOJL by akapowl (@akapowl) on CodePen

 

  • Like 3
Link to comment
Share on other sites

41 minutes ago, akapowl said:

And then again, in your last codepen there are now only 58 images - that's why at the end there won't be an image visible, because your calculation doesn't match up with the length of the array.

Everything is fine with the pictures ^_^ I immediately believed it.

 

But I forgot to change from fixed to absolute..

It seems that the trigger has earned ^____ ^

Thank you very much 🥰

  • Like 3
Link to comment
Share on other sites

17 hours ago, akapowl said:

Also, JS is only one third of what makes the page; and it doesn't look like you changed what I mentioned earlier about putting your canvas inside of your section and positioning it absolute instead of fixed, in your codepen either - don't forget about that.

 
 
The question is, why does the picture become centered at the end of the animation?
Screenshot_402.thumb.png.670d9df31205e4a548fce61bf47ef0c4.png
 
Screenshot_403.thumb.png.483e7f7926fcd4a1397b672f3c24c5ee.png
The jar in my pictures goes from right to left, but for some reason it becomes centered, although my last frame clearly positions the picture on the right. Is there a setting responsible for the position?
Screenshot_401.thumb.png.793bd3a2a7d45bf3d1aa59b412baa10c.png0060.png.6a7c9e808eb88607ce47eab9bf2f9c73.png
Link to comment
Share on other sites

 

It only appears to be centered in the end - it was not my intention to make it become centered - and I already gave you an explanation for the movement on the horizontal axis earlier.

 

22 hours ago, akapowl said:

I exchanged your images with lorem-picsum images, and push them off to the side here, just so you can see how the clearing of the canvas has an effect on the whole thing. If it wasn't cleared, the images that were drawn before would still be visible.

 

onUpdate: (self) => {
  ctx.clearRect(0, 0, example.width, example.height);	// <-- clear canvas before re-drawing new image
  ctx.drawImage(loadedImages[Math.floor(self.progress * 60)].img, 5*Math.floor(self.progress * 60), 0);
  //							          |pushing next image to the right|			
}

 

If you don't want your picture/s to move on the horizontal axis, switch the part that I added just for showcasing back to 0.

 

That is btw generally more of a canvas related part and nothing GSAP really is responsible for, so it might be worth checking up on that.

 

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#drawing_images

 

  • Like 1
Link to comment
Share on other sites

1 hour ago, akapowl said:

It only appears to be centered in the end - it was not my intention to make it become centered - and I already gave you an explanation for the movement on the horizontal axis earlier.

 
Oh, right! I guess I was obviously stuck on one question then, I completely forgot about the replacement >__<
 
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...