Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Yunus Emre

  • Posts

  • Joined

  • Last visited

About Yunus Emre

  • Birthday 11/07/1999

Profile Information

  • Gender
  • Location

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Yunus Emre's Achievements

  1. 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.
  2. 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.
  3. 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.
  4. 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?
  5. 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
  6. 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.
  7. 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?
  8. 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
  9. 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
  10. 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.
  11. 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
  12. 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
  13. 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?
  14. 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 🙏
  15. 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?