dude9 Posted March 18, 2020 Share Posted March 18, 2020 Hi, I'm new here.. I have a Tweenmax code, and i need to create 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 18, 2020 Share Posted March 18, 2020 Hey sadique. What's wrong with the demo above? Link to comment Share on other sites More sharing options...
dude9 Posted March 18, 2020 Author Share Posted March 18, 2020 On 3/18/2020 at 5:56 PM, ZachSaucier said: Hey sadique. What's wrong with the demo above? Thanks for the reply. Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 18, 2020 Share Posted March 18, 2020 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. Link to comment Share on other sites More sharing options...
dude9 Posted March 18, 2020 Author Share Posted March 18, 2020 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 18, 2020 Share Posted March 18, 2020 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). 1 Link to comment Share on other sites More sharing options...
dude9 Posted March 18, 2020 Author Share Posted March 18, 2020 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 More sharing options...
Shrug ¯\_(ツ)_/¯ Posted March 18, 2020 Share Posted March 18, 2020 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. 2 1 Link to comment Share on other sites More sharing options...
dude9 Posted March 19, 2020 Author Share Posted March 19, 2020 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 More sharing options...
ZachSaucier Posted March 19, 2020 Share Posted March 19, 2020 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. 2 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted March 19, 2020 Share Posted March 19, 2020 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. 4 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now