[Active nav-item styling using both scrollTrigger and click]

6 minutes ago, ZachSaucier said:

Please make a minimal demo if you'd like our help debugging  

 

I had made it. And you know that. It works fine in codepen. But not working on my site. 😕 I don't know why??????????????????????

[Active nav-item styling using both scrollTrigger and click]

I don't know why "ScrollToPlugin" is not working, Everything is working fine. When I click on any Side navigation "a" , it's not working.

Here is my live site link: http://araf.dynamicflowdev.com/

Before you gave me this solution I have tried this. 

See the Pen mdVROOX by arafnoob (@arafnoob) on CodePen

 

But I have tried yours. As your code everything is working fine. But when I click on any link. It doesn't move. 

[Active nav-item styling using both scrollTrigger and click]

42 minutes ago, ZachSaucier said:

Sure, here ya go:

 

 

GSAP3 forum is more faster than I thought. 

[Active nav-item styling using both scrollTrigger and click]

1 hour ago, ZachSaucier said:

Hey Sonya and welcome to the GreenSock forums.

 

You should use your developer tools console (F12) to check for errors. Opening it up for your pen I see "Uncaught TypeError: ALL_FUNCTIONS.sectionOne is not a function". I'm guessing those are additional animations that you took out for the sake of the demo (thanks for doing that).

 

FYI we recommend using the GSAP 3 way of formatting. For more about that check the GSAP 3 migration guide.

 

The main issue is that you're using an older version of ScrollTrigger that has a bug related to zero duration timelines with ScrollTriggers. Update the file to version 3.3.3 and it will animate some. 

 

But you'll still need to change your code a bit because you need a way to animate back to the previous section on reverse. I might do it by calling your method with the previous item - something like this: tl.call(ALL_FUNCTIONS.styleTheNav, [prevmenuitem]); - before you call the item that shows for that section. That way when you reverse it it'd call the previous one second. If you have overwrite: "auto" on those tweens, it should animate the way you want. I'd also recommend a toggleActions of toggleActions: "play none none reverse".

 

I noticed that you tried to use the position parameter on non-timeline tweens. That won't work because the tweens have nothing to position them in regards to.

 

Happy tweening.

Hey,

 

Would you please tell me how to do the same thing when scroll and I setup the GSAP3. But I could not do this thing. I want as she wants. I solved the previous problem now I am facing with this problem.

My codepen url:

See the Pen Yzwpevj by arafnoob (@arafnoob) on CodePen

 

 

I have tried this links:

 

 

[Want the scroll slow with ScrollTrigger Plugin]

5 minutes ago, ZachSaucier said:

Try the latest beta: https://assets.codepen.io/16327/ScrollTrigger.min.js

 

If that doesn't help, please make a minimal demo of the issue.

Thanks its working fine.  

[Want the scroll slow with ScrollTrigger Plugin]

Would you please tell me one thing? 

 

After going to another tab and coming back to my website, my scroll goes up automatically. 

 

Go here, http://araf.dynamicflowdev.com/

and after that go to another tab then come back again to this website. Scroll goes up automatically. 

[Want the scroll slow with ScrollTrigger Plugin]

I wish I could show my page with your example.  

[Want the scroll slow with ScrollTrigger Plugin]

8 minutes ago, ZachSaucier said:

I think you should use a different approach. Something more like this: 

 

See the Pen

See the Pen ZEQBRde?editors=0010 by GreenSock (@GreenSock) on CodePen

by GreenSock (@GreenSock) on CodePen

 

I can't do this. Because my sections are bigger. And I used pin to stay the content as It is. Checkout this link https://nagama.digital/ they also used this plugin to do this. 

[Want the scroll slow with ScrollTrigger Plugin]

6 minutes ago, ZachSaucier said:

What do you expect us to help you with then? We're happy to help, just not sure how we can.

Hi,

 

i updated my code please check. 

[Want the scroll slow with ScrollTrigger Plugin]

1 minute ago, ZachSaucier said:

What do you expect us to help you with then? We're happy to help, just not sure how we can.

No worries I am providing you with a demo on codepen.  Just a min

[Want the scroll slow with ScrollTrigger Plugin]

55 minutes ago, ZachSaucier said:

Hey Araf and welcome to the GreenSock forums.

 

If I'm understanding you correctly, it looks like you just need to change the position of your sections so that they start half way down the viewport. Can you please make a minimal CodePen demo if you're wanting our help implementing this effect? You shouldn't include all of your content of the page, just some big rectangles would work.

 

Hi,

I know how to do this. But I am using WordPress elementor where tons of css for singular design. 
i have done this with the demo. But When I am trying to implement in WordPress, lots of problems shown. For this reason I have shown this like this. 

[Want the scroll slow with ScrollTrigger Plugin]

Hello everyone I need a simple solution. This is my website http://araf.dynamicflowdev.com. I want to the parallax run with the sidebar scroller. 

 

Now what's happening now: 

When I scroll down full section goes up. But I don't want this.

 

What I want: 

I want when user scroll, every section will go up as scroll. Not the full section. I don't want to scroll full section. I want something like this site https://nagama.digital/

On that website, scrolling is too smooth and works perfect. I want something like that. 

 

I want the smooth scroll.

Here is my js code: 

gsap.to(".custom_panel:not(:last-child)", {
  backgroundPosition: `20% ${+innerWidth / 60}px`,
  yPercent: -100,
  ease: "slow",
  stagger: .5,
  scrollTrigger: {
    // markers: true,
    trigger: "#content",
    start: "top top",
    end: "+=300%",
    scrub: 8,
    pin: true
  }
});
gsap.set(".custom_panel", {zIndex: (i, target, targets) => targets.length - i});

 

Here is my css code:

#content {
  width: 100vw;
  height: 100vh;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
}
.custom_panel {
  position: absolute !important;
  will-change: transform;
  min-height: 100vh;
}

Here is my view: 

http://araf.dynamicflowdev.com

See the Pen Yzwpevj by arafnoob (@arafnoob) on CodePen