Jump to content
Search Community

Horizontal scroll parallax images

JustHugo test
Moderator Tag

Recommended Posts

Hi, i'm trying to replicate this animation , but i don't really understand what's wrong with the animation.

See the Pen ExKWVdq by pixit_design (@pixit_design) on CodePen

 -> found on another topic.

My structure is different.
When i don't set horizontal: true, the image property change, but when i want to do it with horizontal trigger, the property doesn't change anymore.

I'm sorry if this question has already been asked.
i hope you will be able to help me

See the Pen NWOxVyg by Hugo-R (@Hugo-R) on CodePen

Link to comment
Share on other sites

Hi,

 

I'm not sure I completely understand what you're trying to do and what's the issue you're facing right now. If you want to use ScrollTrigger in an horizontal setup then you have to use a horizontal scroll bar. This is not very common and somehow a bit counter intuitive, since you don't see a lot of websites/apps with horizontal scrollable sections. Right now the vertical 

 

What you could try is ScrollTrigger's Container Animation:

https://greensock.com/3-8#containerAnimation

 

Here is an example:

See the Pen WNjaxKp by GreenSock (@GreenSock) on CodePen

 

Just in case here is a simple horizontal fake using ScrollTrigger:

See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen

 

And here is a horizontal parallax effect that actually uses the horizontal scroll bar:

See the Pen JjYPgdp by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps getting you on the right track.

Happy Tweening!

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.
×
×
  • Create New...