b-link Posted May 5, 2022 Share Posted May 5, 2022 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 More sharing options...
OSUblake Posted May 5, 2022 Share Posted May 5, 2022 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 More sharing options...
b-link Posted May 5, 2022 Author Share Posted May 5, 2022 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 More sharing options...
OSUblake Posted May 6, 2022 Share Posted May 6, 2022 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 More sharing options...
b-link Posted May 9, 2022 Author Share Posted May 9, 2022 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 More sharing options...
OSUblake Posted May 9, 2022 Share Posted May 9, 2022 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 More sharing options...
b-link Posted May 9, 2022 Author Share Posted May 9, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now