Mukhriddin

16 minutes ago, GreenSock said:

Then you need to identify which element exactly you want to go to. Here's an example that uses an id: 

 

 

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!

27 minutes ago, GreenSock said:

It sounds like you forgot to load ScrollToPlugin. 

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: 

See the Pen poLjLVy by mshakhriyorov (@mshakhriyorov) on CodePen

13 hours ago, GreenSock said:

You can't use the browser's native anchor link behavior because the browser can't figure out the scaling you're doing and where each section will actually line up with the top. You need to tap into ScrollTrigger's magic. Also, be very careful about using scroll-behavior: smooth. It can interfere with things. 

 

I assume you wanted something more like this?: 

 

 

 

I read that a few times and I'm still fuzzy on what you mean. Hopefully my demo above gets you going in the right direction, though.

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

13 minutes ago, GreenSock said:

Then just pause it initially and reverse and then resume() when toggling:

https://codesandbox.io/s/gallant-hamilton-q3z0w9?file=/src/App.js

 

As for the Safari rendering, that's unrelated to GSAP. I don't notice anything odd on my end. You can try setting will-change: transform to see if it helps. When you inspect in Dev Tools, the values are all correct, right? They are for me. 

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

12 hours ago, GreenSock said:

I noticed several problems:

1. You forgot to pass an empty dependency Array to your useEffect(), meaning it will re-run every time there's a render.
2. You set your timeline to be reversed initially and paused. So the playhead starts at zero and then when you added animations to the timeline, nothing happened because not only was it paused (playhead frozen), it was also reversed, so the playhead has nowhere to go in reverse anyway. 
3. You had CSS transitions applied. NEVER apply CSS transitions to the same things that GSAP is controlling. 
4. You didn't have any cleanup function returned from your useEffect(). Keep in mind that in React 18, the useEffect() gets called TWICE in strict mode which is very confusing/annoying. It makes it important to clean things up, though, so you're not creating multiple animations that are attempting to control the same thing at the same time. 

I assume you were looking for something more like this:

https://codesandbox.io/s/gallant-hamilton-q3z0w9?file=/src/App.js

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. 

See the Pen vYRNOVp by mshakhriyorov (@mshakhriyorov) on CodePen

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

8 minutes ago, GSAP Helper said:

 

The minimal demo you wanted to add alongside your question does not seem to exist - it's showing a 404 error.

 

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

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.

See the Pen utils by s (@s) on CodePen

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)

See the Pen OJQeNpX by mshakhriyorov (@mshakhriyorov) on CodePen

22 hours ago, GSAP Helper said:

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

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!

On 6/4/2022 at 3:08 PM, Cassie said:

Hi there Mukhriddin,

 

I assume this is a pen you've found online because it's using old GSAP syntax and has a structure in place to hook up to the progress of loading images. If you're not loading images you just need a timeline. My advice would be to start from scratch, don't follow this pen as it's going to just confuse things.

Just start by planning out the steps of your animation and then creating them on a timeline.

 

e.g.

 

1 - Scale up progress bar from 0 to 100

2 - fade out progress bar

3 - fade in - 'content loaded' text

 

 

If you have GSAP specific questions about that, pop back with a minimal demo!

Hi Cassie!

Could you please, give me a shot in code here. I really don't have an idea how to implement it. 

See the Pen PoQdGjy by mshakhriyorov (@mshakhriyorov) on CodePen

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

See the Pen XWZYqpR by Mukher (@Mukher) on CodePen

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

44 minutes ago, Cassie said:

Hey there!

 

You can access the previous panel in that loop like so.

Hope this helps give you a little nudge in the right direction. Good luck!
 

panels.forEach((panel, index) => {
 
 tl.to(panels[index - 1], {
  opacity: 0,
 })

})

 

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.

See the Pen bGLLOOY by Mukher (@Mukher) on CodePen

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.

49 minutes ago, Cassie said:

GSAP adds those styles - If you refresh the page the previous animation doesn't persist. It'll start again from a clean slate

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 

See the Pen YzeaOWM by Mukher (@Mukher) on CodePen

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.

See the Pen xxYWWwq by Mukher (@Mukher) on CodePen