Jump to content
Search Community

SmoothScroller + Parallax scroll on footer

Redcase Software test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

 

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!

 

  • Like 2
Link to comment
Share on other sites

 

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.

 

  • Like 2
Link to comment
Share on other sites

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!
 

Link to comment
Share on other sites

  • Solution

 

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

 

  • Like 3
  • Thanks 1
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.
×
×
  • Create New...