Jump to content
Search Community

Tween Max repeat animation

dude9 test
Moderator Tag

Recommended Posts

8 minutes ago, sadique said:

i need to move the container(div) opposite to mouse

Again, the demo above does this as far as I am understanding you.

 

8 minutes ago, sadique said:

also need to repeat (when the div reach out of the screen it should comes from the opposite side), is it possible?

Yes. There are different ways of doing this depending on the approach that you want to take. The simplest is simply duplicating the background content for as many times as you need to do it. Another is detecting whether or not elements are within the viewport and moving them if they are not (you can do this using straight calculations or using something like the intersection observer API). 

 

Whatever you decide on the best method, we unfortunately do not have the capacity to build it out for you. We're happy to help if you have specific questions or issues that you run into, especially ones that related to GSAP (that's what this forum is focused on).

  • Like 1
Link to comment
Share on other sites

4 minutes ago, ZachSaucier said:

Again, the demo above does this as far as I am understanding you.

 

Yes. There are different ways of doing this depending on the approach that you want to take. The simplest is simply duplicating the background content for as many times as you need to do it. Another is detecting whether or not elements are within the viewport and moving them if they are not (you can do this using straight calculations or using something like the intersection observer API). 

 

Whatever you decide on the best method, we unfortunately do not have the capacity to build it out for you. We're happy to help if you have specific questions or issues that you run into, especially ones that related to GSAP (that's what this forum is focused on).

Thanks for reply.

Link to comment
Share on other sites

Here is another similar question where @ZachSaucier gave additional nice advice you may also find useful.

https://greensock.com/forums/topic/23242-canvas-image-gallery-with-mousemove-zoom-and-parallax/?do=findComment&comment=109702

 

The same above topic was also brought up in another thread and @OSUblake provided some additional nice advice seen in the below link.

https://greensock.com/forums/topic/17959-move-content-on-canvas-background-following-mouse-over/page/2/?tab=comments#comment-109725

 

As Zach indicated its a pretty broad question, but hopefully reading those two additional posts wil give you further ideas how to approach your project.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

14 hours ago, Shrug ¯\_(ツ)_/¯ said:

Here is another similar question where @ZachSaucier gave additional nice advice you may also find useful.

https://greensock.com/forums/topic/23242-canvas-image-gallery-with-mousemove-zoom-and-parallax/?do=findComment&comment=109702

 

The same above topic was also brought up in another thread and @OSUblake provided some additional nice advice seen in the below link.

https://greensock.com/forums/topic/17959-move-content-on-canvas-background-following-mouse-over/page/2/?tab=comments#comment-109725

 

As Zach indicated its a pretty broad question, but hopefully reading those two additional posts wil give you further ideas how to approach your project.

Hi,

 

Firstly thanks for you valuable reply.

 

Can we repeat the image in the image also repeat the animation used in this code, 

See the Pen 98e718541df0e1f16f960233b05ecb7d by osublake (@osublake) on CodePen

 

So, it will feel like non-stop moving, when we repeat the animation and canvas image.

 

Thanks.

 

Link to comment
Share on other sites

7 hours ago, sadique said:

Can we repeat the image in the image also repeat the animation used in this code So, it will feel like non-stop moving, when we repeat the animation and canvas image.

Most likely the answer is yes but what you're asking for is very unclear. The demo that you link to moves around to different parts of the image and the speed of moving to that location is dependent on how far the last updated position is from the new position. If you have an infinite canvas you have to use a different approach for calculating the speed - maybe the distance of the mouse from the center of the viewport? Besides that you just have to repeat the image(s). You could do so using canvas, a webgl mesh, or DOM elements that have fancy wrapping methods. I'd suggest one of the first two approaches. 

  • Like 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...