Mukhriddin

hi guys. I want to parallax multiple images on container mouse move listener in nuxt js. I set position manually by transform translate. Expected behavior: cake images should move a bit when mouse is moving Current behavior: cake images are gathering into one line and then move around here is stackblitz file demo: https://stackblitz.com/edit/github-9ukebr-cz4dq9?file=pages%2Findex.vue

thank for time

Hi Rodrigo! Isn't there any way to make it slide automatically without any handling, or clicking, etc. ?

Hi team! How can I make this slides automatically play in every 10 seconds or so... When it reaches the last slide, animation starts from start thanks)

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)

Thanks a lot, Jack! I'd appreciate your help!

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

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

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

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)

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

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

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

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.

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)