Jump to content
Search Community

ScrollTrigger move element horizontally on vertical scroll

dmnk test
Moderator Tag

Recommended Posts

I want to be able to move element horizontally as I scroll. If I scroll down the element should go to the left, and if up it should go right.

Initially the moving element should be aligned with "Our story".

I managed to do it with jQuery (see pen), but is something like that possible with gsap?

See the Pen LYGxOKv by dkadezabek (@dkadezabek) on CodePen

Link to comment
Share on other sites

Hey dmnk and welcome to the GreenSock forums.

 

This is definitely possible with GSAP! In fact,  we have a plugin just for scrolling called ScrollTrigger which will drastically outperform the code used in your demo above. It's super simple to use and has a bunch of features that I think you'll find handy.

 

It's not clear exactly what timings you want, but here's the basic setup for how you could do it:

See the Pen BajpYNx?editors=0010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

@ZachSaucier your code is working fine on mobile.

 

I implemented almost exact code on the website I am building.  It was working perfectly on desktop, but on mobile the effect would be triggered too late. The bug occured first when I opened dev tools to test responsive (simulating iPhone 6/7/8). If I turned touch simulation off everything would work normally. On real device bug was present as well.

 

For some reason scroller markers were disappearing on mobile, and sometimes markers for triggers as well. It was a CSS issue from my side. I added overflow: hidden to parent element and everything worked fine again. TBH I don't know why it is working with this change, but it works.

 

Sorry for bothering you. Thank you very much. You really helped me.

Link to comment
Share on other sites

  • 2 years later...

@ZachSaucier I found this thread on a search for element animation and I wanted to see if ScrollTrigger will do what I need.  A client has requested a site with little "roadways" arranged vertically on the site, and they want the little "car" shape on each roadway to move along the road as the page and roadways scroll vertically.  I have attached a mockup of the roadway design they provided.

roadways.jpg

Link to comment
Share on other sites

Hi @dhull and welcome to the GreenSock forums!

 

Unfortunately we don't have the time resources to provide custom solutions for our users.

 

Please check this demos:

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

 

See the Pen dyMQYYz by michellebarker (@michellebarker) on CodePen

 

Hopefully these are enough to get you started. If you have any GSAP related questions feel free to post a thread.

 

Happy Tweening!

Link to comment
Share on other sites

  • 6 months later...

Hi @Milan Parmar and welcome to the GreenSock forums!

 

The link you provide is broken so there is nothing we can see there.

 

I'd suggest you to check the ScrollTrigger Docs in order to understand and know how the plugin works:

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Also take a look at this demos:

https://greensock.com/st-demos/

 

And this codepen collections:

https://codepen.io/collection/AEbkkJ

 

https://codepen.io/collection/DkvGzg

 

If you have any questions, remember to include a minimal demo that shows what you have and clearly illustrates the issue you're having.

 

Hopefully this helps.

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...