SmoothScroller + Parallax scroll on footer

[Redcase Software 3 Likes (Newbie)]

Hello everybody, 

i'm trying to create a smoothScroll effect to my whole page and a parallax effect on my footer div.
I check this demo on codepen from someone else 

See the Pen mdLaqgo by Karolsz (@Karolsz) on CodePen

 but on my demo is not working. 
Any thoughts?
No console errors.
The uncover animation just playing on the desire time.

See the Pen XWPJJpR by pmakos (@pmakos) on CodePen

[akapowl 5,215 Likes (Superhero)]

 

Hello there.

 

The main problem, is that you are targetting the wrong element in the tween.

 

// wrong element
uncover.to(".footer-container", { yPercent: 0, ease: "none", 
  onUpdate: function() {
    console.log("update", this.progress());
  }
});



// right element
uncover.to(".container", { yPercent: 0, ease: "none", 
  onUpdate: function() {
    console.log("update", this.progress());
  }
});

 

That changed, it should already work.

 

See the Pen dyqPYbX by akapowl (@akapowl) on CodePen

 

 

 

Some more things for your consideration:

 

• In my original demo, the end of "+=75%" on the ScrollTrigger was chosen according to the height of the footer; you changed the height, so you might want to consider changing the end of the ST, too, to keep things consistent 'speed'-wise.
   
• You are using an element with no actual height as the trigger-element for the ScrollTrigger - while it appears to be working with that, I would suggest re-considering that choice or setting some height to that element, to prevent running into possible issues that might cause.

 

I hope that will help. Scroll responsibly!

 

[Redcase Software 3 Likes (Newbie)]

Thank you for your time!
Ok, i get the issue with the selector.
But it seems i don't get the parallax effect. Even if i remove the smoothscroll. 
 

[akapowl 5,215 Likes (Superhero)]

 

I see that you have updated your codepen demo - In future, please fork the example you initially provided, and post an updated fork instead.

 

28 minutes ago, Redcase Software said:

Ok, i get the issue with the selector.

 

Apparently not quite yet, as in your update you are now also targetting the wrong element in the gsap.set() call before the actual tween.

 

Again: .container is the element you need to target in both of them; the gsap.set() and the tween.

 

[Redcase Software 3 Likes (Newbie)]

Sorry for the confusion. I don't remember changing it.
Here's a link which is a fork for your example and i just remove the smoothscroll effect. 

See the Pen BaONwOL by pmakos (@pmakos) on CodePen

I still can't see the parallax effect. 
Maybe it's the values on "start" and "end" properties ? I played a bit with them but with no result. 
Thank you so much for your time once again!
 

[akapowl 5,215 Likes (Superhero)]

 

It works just fine for me - in your case the effect will be very subtle though - especially on wide screens, because unlike the original demo, you did not set a fixed height to the .container; so instead the height in your example is depending on its contents - and xPercent is related to the height of the target.

 

When you add more content to the footer in your example, you should see it more apparent.

 

See the Pen PodqJrb by akapowl (@akapowl) on CodePen