Maelle Posted June 17, 2021 Share Posted June 17, 2021 Hello ! I am new to gsap and animation. I know there are a lot of forums about this topic but none of them have successfully helped me. I have never done parallax before. So I have a div with various elements on top of each other. By scrolling I want to have a little bit of parallax with a max point I am using gsap into vue.js and I don't know how to initialize all of this. I've tried some stuff but nothing is working like i want. I have attached a picture of the scene. The bird is supposed to go left, the fish right and the water has to move to the left. if you could give me a demo in a codepen I would really appreciate it Thank you for you help Link to comment Share on other sites More sharing options...
Visual-Q Posted June 17, 2021 Share Posted June 17, 2021 Hi Maelle, Welcome to the forum, building out custom examples for requests is a bit beyond the scope of the forum but of course anyone is welcome to assist with that if they want to. It sounds like you've already made a start, so if you can create a codepen of where you're at it would help a lot. I'm not a Vue guy so someone else would have to advise about that. As far as the parallax goes the best place to start is probably just to create a timeline animating the elements and adjust the speed of the elements till the timing of everything looks good. Then you'll want to explore controlling it with scrollTrigger likely using a combination of pinning and scrubbing. Hope that helps point you in the right direction. 3 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