Want to move specific background and already used that section in "Timeline"

[Araf Hossain]

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

[GreenSock]

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...

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

 

Does that help? 

 

[Araf Hossain]

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  

 

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. 

[ZachSaucier]

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?

[Araf Hossain]

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 

[ZachSaucier]

Just now, Araf Hossain said:

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

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

[Araf Hossain]

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. 

[ZachSaucier]

2 minutes ago, Araf Hossain said:

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

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.

[Araf Hossain]

2 minutes ago, ZachSaucier said:

I see no pen background image on your site.

Hey please check now. I have fixed it

[Araf Hossain]

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. 

[ZachSaucier]

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:

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

[Araf Hossain]

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