Jump to content
Dipscom

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:

 

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

 

 

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.

 

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.

:)

 

 

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:

 

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?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.