Horizontal Scroll with ScrollMagic + GSAP

Recommended Posts

Hi @DD77!


I'm moving our chat back to the public forum as I am no longer messing aroung with the countdown.


( For anybody who were not around during the time, I'm refering to the bellow thread. Yes, I did make too much of a fuss for no particular reason... Soz)



So, to the matter at hand. My understanding of what @DD77 needs help with is to have a horizontal scroll that triggers some animation as you move it along. His sample pen is the following:




In our private conversation I offered the bellow as a starting point:



No animation, just the CSS to have a bunch of horizontal sections.


I have no comercial experience with ScrollMagic, I'm going to be reading the docs and making it up as I go along, so, if anyone has anything to add, please do so.


Here are ScrollMagic examples: http://scrollmagic.io/examples/index.html and the documentation: http://scrollmagic.io/docs/index.html as guides.


What we'll do first is as simple as a test we can do.




Share this post

Link to post
Share on other sites

I'm not sure what's required here, but using ScrollMagic for a horizontal scroll isn't much different than vertical. I've forked @Dipscom's pen and added the indicators. They're indented, named and each have unique colors so you can see what's happening. I've also randomly changed some durations, offsets and trigger hooks just so you can see what's possible.



Again, I wasn't part of any other private conversation so I'm not sure if this even helps. As a side note, this is one of the main reasons it's best to ask questions in the public forum rather than privately. The more eyes that are on a problem, the better. 


Happy tweening and scrolling.




Share this post

Link to post
Share on other sites

The requirements were/are quite vague to be honest @PointC - We're both a bit on the blind side here. It's kind like leveling up challenges. :D


So, the next level is the bellow:



It's not super smooth when you link the progression of the tween to the actual scrolling but I suspect that's down to how much ScrollMagic is throttling the calls (as it should...).


Any scrollMagic experts care to share some knowledged upon the less fortunate souls?

Share this post

Link to post
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.