Horizontal parallax triggered by scroll

[Maelle]

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 

[Visual-Q]

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.