Jump to content
GreenSock

dave@friks.nl

ScrollSmoother with parallax conflicts y positions with animation

Recommended Posts

I'm testing ScrollSmoother and it works fine for parallax scrolling but when i'm animating the "#header" element the position of the "img" whitin the parallax-slab container the y-position gets stuck. Is there a way to combine animation with the new ScrollSmoother?

 

The best way to test is to view it in fullscreen, and remove the first animation to see the correct y-value

See the Pen WNXKOJe by Knerp (@Knerp) on CodePen

Link to comment
Share on other sites

I'm pretty lost about what you're describing there. 

 

Since you're creating a .fromTo() tween that is messing with the positioning of the entire container in which the parallax effect occurs, that's likely the problem. In other words, when ScrollSmoother is calculating the start/end positions for the parallax effect, it's based on things being in one position...and then you're totally shifting that around by animating the container. 

 

Does it help at all if you just move your animation below the ScrollSmoother.create()?: 

See the Pen NWYKWda?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Again, I'm having trouble understanding what you're describing and what your goal is and I'm in a bit of a rush so I don't have a lot of time to dig in right now. 

Link to comment
Share on other sites

Well it's difficult to describe but the images are not positioned correctly, i made another example without the animation:

See the Pen RwjBgVJ by Knerp (@Knerp) on CodePen



and this one is with the animation:

See the Pen WNXKOJe by Knerp (@Knerp) on CodePen



i think that the yPercent conflicts with the parallax or am i doing something else wrong?

Link to comment
Share on other sites

I'm curious - did you read my answer?

 

It sure seems like what I explained is indeed the problem.

 

I noticed you didn't implement my suggestion (move the tween below the ScrollSmoother.create()). 

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