How to sync horizontal drag to native vertical scroll position

[asilva]

Hi, everyone!

 

Is there a way to sync, lets say, a 100vw horizontal drag to its vertical native scrolling position? I'm designing a website in webflow's platform and need to use its "Scroll into view" interaction to trigger an animation every horizontal slide drag. Am I making any sense?

 

I attached a codepen URL with a drag & scroll animation. Eventually, I want to eliminate the scrolling part so it's draggable only.

 

My coding skills are close to none, so pardon my ignorance. 

See the Pen ExaReqd by alvin921 (@alvin921) on CodePen

[ZachSaucier]

Hey asilva and welcome to the GreenSock forums! Thanks for being a Club GreenSock member. We couldn't do what we do without people like you.

 

Sorry, I'm not understanding what you're asking. 

57 minutes ago, asilva said:

I want to eliminate the scrolling part so it's draggable only.

So you want a set animation to occur when someone drags an element? Meaning you want the elements to animate a set distance no matter how much a user drags something? Or am I misunderstanding you?

 

Maybe a diagram or example would help us understand what you're going for.

[asilva]

Hey, Zach!

 

Sorry I didn't make myself clear. This is a good example of what I meant: https://scroll-bounce.webflow.io/. As you can see, as you drag each slide horizontal, native scrollbar updates to a new position on y. This will allow me to use interactions in webflow's platform. 

 

Please, let me know if you need a better explanation. English is not my primary language, but I'll try my best.

 

Thanks!

[ZachSaucier]

If that demo was made in webflow, why not use the same approach that they used? I'm curious why you're asking about this in the GreenSock forums.

 

The basic approach to create that demo in code is as follows:

• Create a container that has position: fixed; that holds the content that will scroll horizontally.
• Make the horizontal content only scroll based on dragging.
• Once that's done, change the actual page's height based on how much content there is in the horizontal section. The exact sizing doesn't matter too much.
• Then, after the navigation is dragged, update the scrollbar position based on how much of the horizontal section has been scrolled.
• Also, when the page is scrolled, update the scroll position of the horizontal section.

Hopefully that helps somehow  

[asilva]

1 hour ago, ZachSaucier said:

• Then, after the navigation is dragged, update the scrollbar position based on how much of the horizontal section has been scrolled.
• Also, when the page is scrolled, update the scroll position of the horizontal section.

This is the part I don't know how to do. 

 

The demo was built on Webflow using Greensock's plugins. I asked here because I need the draggable with throwProps functionality, as the example does. In Webflow, I can recreate the horizontal scroll, but don't know how to update the scrollbar position so I can use Webflow's interactions. 

 

My bad for asking here, I guess. 

 

Thanks for your time.

 

[ZachSaucier]

It's quite simple using code - you could add it after exporting it. But if you want to learn how to do it in Webflow I don't blame you  

[asilva]

That's the thing, I'm a designer, not a developer. I bought the club membership so I can spice up my designs. 

 

I don't want to learn how to do it in Webflow, I want to learn how to implement it in Webflow using Greensock plugins. That's all. 

 

17 minutes ago, ZachSaucier said:

But if you want to learn how to do it in Webflow I don't blame you  

Am I sensing sarcasm?

[ZachSaucier]

1 minute ago, asilva said:

I don't want to learn how to do it in Webflow, I want to learn how to implement it in Webflow using Greensock plugins.

Is there a difference? Sorry, I'm unfamiliar with how Webflow, especially how it works with external libraries like GSAP.

 

2 minutes ago, asilva said:

Am I sensing sarcasm?

No sarcasm. I understand that for non-programmers using a visual editor to produce code is very handy!

[Shrug ¯\_(ツ)_/¯]

Welcome to the forum @asilva I don't think any perceived sarcasm was intended, this forum is a very friendly place.

 

6 hours ago, asilva said:

The demo was built on Webflow using Greensock

 

Oddly that webflow demo loads Tweenmax but unless I am overlooking things or blind it appears any reference to GSAP in the code was removed or never called? Interestingly it seems derived from the below codepen by @@jesper.landberg which does use GSAP, but neither appear to call Draggable unless I blindly overlooked it.

 

See the Pen QZxdVX by ReGGae (@ReGGae) on CodePen

 

Don’t know much about webflow but it appears you can clone that project into your own account from the below link and play with/modify it.

https://webflow.com/website/Bouncing-Scroll

 

6 hours ago, asilva said:

I want to learn how to implement it in Webflow

 

6 hours ago, asilva said:

In Webflow, I can recreate the horizontal scroll, but don't know how to update the scrollbar position so I can use Webflow's interactions. 

 

If you have questions specific to webflow or how to implement that example along with other webflow features, then I would probably suggest asking on the webflow forums as that is specific to webflow.

[asilva]

I'm sorry. I was sleep deprived and overreacted. 

 

Thanks for you help, guys. What I'm trying is more code related than webflow's. Zach gave me the hint I needed. Now I just need to figure out how to call that scroll position update after draggin horizontal. I will do my research.

 

Thanks again.

[jesper.landberg]

On 1/16/2020 at 11:25 PM, Shrug ¯\_(ツ)_/¯ said:

Welcome to the forum @asilva I don't think any perceived sarcasm was intended, this forum is a very friendly place.

 

 

Oddly that webflow demo loads Tweenmax but unless I am overlooking things or blind it appears any reference to GSAP in the code was removed or never called? Interestingly it seems derived from the below codepen by @@jesper.landberg which does use GSAP, but neither appear to call Draggable unless I blindly overlooked it.

 

 

 

Don’t know much about webflow but it appears you can clone that project into your own account from the below link and play with/modify it.

https://webflow.com/website/Bouncing-Scroll

 

 

 

If you have questions specific to webflow or how to implement that example along with other webflow features, then I would probably suggest asking on the webflow forums as that is specific to webflow.

 

Reason u aint seeing any gsap called (I guess) is because my slider actually didn't use gsap, in my pen it was only used for the transition and the other non-slider effects. I guess whoever made the webflow demo just added the dependencies from my pen.