Pinned Section & Parallax inner cards based on position

[TerraHQ]

Hi there!
I have a question, I would like animate background position of the card-b from 75% to 25%, but I only want this to happen to cards that are visible in the viewport. 
So far I add a simple tween to  to card-b.

Thanks!

See the Pen PoBqeqb by andresclua (@andresclua) on CodePen

[Rodrigo]

Hi,

 

There are a few issues in your example that are not related to GSAP. First you're looping through the sections and your array has only one element. In that loop you create a ScrollTrigger instance and then you create another instance for the same element here:

// card b parallax
const tl = gsap.timeline;
tl({
  scrollTrigger: {
    trigger: this.DOM.container[0],
    pin: true,
    scrub: 1,
    start: "top",
    end: () =>
      "+=" +
      this.DOM.container[0].offsetWidth +
      this.DOM.container[0].style.paddingRight +
      this.DOM.container[0].style.paddingLeft
  }
}).to(this.DOM.cards, {
  backgroundPositionX: +0.25,
  duration: 2,
  ease: "Power2.out"
});

Same with the progress bar. Why not keep everything in just one timeline and scrub that one's progress?

 

I think this is a far better approach:

See the Pen yLqegRg by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps. Let us know if you have more questions.

 

Happy Tweening!

[TerraHQ]

hey @Rodrigo

I think you are right! thanks for the code improve, it could be all in one timeline, but the problem is that I dont want to animate background position unless is not visible on the page.

If you see my image, the last element is not visible on the viewport but is animating.

 

Finally, why are you adding that orange section above? Is it because my markup is not correctly?  If something is wrong on that side pls let me know, suggestions are always welcome

[Rodrigo]

3 hours ago, thunderfoot said:

 

Finally, why are you adding that orange section above? Is it because my markup is not correctly?  If something is wrong on that side pls let me know, suggestions are always welcome

Nope, just giving some space before and also some space after for debugging, just some reflex I have just when it come to test, nothing more.

 

For the lateral animation I think the best approach is using ScrollTrigger's Container Animation:

https://greensock.com/3-8#containerAnimation

 

Here is a live example:

See the Pen WNjaxKp by GreenSock (@GreenSock) on CodePen

 

Hopefully that provides a good starting point for your project. Although, and this is just a personal opinion, I see no issue in the fact that the images are animating while they're not in the viewport. You could change your code to this:

gsap
  .timeline({
  scrollTrigger: {
    trigger: container,
    //pinSpacing: false,
    invalidateOnRefresh: true,
    pin: this.DOM.pin,
    scrub: 1,
    start: "top",
    end: () => "+=" + container.offsetWidth
    // markers: { startColor: "fuchsia", endColor: "fuchsia" }
  }
})
  .to(container, {
  x: () =>
  -(container.scrollWidth - document.documentElement.clientWidth) +
  "px",
  ease: "none"
})
  .to(this.DOM.cards, {
  backgroundPositionX: +0.5,
  ease: "none",
},"<")
// progress bar
  .to(this.DOM.progress, {
  width: "100%",
  ease: "none"
}, "<");

That basically increases the background position value and sets the ease to linear and all the images are animated while you scroll and their are visible. I think that the performance tradeoff is minimal and it shouldn't cause any major issues on your site. But as I stated before, this is just my opinion and a simpler way to have it working.

 

Happy Tweening!

[TerraHQ]

Hey @Rodrigo

Thanks for the tip, I've watched the video and explanation looks really good / clear !
But IDK why is not working as expected on my version.
1 - Is it because I'm using x instead of xPercent? tried to swap it but it mess up everything 😑
2 - I'm noticing that markers are not display at the bottom. ( see example

See the Pen eYjJPRa?editors=1011 by andresclua (@andresclua) on CodePen

 )
3 - I can't make it work to animate from first time visible till the end of movement of document.querySelector(".js--hero-a")

Once again, thanks for the previous tips! 



 

[Rodrigo]

Hi,

 

There are a few issues with your code.

 

First you're using a very old version of GSAP and ScrollTrigger. On those versions ScrollTrigger Container Animation wasn't implemented yet, so it was never going to work.

 

Second you have a timeline that slides the cards container to the left and animates the progress bar as well. The problem here is that each of these instances has it's own ScrollTrigger. Is better to keep everything in the same timeline and create the ScrollTrigger instance just in that one (like in the example I provided in my first post in this thread):

var tl = gsap.timeline({
  scrollTrigger: {
    trigger: this.DOM.container,
    invalidateOnRefresh: true,
    pin: this.DOM.pin,
    scrub: 1,
    start: "top top",
    end: () => "+=" + this.DOM.container.offsetWidth
  }
})
.to(this.DOM.container, {
  x: () =>
  -(
    this.DOM.container.scrollWidth - document.documentElement.clientWidth
  ),
  ease: "none",

})
// progress bar
.to(
  this.DOM.progress,
  {
    width: "100%",
    ease: "none",
  },
  "<"
);

Finally you're using vertical start and end points in the ScrollTrigger instance that is supposed to be triggered by a container animation, that will definitely lead to logic issues because the target element is moving horizontally, not vertically:

const newLocal = gsap.timeline({
  scrollTrigger: {
    trigger: ".test",
    containerAnimation: tl,
    start: "top bottom",
    end: "bottom top",
    scrub: true,
    id: "2",
    markers:true
  },
})

 

With those changes you can make the container animation feature work as you expect:

See the Pen vYaLqGR by GreenSock (@GreenSock) on CodePen

 

Hopefully this clear things up. Let us know if you have more questions and always use the latest version of GSAP and it's plugins.

 

Happy Tweening!

[TerraHQ]

Wow wow wow!
ok, this is 100% premium content! 

Thanks for explain!