[Normalize delta scrollsmoother]

1 hour ago, Cassie said:

Hey there!

 

If you take a look at the Observer docs there's a demo of using it to do a 'custom' scroll effect.

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

I'm not certain what it is that you're trying to achieve though I'm afraid - but maybe that will help?

 

 

Hey! Thank you! Maybe i'm not so clear. I try to repeat: using gsap scrollsmoother can we edit the max delta scroll ? Like adding a custom normalize function? I want to avoid big scroll... on mobile with a big swipe i can scroll all the website... I want to set a limit of scrolling to x on big scroll or big swipe! Thank you

[Normalize delta scrollsmoother]

On 6/21/2022 at 10:44 PM, GreenSock said:

It really depends what you mean by "normalize". ScrollTrigger/Smoother uses native browser scrolling, so I'd call that very "normalized" but what I think you mean is actually non-normal, right? So if the user flicks their scrollwheel hard and it would normally scroll 2000 pixels, you want it to interfere and maybe only scroll 500 instead? That is not something we support directly, but you can of course manually do whatever you want using Observer and some custom code. 

 

I really tried a lot of coding and a lot of reasearch but i can't figure out... i tried to use ScrollTrigger.normalizeScroll but i can't edit the delta because it's only a reading parameters. Also tried with scrollProxy that has a setter method but on scrollsmoother but not works...  You say that is possible to set a max delta on scrollsmother with observer, how?

[Normalize delta scrollsmoother]

9 hours ago, akapowl said:

 

I'm actually not sure what it is you are asking, sorry.

 

 

If you want them to move slower, increase the distance to scroll, as that will be what determines the 'speed' of the animation, since the animation will get spread out between start and end of a scrubbing ScrollTrigger.

 

If you mean that the 'transitions' in between the different tweens are to hard, then I'm pretty sure that this is not related to ScrollSmoother's delta, but rather to the easing on the tweens - GSAP by default adds a a power1.out ease to tweens - so most often for scrubbin it would be best to set ease: 'none' to the tweens.    

 

 

 

 

 

 

But since from what I understand, you want things to blend together smoother in between, just play with the easing of the tweens - here is an alternative with 'power1.inOut' set to both tweens, so you can see the difference.

 

 

 

 

 

 

Also, I just want to mention, that the website you linked probably isn't a good reference for what you are trying to do, because as it looks to me they are just continuously rotating those helixes in one direction over the whole distance - so of course it looks smooth throughout - but you do have changes in direction, that you need to find the right easing for to feel smooth in between / blend together nicely.

 

But as already mentioned, I'm not even sure I really understand what exactly you mean with your question. I hope this will help, though.

 

And as a little sidenote:

 

Don't do this:

 

var st1Tl = new gsap.timeline({...})

 

There is no need for the new keyword - gsap.timeline is enough.

 

var st1Tl = gsap.timeline({...})

 

Thank you, for sure the ease function helped but what i mean i think is probably the normalization function of the scrollsmother, that we can't customize right? @GreenSock In the site i linked when you make a very big and fast scroll it normalize more then scrollsmother. With scrollsmother with a big fast scroll i can go to the end of the page.

[Normalize delta scrollsmoother]

@akapowl ok sorry i make more real demo, the first example was too far from it. First: i write fast the code so the step as you suggested was already used on the real one. I use immediate render false because of if you moving particles without it you loose the position reached in other animatios.

 

Here you can find the pen updated. As you can se if you scroll fast the particles moving too fast.

 

 

 

[Animate vertices in Three.js with GSAP]

Sorry i forgot to answer, i solved using gsap endarray function

[Normalize delta scrollsmoother]

Hi! I do a lot of research but i can't resolve this thing. Maybe it's the delta normalization of smoothscroller. As you can see in my pen if you scroll really fast the animation is not smooth. It is an easier example of a complicated morph particles on scroll in threejs but the fact is the same. I try to use preventOverlaps and fastScrollEnd but maybe i can't understand as they works. If look at this website: https://dnacapital.com/ and try a big scroll it is has a very good normalization of delta. So i think i have 2 problems: 1 is to understand as preventOverlaps and fastScrollEnd works and second the delta of the scroll. Can anyone help me? Thank you

See the Pen vYdwLGQ by aboutluca (@aboutluca) on CodePen

[Animate vertices in Three.js with GSAP]

Is the same to do it in a cycle? like below

 

for (let i = 0; i < this.particleCloud1.particlesGeometry.attributes.position.array.length; i+=3) {

    const pos = {
        x : this.particleCloud1.particlesGeometry.attributes.position.array[i],
        y : this.particleCloud1.particlesGeometry.attributes.position.array[i+1],
        z : this.particleCloud1.particlesGeometry.attributes.position.array[i+2]
    }

    gsap.to(pos, {
        x: pos.x + 5,
        y: pos.y + 5,
        z: pos.z + 5,
        duration: 5,
        // Make sure to tell it to update
        onUpdate: function () {


            this.particleCloud1.particlesGeometry.attributes.position.array[i] = pos.x;
            this.particleCloud1.particlesGeometry.attributes.position.array[i+1] = pos.y;
            this.particleCloud1.particlesGeometry.attributes.position.array[i+2] = pos.z;

            this.particleCloud1.particlesGeometry.attributes.position.needsUpdate = true


        }.bind(this)
    })

}

[Carousel move on hover not smooth]

3 hours ago, ZachSaucier said:

Hey mapo and welcome to the GreenSock forums! Thanks for being a Shockingly Green member. 

 

I think most of your jumpiness comes from the difference in the default value of overwrite between GSAP 2 and GSAP 3. In GSAP 2 it was "auto" by default and in GSAP 3 it is false by default. Changing it removes a bit of the jumpiness for me. You can change the default by saying gsap.defaults({overwrite: "auto"}); or you could apply it to just the tweens you want to by saying overwrite: "auto" in their vars parameter.

 

@GreenSock another instance where people are tripping over this. But maybe it will lessen once people are converting GSAP 2 things to GSAP 3 a while from now?

 

Thanks, set to true it's better but not perfect, i will study more! 

[Carousel move on hover not smooth]

Hello everyone, this is my first post.

 

I build a carousel with gsap3 starting from Sahil example linked below.

 

I change a lot from the original and everything goes well but the movement of the carousel on mouse over isn't smooth. Can you help me? 

 

I think this is a nice carousel and can be useful for a lot of user in the future!

 

Thanks

 

 

 

See the Pen wvvVYjb by aboutluca (@aboutluca) on CodePen