Samuele Posted October 15, 2021 Share Posted October 15, 2021 Hi there! I saw this website in the showcase section:https://www.davidwilliambaum.com/ I was just wondering what going on there for what concern the images follow mouse and gallery/zoom effect? The result is really smooth! Is there any possibility to reproduce it with GSAP? Link to comment Share on other sites More sharing options...
OSUblake Posted October 15, 2021 Share Posted October 15, 2021 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 1 Link to comment Share on other sites More sharing options...
elegantseagulls Posted October 15, 2021 Share Posted October 15, 2021 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() 2 Link to comment Share on other sites More sharing options...
HARRNISH Posted February 12, 2023 Share Posted February 12, 2023 Sup @Samuele I recently published a tutorial on my channel [EDIT: link removed at request of author] 2 Link to comment Share on other sites More sharing options...
Yunus Emre Posted February 23, 2023 Share Posted February 23, 2023 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 More sharing options...
GreenSock Posted March 5, 2023 Share Posted March 5, 2023 @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) You had an extra ")" character in your transform You referenced a maxScale variable but didn't declare it anywhere. 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. 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! 1 Link to comment Share on other sites More sharing options...
HARRNISH Posted March 5, 2023 Share Posted March 5, 2023 @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! 1 Link to comment Share on other sites More sharing options...
GreenSock Posted March 5, 2023 Share Posted March 5, 2023 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 More sharing options...
Yunus Emre Posted March 5, 2023 Share Posted March 5, 2023 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. 2 Link to comment Share on other sites More sharing options...
HARRNISH Posted March 5, 2023 Share Posted March 5, 2023 @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 2 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