Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Araf Hossain

Want the scroll slow with ScrollTrigger Plugin

Recommended Posts

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

Link to post
Share on other sites

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.

 

Link to post
Share on other sites
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. 

Link to post
Share on other sites
1 minute ago, Araf Hossain said:

When I am trying to implement in WordPress, lots of problems shown. For this reason I have shown this like this. 

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

Link to post
Share on other sites
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

Link to post
Share on other sites
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. 

Link to post
Share on other sites
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. 

Link to post
Share on other sites

You'll have to customize it to fit your needs.

Link to post
Share on other sites

I wish I could show my page with your example. :-| 

Link to post
Share on other sites

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. 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×