Jump to content
GreenSock

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

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

Go to solution Solved by ZachSaucier,

Recommended Posts

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

Link to comment
Share on other sites

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? 

 

  • Like 2
Link to comment
Share on other sites

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. 

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

2 minutes ago, ZachSaucier said:

I see no pen background image on your site.

Hey please check now. I have fixed it

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • Solution

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

  • Like 3
Link to comment
Share on other sites

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 :-)  

Link to comment
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.
×