Jump to content
GreenSock

b-link

Vertical parallax + horizontal scroll with snap

Recommended Posts

Hello Gsap Comunity, new to GSAP :)
I'm trying to have a full page parallax with a pined section which contains an horizontal scroll.


My problem here is that when I scroll down I got the parallax effect on the 1st section, second section is pined and have an horizontal scroll, but the fourth section does not have the parallax effect, if I scroll to the last section and go back up the parallax is working as planned... I can't figure out why it is not working properly on the way down...

 

Basically I would like to repropduce the animations on this website : https://astoncm.com/

 

If you have a better solution than the one I came up with to reproduce the animations, I'm all hears :)

 

 

See the Pen zYRGLBO by blinkdesign (@blinkdesign) on CodePen

Link to comment
Share on other sites

Welcome to the forums @b-link

 

To do the animations on the site, ScrollTrigger is probably not the best tool. Notice how you freely scroll around on that site. That's because all the animations are event driven, which is the kind of stuff the Observer plugin can help out with. 

 

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

 

See the Pen vYWvwXV by cassie-codes (@cassie-codes) on CodePen

 

Link to comment
Share on other sites

16 hours ago, OSUblake said:

Welcome to the forums @b-link

 

To do the animations on the site, ScrollTrigger is probably not the best tool. Notice how you freely scroll around on that site. That's because all the animations are event driven, which is the kind of stuff the Observer plugin can help out with. 

 

 

 

 

 

 

 

thanks you for your input :)
 

I managed to have the parallax but how can I mix the vertical and horizontal within the obvserver ?

using the code from the first code pen you propose, is it possible to add a condition to detect if a certain section is in view then pin it and have the horizontal scroll ? 

Link to comment
Share on other sites

6 hours ago, b-link said:

using the code from the first code pen you propose, is it possible to add a condition to detect if a certain section is in view then pin it and have the horizontal scroll ? 

 

You should really go through the code in those pens to make sense of what's going on as you will have to customize it to do what you want. For example, notice how there is a currentIndex being tracked. That would be correspond to the section it is on. And there is no pinning. It's just animating containers in and out view.

 

A horizontal scroll effect is the same thing. You animate a container horizontally. So you could listen for events, and animate the progress of the animation. 

 

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

 

 

Link to comment
Share on other sites

On 5/6/2022 at 6:29 AM, OSUblake said:

 

You should really go through the code in those pens to make sense of what's going on as you will have to customize it to do what you want. For example, notice how there is a currentIndex being tracked. That would be correspond to the section it is on. And there is no pinning. It's just animating containers in and out view.

 

A horizontal scroll effect is the same thing. You animate a container horizontally. So you could listen for events, and animate the progress of the animation. 

 

 

Hi, I looked and modified the code. but I can't figure it out... I do manage to have the div come from the side, but it does not work... any other advice?
am I on the right way ? I'm not sur I have the right approach...

 

See the Pen vYdLQBY by blinkdesign (@blinkdesign) on CodePen

 

 

 

Link to comment
Share on other sites

Why don't you start doing something simpler, like forking the horizontal moving demo I made and adding more to it? As I said earlier, using the Observer is going to require custom logic that you are going to have implement yourself. All it does is normalize and group together some common events. How you react to those events is up to you.

 

Link to comment
Share on other sites

13 minutes ago, OSUblake said:

Why don't you start doing something simpler, like forking the horizontal moving demo I made and adding more to it? As I said earlier, using the Observer is going to require custom logic that you are going to have implement yourself. All it does is normalize and group together some common events. How you react to those events is up to you.

 

Ok, thank you, I will try to do that,

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