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

Thanks for the reply @OSUblake Honestly I need to understand some of the concepts and basics to implement it to my codebase. Don't know much about the calculations but get the idea though.

Hello! I have a function to scroll the screen based on mouse movements. But it is already moving the entire page until mouse reach the screen edges. I want to not move entire page to end to end but little bit. So I changed the mapRange values and have this: https://codepen.io/ynsmrsk/pen/jOaoJRr?editors=1010 Beside this, I need to automatically scroll page both horizontally and vertically when the mouse get close enough to viewport edges. Here is an example site. How can I do this?

Maybe it's not something to do with directly GSAP but how we can achieve this mouse move animation goes infinite (instead of fixed width and height) so when mouse stay on the screen edge or corner, items moving infinitely (loop) and not stop when reached the limit of the area? Any tips on this? @OSUblake @ZachSaucier

OK. Maybe I have a problem with my browser settings. It's occurs on private mode also. I'm seeing this but if anyone is not seeing this, it's totally fine to me too

Which platform you checked on? (MacOS or PC?) I just checked for mobile and yes there is no issue. Only occurs in my PC I think.

Hey! There is no problem in codepen or codesandbox. But I have the problem in my locale project and live website with the same codes. When going all the way down in page and pinned elements end point crossing viewports end point, then scroll up again and when plus svg icon gettin smaller, you can see a glitch with left and right side of the svg. I think svg gets more shrink than it needs to be and gets back to correct width while cointinuing to shrink. You can see the problem at: osmanthewho.vercel.app By the way normally there was much more element on the page. And before removing them I had one more problem. After setting ScrollTrigger pin: true The animation works but in another viewport size (on mobile for example), pinning breaks the whole page scrolling behavior and I can't scroll through page even when pinned element not on the viewport. But I can hit space/shift+space to scroll up and down and animation works also. Why is this happening? Thanks in advance! https://codesandbox.io/s/small-fog-gonju?file=/pages/index.js

Thanks for all good points. I learn a lot from them. I think it's time to use it . Otherwise predetermined image sizes way to go. Just realized how much I say "Thanks" word. It's annoying but you people really helpful that I can't stop myself from thanking

Thanks much for the explanation @nicofonseca! Now it made sense to me. But I couldn't figured out how to refreshing ScrollTrigger on element load. in this demo https://codesandbox.io/s/headless-dream-riz9j?file=/pages/index.js I used it like <img onLoad={() => ScrollTrigger.refresh()} src="/images/1-1.jpg" /> And in the animation component I tried this; element.onload = () => { ScrollTrigger.refresh(); }; But it isn't working. I tried to creating animations in a setInterval. It's seems like solving the problem in a very bad way and makes everything chaotic. Should I do try to make images redownloaded on every page render?

It didn't work unfortunately. Maybe I'm doing something wrong here: https://codesandbox.io/s/headless-dream-riz9j?file=/pages/index.js I can use exact width/height solution though and try to make it behave what I want. Thanks for all the help ?

Thanks but I couldn't implement it. It says ScrollTrigger is not defined because I use abstracted animation component that standing another file: https://codesandbox.io/s/headless-dream-riz9j?file=/Parallax.jsx Seems like I have to put them in the same file right? Or is there another way?