Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Page Tailoring

How can I use GSAP 3 with scroll magic?

Recommended Posts

38 minutes ago, wpsoul said:

I am also waiting new plugin. Currently, I am using Scroll magic because it has one cool feature like Pin option and horizontal scroll. I hope new plugin will also have it. 

Yep, @wpsoul, the GreenSock plugin accommodates horizontal scrolling as well as pinning. I think you're gonna love it. 👍

  • Like 1
Link to post
Share on other sites
5 hours ago, agilepixel said:

That's easy, "clients" and "designers

That's correct. Clients like something not usual. But, I like when horizontal scroll is just one small section of site. It's cool for homepages when you need to show some gallery as section, something like carousel of important images

  • Like 1
Link to post
Share on other sites

Yes, but how do you handle horizontal scrolling? I see on the scrollmagic site that horizontal scroll doesn't work with a mouse wheel. 

https://scrollmagic.io/examples/basic/going_horizontal.html

 

What are desktop users supposed to do? Manually drag the scrollbar right?

 

It's not too hard to get the mouse wheel to scroll a container horizontally, but a lot of people don't do that. 🤷‍♂️

 

  • Like 1
Link to post
Share on other sites

@OSUblake @GreenSock We love too the horizontal scroll in certain case, like for history timeline. That example from Scrollmagic is always been disappointing and has bad UX. Horizontal scroll necessarily needs to be scrolled by mouse wheel up/down like we tried to do here:

 

 

 

If the new plugin will already implement this, it would be super super awesome.

Link to post
Share on other sites
1 hour ago, Black Ducas said:

Horizontal scroll necessarily needs to be scrolled by mouse wheel up/down like we tried to do here:

 

By horizontal scrolling, I meant actual scrolling that can be done by the browser, so you can scroll horizontally with touch or a trackpad. That's just animating a container on the x axis. But what were you looking for gsap to implement in your example?

 

And technically you can scroll horizontally with a mouse wheel by holding shift, but most people don't know that. 

 

Or with JavaScript. A quick and dirty example. Don't use this code.

 

See the Pen b106a113c226a2c49813f9c0725c8681 by osublake (@osublake) on CodePen

 

 

  • Like 2
Link to post
Share on other sites
13 hours ago, Black Ducas said:

 That example from Scrollmagic is always been disappointing and has bad UX. Horizontal scroll necessarily needs to be scrolled by mouse wheel up/down

Can you explain a bit more? What exactly has been disappointing? And are you wanting the plugin to literally hijack the scrolling like Blake's example where it makes vertical scrolling NOT do what the user requested, but instead do horizontal scrolling (not progress an animation that moves something horizontally)? That wasn't our plan - it always makes me nervous to hijack the native scroll. It feels somehow dirty/rude but maybe that's just me. The new plugin can definitely make things appear to move horizontally even when you're scrolling vertically, but it's done with a regular tween/animation that gets scrubbed by the vertical scrollbar. Or it'll let you use regular horizontal scrolling...but it doesn't hijack vertical native scrolling and turn it into horizontal native scrolling. 

  • Like 1
Link to post
Share on other sites

don't forget the OCEAN of middle men who think they are UI/UX experts and who can also design and code... uhg... When my mortgage is paid off... I need to find a small start up with ULTRA talented people and just learn and create amazing stuff! 

 

I've been using scrollMagic for a while... but if GSAP creates a solution with most of its popular features... I'm all in!

  • Like 1
Link to post
Share on other sites

Hi @GreenSock,

I find that demo very unusable, because you need to have a trackpad (or similar) to scroll horizontal and you need to know you can scroll horizontal in that way. All things a normal/middle user easily doesn't know. 

 

I meant an effect like this (in the example made by ScrollMagic):

 

See the Pen qBdewXg by gooogooo (@gooogooo) on CodePen

 

So, as you can see, it's controlling an horizontal animation by vertical scrolling.

This effect is seen on many important hyped websites and it's requested more and more by clients.

Will this be possibile with the new plugin?

Thanks for hearing at our opinions

 

  • Like 1
Link to post
Share on other sites
5 hours ago, Black Ducas said:

Will this be possibile with the new plugin?

 

Yes. You'll easily be able to create that effect with the new plugin. 👍

  • Like 2
Link to post
Share on other sites
  • 3 weeks later...

Hello! Just checking to see if the plugin has been released yet. :) It's been a while since I have been able to use GSAP for a project. I think I had to step out around... hmm... maybe late 1.x? 3.x looks amazing!

Link to post
Share on other sites
7 hours ago, michaelangela said:

Just checking to see if the plugin has been released yet.

Not quite yet. Still working on some kinks and prepping material so that people can better understand it when it gets released :) 

Link to post
Share on other sites
3 hours ago, ZachSaucier said:

Not quite yet. Still working on some kinks and prepping material so that people can better understand it when it gets released :) 

Understood. Is this to be a Club plugin?

 

And if there is any possible ETA that can be mentioned? :D

Link to post
Share on other sites
7 minutes ago, michaelangela said:

Is this to be a Club plugin?

No, it's intended to be a free plugin. However, our normal licensing applies so if you have multiple developers then you should have a Business Green account to cover all of those developers working with GreenSock tools. And if you are selling a product that uses GSAP to multiple clients then you need a commercial license that comes with a Business Green membership.

 

8 minutes ago, michaelangela said:

is any possible ETA that can be mentioned?

Not a specific one. Hopefully in the next month or so :) 

 

Link to post
Share on other sites

I'm selling my spot on the beta testing team if my price is met. ;)

 

giphy.gif

 

18 minutes ago, michaelangela said:

Is this to be a Club plugin?

That was discussed, but @GreenSock decided to make it a free plugin. Jack's generosity always amazes me. You look at the list of free stuff included with GSAP and it's impressive. I hope more people join Club GreenSock even if they only use the core/free tools on a regular basis. Though the bonus plugins in the Club are huge time-savers and membership quickly pays for itself. Happy tweening. :)

  • Haha 3
Link to post
Share on other sites
On 5/6/2020 at 9:39 AM, PointC said:

I'm selling my spot on the beta testing team if my price is met. ;)

hmm hmmm hmmmmm tempting...

 

I have been a part of Club Greensock in the past. Wholeheartedly endorse the Club. It's been a long time since I have been an active Greensock user. :( This particular challenge is work I am doing for a client so it's just me. We'll see where this goes!

Link to post
Share on other sites
  • 3 months later...

I created this Landing Page in 2019 for my client using Gsap2 and Scroll Magic - It was a very cool experience and a great challenge, I want to see what I could do for my clients with your plugin, please share with me as soon as you leave. In the case of Gsap 3, what has changed in the javascript of this version of mine?

Final front-end here:
https://agenciaoxigenio.com.br/clientes/viavarejo/pontofrio/itaucard/
https://agenciaoxigenio.com.br/clientes/viavarejo/extra/


 

Link to post
Share on other sites

@Antoniopf, I think you'll really like ScrollTrigger. It can do everything ScrollMagic can plus a lot more, and it's fully integrated with GSAP 3 (which is quite a bit smaller than GSAP 2 and has a ton of new features). 

 

Read about ScrollTrigger here: https://greensock.com/docs/v3/Plugins/ScrollTrigger

Read about what changed in GSAP 3 here:

 

 

If you have any specific questions, feel free to start a new topic rather than continuing this old thread. We'd be happy to help. 

  • Like 3
Link to post
Share on other sites
On 9/2/2020 at 2:54 AM, GreenSock said:

@Antoniopf, I think you'll really like ScrollTrigger. It can do everything ScrollMagic can plus a lot more, and it's fully integrated with GSAP 3 (which is quite a bit smaller than GSAP 2 and has a ton of new features). 

 

Read about ScrollTrigger here: https://greensock.com/docs/v3/Plugins/ScrollTrigger

Read about what changed in GSAP 3 here:

 

 

If you have any specific questions, feel free to start a new topic rather than continuing this old thread. We'd be happy to help. 

Hello Jack, Nice to meet you man! 
 

This plugin will open a new world, I watched the video and found it incredible and very effective. I downloaded it now and I'm going to use your plugin in the next project I'm creating for a super important client.

As soon as I start the front-end and have a preview I will create a topic to show you! And I will definitely need help with any questions that arise.

Once again I thank you for your incredible work and where we can go now with the animations!
Thank you very much!!!

  • Thanks 1
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.

×