Araf Hossain

April 22, 2021

Would you please tell me why all slide numbers stuck in one place when I come from another tab after few minutes?

April 20, 2021

I don't know why this is happening. I have tried a lot. But whenever I comes few minutes later to the slider tab it collapse all sliders numbers and images in one place. Check the attached image. Why is this happening.

And would you please tell me how can I make this slider exactly like this video:

https://drive.google.com/file/d/1_yB3fLq4PiINnd-Te4SJHRDBrQBII-U0/view?usp=sharing

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

August 25, 2020

I have done as you have done. But it not working. Because my every section "position: absolute" for this reason it not working might be. Checkout my pin then maybe you will get some idea.

August 25, 2020

I have tried lots of things after that I come up with GSAP. In gsap it is pretty much easy I know. But for the newbie I don't know how to do it.

August 25, 2020

4 hours ago, ZachSaucier said:

Hey Araf. There's a demo in the ScrollTrigger docs that does this sort of thing. What you're wanting is essentially a simplified version of this demo:

This is exactly what position: sticky was made for.

I really appreciate your answer. But it is very complicated for me Is there any simple way to do?

Would you please give an example with my codepen code? Thank you :-)

August 25, 2020

As you can see in my codepen code there is a image and I want to fixed its position center in the section. When scrolling down it will follow the scroll.

When the following section comes up there will be a parallax effect. That means image will stick at the bottom of that section and following sections going up over the image.

Here is a simple example. Like the form on that website, I want my image but in the center of viewport.

If you don't understand please let me know.

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

June 24, 2020

3 hours ago, ZachSaucier said:

Hey Araf. Posting more does not make your question more likely to be answered. In fact, it does the opposite because it is a little annoying We'll be sure to answer every question that we're able to answer (within reason). Please don't comment again if there's nothing new to add.

As I said, you just need to change the start position of the tween that animates the background image's position. Here's a basic example:

Sorry, for disturbing Have a great day :-)

June 23, 2020

1 hour ago, ZachSaucier said:

I see no pen background image on your site.

But based on your CodePen I assume you mean the image shown. You just need to change the start time of the ScrollTrigger. I'd use a new ScrollTrigger for that animation since you want the start time to be different than the one for the section.

Have you been checked my website? Please need some help.

June 23, 2020

2 minutes ago, ZachSaucier said:

I see no pen background image on your site.

Hey please check now. I have fixed it

June 23, 2020

5 minutes ago, ZachSaucier said:

Yep, I looked. I still don't understand.

There is a pen image as the background image on my site. http://araf.dynamicflowdev.com

When scrolling down the image should follow the scroll but it delay, after scrolling stop then it change the background position.

When scrolling up FAST, it shows full image of pen and give space to the top. Which I don't want. I want that pen stick to the top of that section. But when scrolling down it will change its position to down.

June 23, 2020

12 minutes ago, ZachSaucier said:

Sorry, I'm not following what you're saying is wrong @Araf Hossain. Can you please try to rephrase? Maybe remove more parts from the demo that are not relevant to what you're asking about?

If you have seen my website http://araf.dynamicflowdev.com then I think you understand what I meant.

By the way here is the update

June 23, 2020

12 hours ago, GreenSock said:
I'm not sure I understand the effect you're after, but if your goal is to animate that backgroundPosition on the 2nd element during that scrub, you can just use a timeline instead of a tween and embed it wherever you want. Since each of the panel animations lasts 0.5 seconds, you could insert it at a time of 0.5 on the timeline so that it starts at the same time the 2nd panel starts its animation:
gsap.timeline({
  scrollTrigger: {
    trigger: "#container",
    start: "top top",
    end: "+=500%",
    scrub: 1,
    pin: true
  }
}).to(".panel:not(:last-child)", {
  yPercent: -100,
  stagger: 0.5
}).to(".panel:nth-child(2)", {
  backgroundPosition: `0% 100%`,
  ease: "none"
}, 0.5);
However, that doesn't look at all interesting to me, so I wonder if you're trying to keep the 2nd panel in place during that part of the scrub. If that's true, you'd need to offset things in the timeline accordingly so that the rest of the panels don't animate until later...

Does that help?

I appreciate what you have given to me. But it is not what I want. But I will use this to my another project So advance thank you :-D

Check out this site http://araf.dynamicflowdev.com on the 3rd section where pen is in the background. that pen's position is moving when I am scrolling but not moving asap when scroll is moving. I have set whole section for "Scrub: 2" because I want the smooth scrolling.

If you see in my website when scrolling down that background coming down but not catching the sidebar-scroll asap. Taking time to catch the sidebar-scroll. For this reason, when scrolling up it shows the full background image. Which is awkward.

Try to scroll my website you will get my point of view.

Check my pin update what i did in there. Set the background position.

June 23, 2020

Hey there you can see I have a image in the second section. I just want to set the background position and move that when scroll. I know it is possible to do with the timeline but I have already used that timeline for all the sections.

So, I don't know how to move that specific image when scroll. And I have tried this code. From & To. But this wouldn't work. I don't know why.

gsap.from(".panel:nth-child(2)", {
  backgroundPosition: `2% 0%`,
});

gsap.to(".panel:nth-child(2)", {
  backgroundPosition: `0% 100%`,
  scrollTrigger: {
    trigger: "#container",
    scrub: true,
  }
});

Is there anyone who can help me with this thing 😕

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

June 20, 2020

5 minutes ago, maihienhoaphat said:

Thanks much, this is what I am in case.

Then we are in the same page ;-) cool.

June 20, 2020

5 hours ago, ZachSaucier said:

The end position is obviously off. They're all going to the same position.

We can't help you with this information. if you would like our help, please create a minimal demo on CodePen that recreates the issue.

Hey I solved it with the "<span>" tag and "data-url" attr.

Whatever thanks to you :-D

June 19, 2020

Hey sorry, it's not working :-( . no need to answer that.

June 19, 2020

4 hours ago, ZachSaucier said:

The end position is obviously off. They're all going to the same position.

We can't help you with this information. if you would like our help, please create a minimal demo on CodePen that recreates the issue.

Hey, I have a solution, would you please tell me? is there possible to add 'scrollBy' function in there??

June 19, 2020

1 minute ago, ZachSaucier said:

The end position is obviously off. They're all going to the same position.

We can't help you with this information. if you would like our help, please create a minimal demo on CodePen that recreates the issue.

I wish I can 😕

June 19, 2020

13 minutes ago, ZachSaucier said:

As far as I can tell that's just loading the assets. Regardless, it's minified so we can't figure out what the issue is.

By the way, have you seen that? after manually scrolling down to the another section. Then, when I click on the side nav links; It goes up as we wanted. But it's not going down when we click on those same links :-(

June 19, 2020

4 minutes ago, ZachSaucier said:

As far as I can tell that's just loading the assets. Regardless, it's minified so we can't figure out what the issue is.

as much I know, there is a 'ScrollTo' function which is interrupting your created function. :-| And I don't know how to find it :-(

June 19, 2020

6 minutes ago, ZachSaucier said:

It's very hard for us to debug on a live site. I'm guessing something is wrong in your script but I can't say what.

If you're sure your script is correct, try stripping out other things until it starts working. Then figure out what is causing conflict.

By the way I see that you loaded GSAP 1 as well on that page. No need for that.

I just want you to see this script. http://araf.dynamicflowdev.com/wp-content/plugins/revslider/public/assets/js/rbtools.min.js?ver=6.0.5

And I have removed GSAP 1.

In this script there are some 'ScrollToPlugin' codes. Press the 'ctrl+f' then find the scrolltoplugin. You will understand. Do you think it is affecting something on my site?

June 19, 2020

15 hours ago, ZachSaucier said:

On my phone now. Check the console. Also did you realize that I changed the HTML and CSS some?

Do you have a minute?

June 19, 2020

Just now, ZachSaucier said:

Why not just use the document instead then?

When I use "document", sidebar scroll does not move. So when I scroll with my mouse. It starts from beginning. And there are some glitches.

June 19, 2020

3 minutes ago, ZachSaucier said:

On my phone now. Check the console. Also did you realize that I changed the HTML and CSS some?

I have seen all of those HTML & CSS changes. I have seen my console too. When i click on the links there is no error. I have seen tons of examples and tons of site :-( .. Feeling soooo lonely.

Sorry for disturbing when you available on your PC then please check this site. http://araf.dynamicflowdev.com/

June 19, 2020

By the way when I place "document" instead of "window" it works fine. Here is a example.

gsap.to(window, {scrollTo: i * innerHeight});

Now placing document.

gsap.to(document, {scrollTo: i * innerHeight});

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by Araf Hossain