Infinite Canvas Effect with GSAP

[Akhil7]

I am trying to develop an infinite canvas animation which show cases a number of clickable images on it. On moving the cursor the images will move in the opposite direction, I tried this with div now, is it possible to use Canvas for an infinite scroll effect.

Plugins used: TweenMax, TweenLinte, ScrollToPlugin, Draggable

See the Pen ZEGwYjp by jinsonkj (@jinsonkj) on CodePen

[ZachSaucier]

Hey Akhill7 and welcome to the GreenSock forums! 

 

I made an infinite gallery viewer that uses dragging as navigation. You could try modifying it to your needs. You can check out the code on CodePen here:

See the Pen PoqxzMV by ZachSaucier (@ZachSaucier) on CodePen

 

Besides that, let us know if you have any specific questions  

[Akhil7]

Thank you ZachSaucier

[Harshit_Shah]

Hi @ZachSaucier,

Thanks for this demo.

We have implemented the same infinite draggable image grid demo.

Now, addition to this we need to rotate/tilt the image cards based on the mouse move. Something like screen-shot attached as follows.


Consider that, the mouse pointer is in center, so all images tilt to center. If the mouse pointer is at any corner then all images should tilt to that direction.

Thanks
Harshit

 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

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

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Harshit_Shah]

@ZachSaucier,

Again thanks for this infinite gallery viewer demo that uses dragging as navigation. This is a time saving for us.

Along with dragging, how we can implement that to work with mouse wheel infinite vertically scrolling?

Thanks
Harshit 

[Rodrigo]

Hi @Harshit_Shah,

 

That is not a simple thing to achieve, we do have a demo that shows how it can be approached:

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

 

Hopefully this helps.

Happy Tweening!

[Harshit_Shah]

Hi @Rodrigo,

Thanks for sharing this demo. We have already checked this, but this seems not helpful. As the structure and logic, both are different in the demos given by @ZachSaucier of infinite dragging and above scroller.

So we need help with mouse wheel scrolling functionality to implement with infinite gallery viewer demo.

Also, it will be great help if you explain how "checkPositions" function is implemented to identify updated row index and image index onDrag event.


Thanks
Harshit Shah

[Rodrigo]

Yeah for that you'd have to use the Observer Plugin in order to check for the mouse wheel event and move the elements on the X axis (or both X and Y axis if you want), then update the Draggable instance accordingly if needed:

https://gsap.com/docs/v3/Plugins/Observer/

 

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

 

Happy Tweening!