Yunus Emre

Thanks a lot for your help and valuable advice @Rodrigo 🙏

Thanks, updated permissions.

codesandbox link: https://codesandbox.io/p/devbox/swing-6ljdq5?file=%2Fapp%2Fswing.tsx%3A178%2C24 full page view: https://6ljdq5-3001.csb.app/ (React.js, Next.js) Hello!. I have this code dynamically generates random sized/positioned images on the screen, ensuring they don't overlap. The swing animation is achieved using GSAP's MotionPath plugin. Swing motion is based on image width (vw). When the window is resized, the component re-renders, so that the positions and sizes of the images are recalculated and stay responsive. * But then it starts to jump in the swing motion in the images. What could be the problem? Secondly, do you think I am using gsap correctly for swing and mouse-move animations. What to improve, any tips?

This is a much simpler solution than mine, thanks for it. different from move-zone/dead-zone approach. but only the small top and bottom portion of the area should trigger the movement. You don't have to look all the setup actually. The problem is caused by the "updateParallax" function that uses globally defined viewport, world and pointer objects. I just don't know what else could be done instead to workaround this.

Thanks for the idea @Rodrigo I created updateParallax function and ran it inside the "onScroll" and "update" function. But sliding images with this parallax effect causing the bottom of the scroll area being empty. You can see if you scroll all the way to the bottom. How can I fix it?

It was one of my goals to apply this parallax effect on the images, thank you for this @Rodrigo I am trying to mimic the behavior on wanda website. It's complex but GSAP is enough for parallax effect and the mouse controller functionality. The only thing I need to implement is a custom smooth mouse-wheel/trackpad scroll functionality with parallax effect. Does GSAP have a helper for this behavior?

Currently, the scrollable area is controlled solely by mouse position. I also want to enable smooth scrolling through the mouse wheel or touchpad. Is there a GSAP util I can use it for this?

Trying to implement scroll behavior to '.world' element. Any help appreciated

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.

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.

Thanks for the response @GreenSock ! Now I see how much I can optimize it. Obviously, I still have a lot progress to make but will definitely stay tuned for the upcoming features.

In a React project I have an animation that I apply a swing animation to each element using motionPath plugin and a parallax animation to each of them on mouse move. After parallax animation is over, there is a slide problem on each element. I assume the swing animation causing this. What's wrong with my approach? How can I apply these two animation working well together? There is a lot going on but I can create codesandbox if needed. import { useEffect, useRef } from "react"; import gsap from "gsap"; import { MotionPathPlugin } from "gsap/dist/MotionPathPlugin"; gsap.registerPlugin(MotionPathPlugin); export function Swing({ children }) { // select wrapper of elements that will be animated const wrapperRef = useRef(); // function to generate integers to use in the animations function getRandom(min, max) { return Math.floor(Math.random() * (max - min) + min); } useEffect(() => { const wrapper = wrapperRef.current; // grab elements const elements = gsap.utils.toArray(wrapper.children); // 1) swing animation for each element elements.forEach((element) => { const size = element.dataset.size; const randSize = 100 - size; gsap.to(element, { motionPath: { path: [ { x: -randSize / 1.5, y: 0 }, { x: -randSize / 1.5, y: -randSize / 2 }, { x: 0, y: -randSize / 2 }, { x: 0, y: 0 }, ], curviness: 1, }, duration: getRandom(size / 3, size / 2), ease: "none", repeat: -1, delay: getRandom(0, 4), }); }); // 2) mouse move parallax animation const onMouseMove = (event) => { const pageX = event.pageX - wrapper.getBoundingClientRect().width * 0.5; const pageY = event.pageY - wrapper.getBoundingClientRect().height * 0.5; elements.forEach((element) => { // element.dataset.size is an int between 30 - 60 const speedX = 100 - element.dataset.size; const speedY = 100 - element.dataset.size; gsap.to(element, { x: -((element.offsetLeft + pageX * speedX) * 0.005) / 2, y: -(element.offsetTop + pageY * speedY) * 0.005, ease: "Expo.easeOut", duration: 2, }); }); }; document.addEventListener("pointermove", onMouseMove); }, []); return <div ref={wrapperRef}>{children}</div>; } Here is a short video to show the problem: By the way the parallax effect is not so smooth. Are there any tips to improve the animation performance? I already use "will-change: transform;" on elements and wrapper itself.

Thanks a lot Mikel! You are very helpful. This is complex yet smooth and awesome. @mikel's and this codepen more than enough but can't wait for the next update :D.

There is one thing I need to solve: I'll need to interact with the elements in the page but top-bottom-chill zones makes elements uninteractive under them because of the z-index values. How can I handle this?

Thanks for the implementation @mikel, I needed this functionality precisely. You people are awesome. Hopefully I'll share the final state in the forum with the help of y'all haha