Trying to create a multiScroll effect

[DeveloperJones]

Hello everyone, 

 

I am new here and I am trying to build a webpage like this:

 

https://alvarotrigo.com/multiScroll/#first

 

The first div I want to be full screen then a series of 6 50%/50% width like the example. 

 

I've tried to use my sandbox here:

 

https://codesandbox.io/s/heuristic-kapitsa-f5n40?file=/index.html

 

Can I build something like this in GreenSock & Scroll Magic?

 

Thank you for any help!

 

Jones.

 

 

See the Pen index.html by s (@s) on CodePen

[kohlej]

Jones Greensock released their own scroll plugin, ScrollTrigger, check it out. This looks doable with scroltrigger 

[ZachSaucier]

Hey DeveloperJones and welcome to the GreenSock forums!

 

This is definitely possible with GSAP. However, we don't recommend ScrollMagic. GSAP has its own scroll plugin that's easier to use, has more features, and less bugs called ScrollTrigger. Check it out:

 

I talked about creating a multi-scroll effect here:

You can do something similar with ScrollTrigger (this would likely have better support across different devices):

See the Pen bGEeeBr?editors=0010 by GreenSock (@GreenSock) on CodePen

[DeveloperJones]

Hi Zach,

 

This is exactly what I am looking for but a question if you do not mind, I want a landing div at the top then this the multiscroll and then a div after.  

 

How would I go about doing that?  I will try and recreate what you have in codepen and send it over. 

 

Thank you!

 

Also thank you for the warm welcome, I'm excited to learn more!!

 

[DeveloperJones]

Hi again Zach, 

 

This is what I mean: - Please see the HTML

 

See the Pen dyGXpdZ by DeveloperJone (@DeveloperJone) on CodePen

 

Does this make sense? Thank you massively for taking time out to answer my questions

[ZachSaucier]

Sure, you just have to build the logic around it. Something like this:

See the Pen zYrBKmN?editors=0010 by GreenSock (@GreenSock) on CodePen

[DeveloperJones]

Hi Zach, 

 

So that first Div is really cool but I get a scroll bar at the bottom?

 

I also notice that on the second lot of boxes there is like an overlap too.  How could I fix this?

 

Thank you again!

 

 

[ZachSaucier]

That's likely because of the some margin or padding along with the 50vw elements. You can fix it by removing the margin/padding or by changing the width of the elements.

 

Unfortunately we don't have the capacity to help you with every step of your project. If you have specific questions, especially related to GSAP, let us know and we'll do our best to help  

[DeveloperJones]

Perfect, ok great I am going to have a play and see what I can do! Thank you again, I really appreciate it!

[DeveloperJones]

Hey Zach,

 

Sorted it! Thank you again for your help.

 

Here is the finished code if anyone needs it:

 

https://codepen.io/DeveloperJone/details/dyGXpdZ

 

Thank you again!

 

 

[DeveloperJones]

Hi Zach, 

 

Could I ask another question please, I looked over the docs and I wanted to know how could I add navigation to the slides like this:

 

Thank you again and happy Sunday

[ZachSaucier]

On 6/14/2020 at 2:00 AM, DeveloperJones said:

I wanted to know how could I add navigation to the slides like this

Sure. ScrollTrigger bases everything off of the scroll position so you just need to add links to certain sections. To animate the transition you should probably use a scrollTo animation (from ScrollToPlugin which is already being used for that effect).

[JulesC]

Hi!

I currently have a website using the multiscroll library posted here: https://github.com/alvarotrigo/multiscroll.js

It's working smoothly however I'm looking to use scroll trigger inside of the site to create a few simple animations for elements and cannot seem to do so. The scroll start and scroll end markers dont seem to register the site as moving on scroll. I'm wondering  what advice you could give about wanting to use scrolltrigger  within a multiscroll site.

[Cassie]

Hey there @Jules

 

As we state in the forum guidelines I'm afraid we don't have capacity to support third party libraries.

However if you put together a minimal demo with a GSAP specific question we'll do our best to help!

It would be ideal to start a new thread with your demo and questions if you do this. It saves people in old threads being notified.

 

Thanks so much!
 

[MaryMax]

Hi ZachSaucier,

I added a red circle to your demo and updated GSAP to the latest version. When I scroll fast enough downwards the red circle gets visible which means that the direction sometimes is -1 instead of 1. Could you please help me?

See the Pen PoaXbwy?editors=0110 by MaryMax (@MaryMax) on CodePen

[Rodrigo]

Hi,

 

I think the issue here is due to the fact that the ScrollTo plugin is handling the page scrolling and at the same time you are manually scrolling as well, so at some point that creates some sort of jump in the scroll position which ScrollTrigger listens to that and runs the update callback accordingly.

 

An alternative is to try the approach from this example:

See the Pen NWxNEwY by GreenSock (@GreenSock) on CodePen

 

Hopefully that helps. Let us know if you have more questions.

 

Happy Tweening!

[MaryMax]

Thanks, Rodrigo
I did what you said but to no avail. It gets even worse. For example, it causes a constant jump between sections 1 and 3 when scrolling fast.

See the Pen WNyLLrM?editors=0010 by MaryMax (@MaryMax) on CodePen

 

Could You please check out this Pen? It seems that it works just fine. The only difference is the version of GSAP, which is 3.3.1. Do you think it has anything to do with the library?

See the Pen abKPZvj?editors=1111 by MaryMax (@MaryMax) on CodePen

 

[Rodrigo]

Hi,

 

Maybe the Observer Plugin could be an alternative here:

https://greensock.com/docs/v3/Plugins/Observer

 

I strongly recommend you against using a previous version of GSAP, especially one that old. There could be a number of drawbacks on using that approach.

 

Another option could be to use dynamic snapping using an array of snap points based on the amount of elements, especially if every element has the same height. It's a simpler approach, but you definitely won't get that jump back:

See the Pen KKeJaqW by GreenSock (@GreenSock) on CodePen

 

Let us know if you have more questions.

 

Happy Tweening!

[MaryMax]

Thanks for your help, much appreciated. I came up with this Pen which is very similar to yours. I simply used 100 and -100 in my tween. Do I need to use {   y: -(leftSection.clientHeight - window.innerHeight)} or mine is Ok?

See the Pen oNymvXw?editors=1010 by MaryMax (@MaryMax) on CodePen

[MaryMax]

I have another question, please. How can I know which section is active or entered? I mean when Scrolltrigger snaps between sections. I need the index of vertical slides to perform an animation upon entering the area. I know there's onSnapComplete, but it fires after the process. Can I get the index sooner, like onEnter?

 

See the Pen zYaepWg?editors=1010 by MaryMax (@MaryMax) on CodePen

[Cassie]

Hi there!

 

There sure is - you can use call onStart in the snap object

See the Pen QWxYzRZ?editors=0011 by GreenSock (@GreenSock) on CodePen

Object - Like snap: {snapTo: "labels", duration: 0.3, delay: 0.1, ease: "power1.inOut"}, fully customizable with any of the following properties (only "snapTo" is required):

• snapTo [Number | Array | Function | "labels"] - determines the snapping logic (described above)
• onStart [Function] - a function that should be called when snapping starts
  ...

[MaryMax]

Hi There, again

I'm using wrapper in my page, but when I activate normalize scroll I can only use scrollbar for scrolling the page. I tried pointer-events: none, still no results.

See the Pen MWXdvYJ?editors=1010 by MaryMax (@MaryMax) on CodePen

[GreenSock]

You need to set allowNestedScroll: true for that: 

See the Pen gOKJjNE?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Basically there's some extra work ScrollSmoother has to do in order to handle the events like that, so you opt-in for that. 

 

Does that resolve things for you? 

[MaryMax]

Thanks Jack, that's exactly what I needed. What about[ target: "#wrapwrap"]. Can't I just set the target?

[GreenSock]

13 hours ago, MaryMax said:

What about[ target: "#wrapwrap"]. Can't I just set the target?

No, that's not really a thing. The target for the normalizeScroll() almost never needs to be set (it's not even documented) - it's only for a very odd situation where you're not normalizing the scroll of the main body/html. 

 

14 hours ago, MaryMax said:

Thanks Jack, that's exactly what I needed.

🥳