Jump to content
GreenSock

Mukhriddin

Members
  • Posts

    32
  • Joined

  • Last visited

Recent Profile Visitors

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

Mukhriddin's Achievements

  1. Yes, it is! Soo... everything is working perfectly on this Pen. However, when I try to test this code on my real project. some errors come out. I am using React as a JS framework. And header links and blocks are located in different components. When I click a link it either doesn't work at all(doesn't move block as before) or executes error below : Uncaught TypeError: Cannot read properties of undefined (reading 'end') at HTMLAnchorElement.<anonymous> (App.jsx:135:1)
  2. Thanks a lot, Jack! I'd appreciate your help!
  3. Yes, it started to work. Thanks, Jack! And one more thing, if I have two the same block(for ex. I have two third blocks), clicking order is broken. I mean I cannot go to the fourth though. You can see what I mean on this code: https://codepen.io/mshakhriyorov/pen/poLjLVy
  4. Yes, that's the thing I wanted. And I tested this on my real project. But I got somehow errors like this. gsap-core.js:3622 Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': The provided value is not of type 'ScrollToOptions'. at PropTween._setterFunc [as set] (gsap-core.js:3622:1) at PropTween._renderComplexString [as r] (gsap-core.js:3659:1) at Tween.render (gsap-core.js:3388:1) at _lazyRender (gsap-core.js:173:1) at _lazySafeRender (gsap-core.js:179:1) at Array.updateRoot (gsap-core.js:2634:1) at _tick (gsap-core.js:1282:1) What'd be the reason for that? P.s: I use React as a JS framework
  5. The same output with willChange: 'transform'. Yes, in Dev Tools (Chrome) everything is ok. But when I check it via my mobile (Safari), cross lines are somehow not straight. As you see images above
  6. Yes, I meant something like this. But if you see, it starts as cross icon, not hamburger by default. And also, in Safari, cross lines don't seem to settle perfectly(1st image is on Chrome, the second is on Safari). P.s: everything is ok with Chrome as you see)
  7. Here I have faced an interesting issue. When I click header links, there exist two outputs: positive and not working. And I guess I know what's the problem, but cannot fix it. I'd really appreciate your help. So here is my conclusion: 1. Working: when you're on first block, you can go to the second, third and fourth blocks by clicking header menu links. And if you're on second block, you can go the third and fourth only(not to the first) 2. Not working: As I partially mentioned, when you are blocks below, clicking header menu links doesn't lead to blocks above. For example, from 4th block you cannot go the first block. And it is, I guess, because of sticky blocks. They are going up to one page height, i.e, they are not moving up from top screen as they are sticky. And this causes them to stay their place even after header links are clicked. On the other hand, they working when blocks are below as they are really down from bottom screen view. https://codepen.io/mshakhriyorov/pen/vYRNOVp
  8. Here is the link to Codesandbox https://codesandbox.io/s/vibrant-banzai-t714sr?file=/src/styles.scss I aimed to implement a hamburger that is turned to cross icon once clicked. But somehow there is an error which I can't find. I'd appreciate your help
  9. or sorry) it was codesandbox itself. https://codesandbox.io/s/press-hold-fgvpsw?file=/src/utils/cutomMouse.js. I mistakenly put it on url input
  10. Hi! Press/Hold button works as expected on Chrome, but on Safari there exists a square for some reason. How could it be fixed. I'll appreciate your reply.
  11. Hi, there! I wanted to add active class so that when scrolling blocks related item gets active with bigger font-size and white color. I added manually to the first item so that you can easily understand what I mean. So once the first block (Scroll down text-page) leaves the viewport, first item gets inactive and the second one starts to be active, etc. I'd really appreciate your help)
  12. The project is quite big, I can't create minimized demo. In fact, I came to know, scroll animations are working slow and jerky on android, and they are sometimes working, sometimes not on IOS)
  13. Hi, I have done some scrollTrigger stuff with my project. And it's pretty cool working desktop resolution (like 1440x908px) and mobile resolution (375x812px) while scrolling on my computer. But when I visit this project via my own mobile phone (iPhone 12pro) with localhost, transitions, transforms, etc. don't work perfectly, sometimes works sometimes not. What'd be the reason of that? Thanks!
  14. Hi Cassie! Could you please, give me a shot in code here. I really don't have an idea how to implement it. https://codepen.io/mshakhriyorov/pen/PoQdGjy I hope you understand me)
  15. Hi there! How can I make a 'fake' preloader to load content? I have no images or links to be loaded. Just need a preloader with percentage loading. Once the loader reaches 100%, Content to be loaded text appears
×