Mukhriddin

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)

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)

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!

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)

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

could you please show a demo in the codesandbox I shared? P.s: I don't think the thing I need is observer. Because, as I understand it triggers one action, and it is not related to scroll width in horizontal scrolling

Hi guys! How can I scroll horizontally in a limited area. I mean it should be scrollable only when the cursor above panels container. Now it behaves like it can be scrolled from every part of viewport and this container first goes up and then scroll gets to work. https://codesandbox.io/s/youthful-bhabha-6vsgwh?file=/src/App.js

Thanks, Cassie!

Hi guys. I need your help! Thing I was expecting here is that when the second page is coming up, the first one's opacity needs to dicrease; and the third comes up, the second one's opacity reduces; and this progress goes on untill the last card (Done!). And also if you take a look, this last card finishes items' sticky position. I mean when scroll reaches to the most end, the last cars brings the whole wrapper above. I wanted it stays as before ones. If you don't get me properly, let me know I will explain in details.

Thanks for the effort. I'm using React. I found the bug: Animation codes need to be included inside component. Something like this import React from 'react'; import {gsap} from 'gsap'; export const Component = () => { // animation codes return(...) } The thing I did wrong was that I wrote animation codes outside component.

So how it can be avoided? Even from the foremost start, GSAP doesn't add styles. After editing some code, it gets to start and by refreshing I lose thes styles again. P.s: I can't insert video of my screen as of its size

What I expected is your second example. Thanks a lot! P.s: It worked only after I removed target next to index https://codepen.io/Mukher/pen/YzeaOWM And one more thing, refreshing the page causes elements to lose these styles(transform: tranlate) on my real project(not on pen!). What can be the reason for that?! Before refreshing page After refreshing page As a reason, text lines lose transforming feature while scrolling, they are located at center

Thanks. But, the thing I want was a little bit different. I meant these text lines moves from left to right, and from right to left horizontally(translateX) , i.e, no move towards up. They are transforming ontranslate3d base currently.

Thanks @akapowl. And how could I make them keep moving untill they leave the viewport?

The thing I wanted to implement here is to animate texts from left to right and vice versa. I mean the first and third texts from left to right, the second and fourth ones from left to right. They are gonna move according to scroll position. Please, let me know what do I do wrong here.