[Vertical parallax + horizontal scroll with snap]

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,

[Vertical parallax + horizontal scroll with snap]

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

 

 

 

[Vertical parallax + horizontal scroll with snap]

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 ? 

[Vertical parallax + horizontal scroll with snap]

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