Jump to content


Horizontal parallax triggered by scroll

Recommended Posts

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

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.




  • Like 3
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.