[ScrollTrigger shifted position declared before pinned ScrollTrigger]

Hello, I declare animations in two ways page.js and common.js (animations that are used on different pages) and found that if scrollTrigger (common.js) is declared before the scrollTrigger with pin (page.js) declaration, then the position of the triggers will be shifted. This can only be solved by including the common.js file after all page.js or is there another way?

 

 

See the Pen qBpeOPQ by Speculant (@Speculant) on CodePen

[Observer how block scroll?]

14 hours ago, Cassie said:

Maybe this demo will help?

oh yes its so good, thx. I didn't see preventDefault in documentation

[Observer how block scroll?]

Hello, I started using your new Observer and it's amazing

 

And I was wondering if I can use it to block the scroll in the element until some condition is met?

For example, I launch a slider when scrolling through an observer, and I need that until it ends, the scroll is not available

 

now I separately check the scroll through the wheel and stop it with preventDefault

See the Pen MWrXMbO by Speculant (@Speculant) on CodePen

[scrolltrigger different animation on enter/leave]

8 hours ago, GreenSock said:

Sure, if you're just staggering them (same animation for all, just offset), you can simply use a "stagger" on a single tween. No need for a timeline. But yes, if you need to animate various things differently, you can absolutely use a timeline that you create in the callback(s). Just make sure you set overwrite: true (or "auto") on the tweens to ensure you don't create conflicts. 

oh thanks, i tried creating it outside of the callback

[scrolltrigger different animation on enter/leave]

15 minutes ago, GreenSock said:

I don’t understand what you mean. Can you please explain? Why would you need a timeline?

For example, if I need to animate not one element, as in the example above, but several different ones in a certain sequence

[scrolltrigger different animation on enter/leave]

And somehow you can adapt it to the timeline or animation of each element, you need to write it inside onEvents?

[scrolltrigger different animation on enter/leave]

18 hours ago, GreenSock said:

So I'd do something sorta like:

Thank you, now it really works as it should, though a bit of a  difficult way

 

18 hours ago, GreenSock said:

That's not a bug - it's a logic issue in the way you've got it coded.

Yes, I understand that gsap was just doing his job, it's just that sometimes it's not clear how to do such things correctly

[scrolltrigger different animation on enter/leave]

Hello, I don't understand how to make different animations for the enter and leave of an element. Now I commented out onLeaveBack, otherwise, if you scroll quickly, the animations start to interrupt each other. Oh onEnter animation too

 

How to solve such problems correctly?

See the Pen YzEwdxR by Speculant (@Speculant) on CodePen

[scroll animation like vertical slider or fullpage.js]

2 hours ago, GreenSock said:

 

If you need some help, please provide a minimal demo and a GSAP-specific question and we'd be happy to take a look. 

 

That site does indeed look like it's not actually scrolling - it merely listens for wheel events and creates animations accordingly. If you want to actually scroll after the last section, you'll probably have to rework the logic because the page will either allow scrolling or not. So you'd probably need to build it with actual scrolling but override that in your "sections" and then when the user reaches the end, implement your logic so that it no longer overrides anything after a certain scroll position. Again, a minimal demo will go a long way to getting help. This certainly isn't a simple scenario - you'll need to .preventDefault() on wheel/scroll/touch/pointer events in various scenarios too. 

 

We really try to keep these forums focused on GSAP-specific questions, though, so you may not get a lot of "how do I build this whole thing" answers here since a lot of this is related to logic issues and handling native events, etc.

I thought maybe the scrolltrigger can do this behavior, but didn’t know how, so I turned here. I updated the code in the first post, it seems to work well now

[scroll animation like vertical slider or fullpage.js]

I tried to solve like this, delete scrolltrigger, and add wheel event

 

let section = 0;
const maxSection = 3

$container.addEventListener('wheel', (e) => {
    const direction = e.deltaY > 0 ? 1 : -1;
    e.preventDefault()

    if (scrollTween) return

    section += direction;
    console.log(section)

    if(section < 0) {
        section -= direction;
        return
    }

    if(section >= maxSection) {
        section -= direction;
        return
    }


    scrollTween = true;
    goToSection(section)
}, { passive:false })

its work, but how enable scroll after last section?

[scroll animation like vertical slider or fullpage.js]

Hi, how can I fix my animation to make the scroll look like this slider?

 

 

See the Pen JjrMPMW by Speculant (@Speculant) on CodePen

[hover animation jerky if reversed animation different]

Hi, how can I make the animation, on mouseenter/mouseleave event where the reverse animation is different?

 

my animation turns out to be very jerky if the event is triggered before the animation is complete

 

what is the best way to solve a similar problem?

 

I tried several options, in the last one, if add return, then the animation stops being jerky, but sometimes it stops.

See the Pen ExwyamB by Speculant (@Speculant) on CodePen

[scroll animation after onload animation]

10 minutes ago, GreenSock said:

But what do you expect to happen if the user scrolls earlier??? 

 

You could certainly use an onComplete in your initial animation and create your scroll-based stuff in there, but that doesn't really solve things because you're trying to have your cake and eat it too - if the user scrolls early and you set things up in your onComplete, it's still jump because you'd still be using the same scroll start/end values, thus if they scroll to a place halfway between, it'd have to jump there to be logically coherent. 

Now I understand your question. I expect that the starting animation will play to the end and only after that the scroll animation will start (if the user has already scrolled by this time, then the element should be animated from the current positionю The current scroll should be the starting one)

 

I tried Zach method, everything seems to be fine. Method Visual-Q good too.

See the Pen mdOaGVo by Speculant (@Speculant) on CodePen

 

thanks for the help

[scroll animation after onload animation]

11 hours ago, GreenSock said:

Like @Visual-Q pointed out, you have built things in a way that would make it logically impossible to do what you're asking. If one animation is trying to control the same position of the same object as another scroll-based animation is, to a totally different value, what would you expect to happen? (I don't intend that in a snarky way - I'm genuinely trying to understand what you thought should happen and why). 

I expect that when an element appears, it will have a start animation, and then when it ends, that element will have a scroll animation. But I don’t understand how to implement it correctly.

 

18 minutes ago, ZachSaucier said:

A good way to do this sort of thing is to put elements in a container and affect the container with one animation and the content with another.

hmm this could really be the solution

[scroll animation after onload animation]

19 minutes ago, Visual-Q said:

The issue is if you start scrolling before the initial animation is done the scrub and start animation fight for control. You could try disabling scrolling till the first animation is complete but that might be confusing for people. At the very least make the fist animation faster so the scroll disable doesn't last so long.

Thx for try to help, but disabling scrolling is too annoying, so I am not considering such a solution

[scroll animation after onload animation]

Hi, I can't solve this problem.

 

I have an animation when the page onload/element appears, also on the same element there is an animation with a scroll and they overlap each other and the elements jump between two values.

 

How can I solve this?

As far as I understand, if these animations are not in the timeline, they will work as was expected

See the Pen ZEBVOKb by Speculant (@Speculant) on CodePen