Jump to content

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

Yunus Emre

  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

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

Yunus Emre's Achievements

  1. 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
  2. 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.
  3. 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
  4. 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
  5. 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?
  6. 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 🙏
  7. 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?
  8. Thanks for the answer! Setting images to have an explicit width/height did the job. But sizes can be changeable in the future. Sorry for my inexperience but I couldn't make it. Should I ask this part in another next.js related platform?
  9. I created a simple sandbox here: https://codesandbox.io/s/headless-dream-riz9j?file=/styles/Index.css I fetched and console log the speed data with no problem. gsap seem's don't use it appropriately. Above I said it occurs sometimes and randomly but I now found "a case" that causes this problem. I go linked about page > refresh about page > go back with using link > animation breaks. Besides this, in iOS; even just refreshing the main page or navigating between pages sometimes can cause this issue. Maybe it's about animations don't load in enough time and scrolling without waiting makes animations behave different.
  10. Is it because child elements (images) that has the data attributes is coming from server side and gsap animation try to fetch that speed data after mounting in client side? Simply I used the Parallax component like this: <Parallax> <div data-speed="0.2"><img src="/images/1-1.jpg"/></div> <div data-speed="0.2"><img src="/images/1-2.jpg"/></div> <div data-speed="0.2"><img src="/images/1-3.jpg"/></div> <div data-speed="0.7"><img src="/images/2-1.jpg"/></div> <div data-speed="0.6"><img src="/images/2-2.jpg"/></div> <div data-speed="0.5"><img src="/images/2-3.jpg"/></div> </Parallax>
  11. Hi everyone! I'm scrolling images in different speeds (speed data comes from HTML's data-* attribute as you can see) and creat a parallax effect. The animation has no problem with working but sometimes it's not responding (all the images scrolling in the same speed) when coming back from other (about, works, contact etc.) pages. And sometimes it's working nonetheless. None of other animations (with or without scrollTrigger) have this problem. Is this more related with GSAP or Next.js? Any help on this please? export function Parallax({ children }) { const el = useRef() useEffect(() => { const animations = [] const elements = gsap.utils.toArray(el.current.children) elements.forEach((element) => { const movement = -(element.offsetHeight * element.dataset.speed) const animation = gsap.timeline({ scrollTrigger: { trigger: element, start: "top bottom", end: "bottom top", scrub: 0.2 } }) .to(element, { y: movement, ease: "none" }, 0) animations.push(animation) }) return () => { animations.forEach((animation) => animation.scrollTrigger.kill()) } }, []) return <div ref={el}>{children}</div> }
  12. Thanks OSUblake! I felt stupid not seeing something obvious. Is that more about a css or gsap problem? I can give a codepen sample if you like. (Solved with gsap anyway)
  13. I have two problems. 1) I'm trying to fade in images by staggering them. Fade in part works but stagger part is not. Where is the problem, am I doing a logic mistake? Is using a hook approach like in the https://codesandbox.io/s/xph6v?file=/src/useTextReveal.js would fix this? export function FadeInStagger({ children }) { const el = useRef() useEffect(() => { const animations = [] const elements = gsap.utils.toArray(el.current.children) elements.forEach((element) => { const animation = gsap.from(element, { duration: 1, opacity: 0, ease: "none", stagger: 0.3, scrollTrigger: { trigger: element, markers: true, start: "center 60%", end: "center 60%", toggleActions: "play play reverse reverse", } }) animations.push(animation) }) return () => { animations.forEach((animation) => animation.scrollTrigger.kill()) } }, []) return <div className="brands-images" ref={el}>{children}</div> } <FadeInStagger> <img src="/images/brands/samsung.png" alt="Samsung" /> <img src="/images/brands/trt.png" alt="TRT" /> <img src="/images/brands/altinpusula.png" alt="Altın Pusula" /> <img src="/images/brands/aydindogan.png" alt="Aydın Doğan Vakfı" /> <img src="/images/brands/yildizholding.png" alt="Yıldız Holding" /> </FadeInStagger> 2) And it seem's like animated elements breaks some css attributes. For example "img:hover { opacity: 1 }" is not working but "img:hover { background-color: red } works. Is this a bug? .brands-images { width: 100%; display: flex; justify-content: space-around; align-items: center; img { transition: 0.3s; opacity: .5; max-width: 100%; height: auto; } img:hover { opacity: 1; background-color: green; } }
  14. Thanks for all the solutions OSUblake! All of them are great for me. But I must say that I now understand why GSAP doesn't go so well with React. Nonetheless it's framerwork/library agnostic and has great support though. First approach ok for me. Is other solutions has any advantage over this in terms of best practices? Custom Hook and other approach seems perfect for modularity but has some extra steps. I learned a lot about parent/child ref management from them anyway, so thanks again.
  15. Hello! Me again. I have this codepen here: https://codepen.io/ynsmrsk/pen/PomEvLR I want to implement it to my React / Next.js project. I wanted to have gsap animation codes be seperate from my page/component codes. So the codebase could be clean and I would have reusable animation component. But I have problems with Ref's I think. Here is the error I get when I try to animate multiple imported children element with a loop, in parent gsap animation component: https://codesandbox.io/s/gsap-react-nextjs-tuli0?file=/src/App.js I may be using the Refs wrong but not sure. What do I have to change to get it to work?