Jump to content
Search Community

Horizontal Scroll with ScrollMagic + GSAP

Dipscom test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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:

 

See the Pen BJZmOy by davide77 (@davide77) on CodePen

 

 

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

 

See the Pen 245a382347d18a7c099c3d1cef410fe9 by dipscom (@dipscom) on CodePen

 

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.

 

See the Pen d8fa972f3f0f0460e71655d4240a8965 by dipscom (@dipscom) on CodePen

 

 

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

 

See the Pen XVazVp by PointC (@PointC) on CodePen

 

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.

:)

 

 

Link to comment
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:

 

See the Pen cbcd6972dc4b750660893868339f146c by dipscom (@dipscom) on CodePen

 

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?

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