ScrollMagic 3.0 on the horizon. Looking for Testers and Maintenance supporters (code and issues)

[janpaepke]

Hi guys,

I know it's been a while, since you heard from me.
To be honest I was kind of avoiding to even go to the issue tracker, because every new issue caused me physical pain, as I was simply unable to find the time to properly work through them all. The more piled up, the worse it got.
ScrollMagic always was dear to my heart and to this day is my biggest open source project. I always told myself one day I would make a new version. One with all the updates that happened in web development in these past years. I was gonna make it easier to use, more responsive, more type secure, more mobile friendly... I was gonna make it sooo much better.

But in the end I just kept procrastinating.

Well, aside from all the bad that happened through this pandemic year, there's also good: It gave me time. More time for my family, more time to think and most importantly: Time for ScrollMagic.
So I'm excited to announce, there's now a working Alpha version of ScrollMagic 3.0.

There's still a lot of work, before I dare release it, documentation, testing, demos etc.
I would also like to clean up the repo, close outdated issues, label the remaining, close unresolved pull requests.

And for this I need your help!

Reply here or drop me a line.
Don't worry if you're not a pro coder. If you are a nice person and willing to help, we'll find something useful.

Looking forward to hearing from you and even more to showing you some new magic.
best,
Jan

[JingkangZhang]

Hi Jan, I am happy to help with the project. I am a frontend developer with experience in JS and CSS, etc. Will email you and you can let me know how I can help.

[hirbod]

I am very hyped about this and I had a look.. rewrite in TS, awesome. I need to pick a library right now for a urgent project, so sad its alpha currently, I would love to help testing it afterwards.

Will this be a full BC? Or will v3 work with v2? Might help me to decide if I start with 2 and port to 3 and help or not.

[janpaepke]

Hi Hirbod,

No, the interface will not be compatible with SM2. To overcome some shortcomings a lot of things were changed (i.e. no more controllers).
If you start now I would still recommend using SM2.

Drop me an email and I'll send you a demo.

best,
J

[raybrownco]

@janpaepke I'd love access to the alpha code. I've used SM2 in the past to my great delight, and I'm interested to see what's new in SM3. I'll shoot you an email now. Thank you!

[pdkn]

Hi @janpaepke I'd be interested to test/collab or any accessibility features?

[janpaepke]

hey @pdkn, cool. drop me a line so we can discuss further.

[jan-dh]

@janpaepke just started looking into ScrollMagic but if I find some spare time, I can test some stuff

[janpaepke]

Just released SM 3.0 alpha 2.

Attention: Do not use in production, API subject to change!

To install latest alpha: npm install scrollmagic@next

Demo repo for JS & Webpack: https://github.com/janpaepke/sm-test
Demo repo for React, including draft for plugin interface: https://github.com/janpaepke/sm-test-react

Current TODOs:

• finalize plugin interface implementation
• some edge case management
• finalize exports, packaging, runners (chore work)
• add tests
• add documentation
• add examples

All Feedback on performance, api or general notes are very much welcome.

[jan-dh]

@janpaepke, just out of curiousity. I started playing around with Scrollmagic + gsap today and was wondering why I should be using ScrollMagic instead of gsap's Scrolltrigger package? Don't know both packages too well, so a genuine question as to what features etc.

[janpaepke]

Sure, that is a very valid question and GSAP's ScrollTrigger is great.
When it was released, I had to consider suspending ScrollMagic or moving it in a different direction.
It's actually one of the reasons for the new version: While SM2 was very much geared towards animation, SM3 aims to be a lot more agnostic about what you do with it. It is meant to be a convenient lightweight wrapper around achieving anything scroll based - not only animation, but things like infinite scrolling, in page menus, position based script suspension, dynamic content loading or whatever people can come up with.

GSAP is also a very powerful (and thus quite big) animation library, with ScrollTrigger as an Addon.
SM aims to provide the base layer.
Additionally the licensing for GSAP while very permitting, doesn't seem to be for everyone.
If you're already familiar and comfortable with GSAP, I strongly recommend to continue to use it.

In short SM gives you a lot more general access and control, but also more responsibility.
GSAP is meant to be used out of the box, SM to build on top of.

[hirbod]

I can confirm this. I made a really big project with GSAP the last 2 months and I must say that it is by far the greatest js lib on planet earth. It is big, but super flexibel (don't get me wrong, I don't want to shittalk SM) and you can import whatever you want. It's great with tree shaking and bundle size.

I made lot of tests and no library was comparable in performance. GSAP really won against every single lib, including SM. I don't know how SM3 will rank against, but the toolbox is nearly unbeatable. (You can animate everything. SVG, Motion paths, WebGL, Lottie, Pixi.. and bind everything to a Scrolltrigger and powerful function based actions or simple scrub animations etc). And they all work together or solo. And it has an awesome scrollproxy where you can add a third party scroll library like Locomotive-Scroll (and many more) to get smooth scrolling on every device.

Licensing might be an issue for teams with multiple developers (since every dev needs his own license) but this only counts for the paid plugins and if you resell or have like paying users (Netflix as example). Costs are 40-150 USD per year.

But I will for sure check SM3 out as soon as it's out of beta.

Another thing is the great forums. You will get an answer to every single question and most of the times a solution.

[janpaepke]

I agree with all of the above, but for the record: It is very much my point that SM3 shouldn't "rank against GSAP".
The underlying concept is very different. I would be like ranking lodash against socket.io...

[davidbwaters]

ScrollTrigger alone would be a more fair comparison. I'm using it in a project, and it is comprehensive, but based on my experience what I would like to see in a scroll library is:

helper for in-view detection (scrolltrigger doesn't have this, which I found odd)

ability to wait for an event before getting size/position and recalculating (if other libs are changing things)

either have examples or an add-on for integrating anime.js since that is probably the second most popular animation lib, is almost as powerful as gsap, and much more lightweight. seems logical.

use intersection observer when possible; use logic or write api in way where non-viewport relative interaction takes advantage of int. obs's performance behind the scenes while playing well with actions that need size and position calculated

helper (or addon) for common parallax stuff like easy relative way of setting element's scroll "speed" (like rallax.js) ie translating up or down while scrolling

helper/addon for horizontal scrolling, hopefully with options for how this is approached for different scenarios (transform, native, fake by padding bottom, pinning and translating, etc) and have this play well with touch/drag. Crazy how many websites are doing this now and there's not a single widely used library (besides this and maybe locomotive) for horizontal scrolling where you can scroll down with the wheel or desktop and automatically scroll horizontal sections.

feature that allows root el to be set or some option to use with shadow dom, so it can be used with web components with different shadow roots and compose interactions between different shadow root element, select inside them, or at least pass el references and not depend on 'document.querySelector' on a low level without an option to change root node

helper functions for setting optionally css variables for easy, powerful styling (basicScroll.js is really cool but not quite powerful enough for more complex stuff without a lot of custom callback code)

play well with native css snapping and sticky.

I basically just took the few gripes I had and the best bits and pieces from the different scroll libraries that have come out since v2.

Can't wait to see the new version, I might wait for the docs before I dive in.

[sharkfin009]

Jan's point is very pertinent : SM is for building on top of, with more control and responsibility. Some developers prefer to work at a lower level, with less 'magic' going on ,and more granular control. I relate to that... often situations get surprisingly complex very quickly, and in that case sometimes it makes more sense to go vanilla JS, but a minimal library is a helpful option. Unless it's a very standard type of project with obvious use cases. Thanks for all the hard work, Jan! Looking forward to trying it out. Ben

…

On Sun, Jun 13, 2021 at 5:23 PM David B. Waters ***@***.***> wrote: ScrollTrigger alone would be a more fair comparison. I'm using it in a project, and it is comprehensive, but based on my experience what I would like to see in a scroll library is: helper for in-view detection (scrolltrigger doesn't have this, which I found odd) ability to wait for an event before getting size/position and recalculating (if other libs are changing things) either have examples or an add-on for integrating anime.js since that is probably the second most popular animation lib, is almost as powerful as gsap, and much more lightweight. seems logical. use intersection observer when possible; use logic or write api in way where non-viewport relative interaction takes advantage of int. obs's performance behind the scenes while playing well with actions that need size and position calculated helper (or addon) for common parallax stuff like easy relative way of setting element's scroll "speed" (like rallax.js) ie translating up or down while scrolling helper/addon for horizontal scrolling, hopefully with options for how this is approached for different scenarios (transform, native, fake by padding bottom, pinning and translating, etc) and have this play well with touch/drag. Crazy how many websites are doing this now and there's not a single widely used library (besides this and maybe locomotive) for horizontal scrolling where you can scroll down with the wheel or desktop and automatically scroll horizontal sections. feature that allows root el to be set or some option to use with shadow dom, so it can be used with web components with different shadow roots and compose interactions between different shadow root element, select inside them, or at least pass el references and not depend on 'document.querySelector' on a low level without an option to change root node helper functions for setting optionally css variables for easy, powerful styling (basicScroll.js is really cool but not quite powerful enough for more complex stuff without a lot of custom callback code) play well with native css snapping and sticky. I basically just took the few gripes I had and the best bits and pieces from the different scroll libraries that have come out since v2. Can't wait to see the new version, I might wait for the docs before I dive in. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#982 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHJXI4MBZ3Q4VJUKCVC3RX3TSTEPRANCNFSM4ZNLVJ5Q> .

[CNlitai]

Hello, I am a front-end engineer. I am very happy to provide assistance within my capacity for this project and look forward to replying

[Kusou1]

Hello, I am a front-end engineer. I wanna join🥳

[mrkbr]

I would also like to spend some time and add some experiences to the whole thing. I am into frontend and cms but if I find a thing I could help with, I will of course do that.

[khairnarsaurabh23]

Hello, I'm a aspiring full-stack developer and I'll be happy to help you.

[stepanjakl]

Hello, is there any update on the ScrollMagic 3.0 development?

[volkandkaya]

Any updates? Looking for a animate on scroll library and most haven't been updated in a while.

[janpaepke]

Darn it :D

Time just slips away, doesn't it.
I apologise to everyone to keep you waiting.

All the more reason I need to do better at coordinating contributors.

Let me try and address all things here:

State of ScrollMagic 3.0:

It's pretty much done in terms of what I wanted it to be for a while now. (see below what's missing)

You can try it using npm install scrollmagic@next.
You can also have a look at the demo repositories for vanilla or react applications.

Most notable though is that for 3.0 I see ScrollMagic even less as an animation library than before. What it aims to be is is a framework for building scroll-position based interactions. Those may or may not include animations, but it wants to be a lot more open-ended and thus flexible.
If animations is all you need, definitely have a look at GSAP's Scrolltrigger.

What's missing

(not in any particular order)

• In-container scrolls: While I have rudimentary support, this needs to be fine tuned and tested
• tests: As I want to open this up more to community development, I need a good testing setup.
• remake addIndicator plugin: This was always one of the most useful plugins and I have a basic version in the above demos. It just needs to be extracted and published.
• finish and publish react plugin: This is also quite far along in the above demo, but it also needs to be extracted and published separately (and get some tests).
• new pin plugin
• new website + examples
• Update Docs
• clean up issues (community work)

As you can see most of the above concerns the ecosystem around scrollmagic rather than the lib itself.
Yet I feel without these things making 3.0 the default would not be a good idea.

Help

@CNlitai, @Kusou1, @mrkbr, @khairnarsaurabh23, if your offer still stands, let me know and let's figure out together how we can move this project forward.
Same goes for everyone else who wants to help.

I would probably say the biggest pressure right now is on tests.
So if anyone has experience with cypress or test-writing and setup in general, that might come in handy.

My time problem is that I am usually quite busy with other things and when I do find some time my brain goes like "is it really worth it getting into that for a few hours, that doesn't do it justice and you won't get much done..."

But what my brain forgets here is that if I don't use the little time I have, nothing get's done and slow progress is better than none.
Also it forgets that with your help we can probably make the best of the time I do have available.

so... shut up, brain, let's move this forward!

[khairnarsaurabh23]

Excited to work with you. I don't have any testing knowledge but I can contribute with code. I'll contribute as much as I can.

[janpaepke]

Excited to work with you. I don't have any testing knowledge but I can contribute with code. I'll contribute as much as I can.

pls drop me a line.

[54mu3l]

Hi Jan,

First of all I want to express my excitement for SM3! I just had a look at your sm-test example and I really like what I see.

Currently I'm a SM2 user. I love the functionality SM2 provides and I can't wait for SM3.

But I have one big question on my mind and it's about the license. The GSAP license worked fine for me until now. But in the future I'm planning to (hopefully) make some money of my projects and sell services to multiple end users. Which would require me to buy the full GSAP license - but the few dollars I hope to make are in no relationship to the costs of a GSAP license. Anyways, here is my question:

Is SM3 still based on GSAP or is it 100% licenced under the MIT license?

I couldn't figure this out based on your previous posts and an answer would be greatly appreciated.

Until then: keep up the great work!

[janpaepke]

Hey @54mu3l

great question, thanks.

Here's a bit of history:
SM1 was closely tied to GSAP, as was its predecessor "Superscrollorama".
In SM2 I moved the GSAP Animation portion into a plugin, because I felt it's up to the user to decide how to use it.
You could use it with a different animation lib or do manual css changes.

SM3 moved even more into this direction. The aim is to be completely agnostic to what the user wants to do with it.
If people like and prefer GSAP (for which there are great reasons, its an awesome framework), then they also now have the possibility to use "ScrollTrigger" which is GSAPs own scroll animation solution.

so in short: Yes, SM3 is completely open source, but so is SM2, if u use it without GSAP.

best,
J

[zurie]

looking to check this out when it drops. I am actually using a variant of your vueJs lib scrollmagic that I believe you emailed to me years ago. Its actually working fine with Angular (11?) but im sure if vanialla works it will work with 14.

[shikkaba]

What is the status of this? Any updates? Anything solid we can test?

[RafaelKr]

Hello @janpaepke it's really nice to see this project completely reworked in TypeScript!
I'd like to know if there is any new progress, especially regarding the pin plugin? If pinning is available I'd willing to test this in our current project.

[54mu3l]

Hi @janpaepke any updates on SM3?

Is there anything particular we could help you with?

fun fact: I'm using ScrollMagic 3 already in our productive system (it has been in there for almost 1 year now) 😄

[monaalexandra]

Really excited to hear there's gonna be a all new shiny version 😀
Any updates on the progress? I'm eager to try it, haha.

[worldoptimizer]

Love the project. Any updates on 3.0? Is there anything we can do to revive, pushing it over the finish line?

[zrooda]

I think what most of this library is doing is / will be superceded by the Scroll-driven Animations coming from WAAPI so that might be eroding the motive to continue these efforts.