Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sadique

Tween Max repeat animation

Recommended Posts

Hi,

I'm new here..

I have a Tweenmax code. and i need to implement the animation same as used in https://kexhotels.com/.

 

 

NOTE: animation should work opposite direction to the mouse move, also all the contents should repeat  after it go up to the screen.

 

Please help.

See the Pen oNXyWmd by sadiquekp (@sadiquekp) on CodePen

Share this post


Link to post
Share on other sites

Hey sadique. What's wrong with the demo above?

Share this post


Link to post
Share on other sites
13 minutes ago, ZachSaucier said:

Hey sadique. What's wrong with the demo above?

Thanks for the reply.

 

Actually i have to create the animation same as used in the website https://kexhotels.com/.

 

Can u please help me.

Share this post


Link to post
Share on other sites

I would love to help! However, I'm confused how you're expecting us to help. You have the basic approach outlined in the demo that you posted. Now you just need to apply it to the styling that you need.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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.

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

No need for the PM, I’ll see the posts. :—)

 

In general you are asking logic questions outside of anything specific to GSAP. So you will need to determine how best to setup and approach your project based upon your own skill level and understanding so you can accomplish your overall desired outcome.

  • Like 4
  • Haha 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×