Jump to content
Search Community

Gallery background follow mouse

Samuele test
Moderator Tag

Recommended Posts

We just showcase sites that use GSAP, but they don't give us their source code, so we don't know how they did that. From what I can tell, they are using canvas, which isn't that straightforward. And they are probably doing something similar to this, but adding parallax on top of it.

 

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

 

  • Like 1
Link to comment
Share on other sites

Yeah, they are using Canvas for the image effects (which I'd imagine is being controlled by GSAP behind the scenes) the effect likely using something like quicksetter to track and animate mouse locations, and that position to determine how the canvas elements are reacting to that.

 

https://greensock.com/docs/v3/GSAP/gsap.quickSetter()

  • Like 2
Link to comment
Share on other sites

  • 1 year later...
  • 2 weeks later...

It looks like there might be an issue with the code in the video, as it doesn't seem to be working properly. I wonder if there might be something missing related to canvas. If you don't mind, could you please take a look at this related Codepen link: [EDIT: link removed at request of video author who requires paid access to code]

Thank you very much for your help.

 

Link to comment
Share on other sites

  • 2 weeks later...

@HARRNISH, thanks for sharing the video and showing people an interesting way to leverage GSAP, but in the future we'd appreciate it if you'd make it clear in your post that your content requires a paid subscription in order to get the source code. Otherwise it can come across as a bit spammy. 


Please address the concern brought up by @Yunus Emre regarding the code not working. If you don't support it, we're inclined to delete the post advertising the content/video. 

 

@Yunus Emre I noticed a few problems when I glanced at your code (but I have not watched the video and I cannot support the code from @HARRNISH)

  1. You had an extra ")" character in your transform
  2. You referenced a maxScale variable but didn't declare it anywhere. 
  3. The mousemove event handler was placed inside a loop which seems extremely wasteful because it'd create a new one for each element and they'd all be doing the same thing anyway. 
  4. It looks like you were trying to use WAAPI for the transform animation on the whole gallery (I'm not sure why you wouldn't just use GSAP for that). I disabled that because it moved everything in a very strange way - I'm not sure what the intent was there.

[EDIT: removed at request of video author]


Happy Tweening!

  • Thanks 1
Link to comment
Share on other sites

@GreenSock  I'd like to clarify that my intention was not to engage in spamming activity through the sharing of my video link. Rather, I sought to contribute to the community by sharing the solution that I had successfully implemented. My purpose was to help @Yunus Emre and others who may be seeking similar solution, and I believed that my video could be of value to them.

 

I would also like to emphasize that while there is a subscription requirement for direct access to the source code, I am not charging for it. The code is implemented from scratch within the video content, which is freely accessible to everyone. Given this, I did not feel it would be appropriate to share the code files directly through Yunus's pen, as this may not be fair to the paid members.

 

Nonetheless, I recognize the importance of my community and the value of sharing ideas and knowledge. I understand the importance of fostering a supportive and collaborative environment, and I believe that sharing knowledge and insights is essential to achieving this. At the same time, I want to ensure that my message is not misconstrued, and that my intentions are clear. Thanks!

  • Like 1
Link to comment
Share on other sites

Thanks for clarifying your intent, @HARRNISH👍

 

Did you have any advice for @Yunus Emre regarding the code not working? Were you saying that you don't want to offer help because doing so would expose the proper code to the wider audience (the code that others need to pay for)? If so, I don't mind deleting your video post and @Yunus Emre's post as long as you reach out privately to help that user. I just feel bad that it has taken so long to get a response here. It puts us in a bind if you're sharing a video here that requires people to pay to get the source code, and then they encounter problems and post here and don't get an answer from you; it reflects poorly on our community. We try to be very responsive around here, but we can't really be expected to support your source code that isn't available without payment - that's why it's important that either you support it or we don't advertise the video here. Which would you prefer?

Link to comment
Share on other sites

Hey @GreenSock!
Thanks for your response and feedback on the code I shared.
The points in your feedback were very helpful in understanding my problem better.
 

And @HARRNISH,
I understand your intention to provide a solution to people and I believe that your video can be a value to others seeking solution, also I respect your caution before helping, so as not to be unfair to subscribers.

The proper code provided by @GreenSock is sufficient and solved my problem and I appreciate it again.

  • Like 2
Link to comment
Share on other sites

@GreenSock I understand your point of view, and I am willing to consent to the deletion of the video as Yunus has already got a solution. Therefore, I agree with your suggestion to remove Yunus's post / pen and also the video link I shared for the benefit of both parties. @Yunus Emre Sorry for the delayed response brother. I hope the video provided some useful insights. Thanks

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