[How do I make an observer move in opposite directions when touch]

I see that you have managed to achieve it. Is it possible for me to get the old and new code to see what you have changed to make it work, as just switching wheelspeed didn't do it for me, as I am not using a separate scrolltrigger to enable Observer. Cheers!

[How do I make an observer move in opposite directions when touch]

I saw that you can check Observer.isTouched, don't know if that's the most efficient way, but if it is, can I get an example of it in use?

[How do I make an observer move in opposite directions when touch]

As you can see, when you scroll down with mouse, it works perfectly, but on touch you have to touch the opposite direction. Any idea how to make it when on mobile, or on touch to switch onUp and onDown?

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

[ScrollTrigger error]

On 2/8/2023 at 10:36 PM, GreenSock said:

Hm, it doesn't sound like that is getting executed then. It's very difficult to troubleshoot blind, though - can you please provide a minimal demo that clearly shows the issue? That error definitely means that ScrollTrigger hasn't been registered. 

See the Pen MWBMWYb?editors=1111 by FrEZy (@FrEZy) on CodePen

The animations aren't the most precise, but the idea is that on codepen everything works fine. On my project it doesn't where it's all the same, except, as I said, I have multiple ScrollTrigger.observe and Observers. Could that be the issue?

 

 

Didn't find a reason why it doesn't work but when I use ScrollTrigger.create it works.

[ScrollTrigger error]

Could I get an actually working prototype of a scrolltrigger in action, so that I can test if it's from my animation? Though I don't get the error in the codepen, the aniamtion as a whole doesn't function. My scroller isn't the body, it's a custom element

[ScrollTrigger error]

12 hours ago, GreenSock said:

Hm, it doesn't sound like that is getting executed then. It's very difficult to troubleshoot blind, though - can you please provide a minimal demo that clearly shows the issue? That error definitely means that ScrollTrigger hasn't been registered. 

See the Pen MWBMWYb?editors=1111 by FrEZy (@FrEZy) on CodePen

The animations aren't the most precise, but the idea is that on codepen everything works fine. On my project it doesn't where it's all the same, except, as I said, I have multiple ScrollTrigger.observe and Observers. Could that be the issue?

[ScrollTrigger error]

gsap.registerPlugin(Observer, ScrollTrigger, ScrollToPlugin);

 

I do register the plugin, just forgot to include it in the code

[ScrollTrigger error]

I do register the plugin, just forgot to include it in the code

[ScrollTrigger error]

gsap-core.js:89 
        
       Invalid property scrollTrigger set to {trigger: div.fifth-wrap, start: 'top center', end: '+=400', scrub: true, markers: true}end: "+=400"markers: truescrub: truestart: "top center"trigger: div.fifth-wrap[[Prototype]]: Object Missing plugin? gsap.registerPlugin()

 

When I console.log ScrollTrigger I get this
ScrollTrigger2(vars, animation) {
    _coreInitted || ScrollTrigger2.register(gsap) || console.warn("Please gsap.registerPlugin(ScrollTrigger)");
    this.init(vars, animation);

Could the problem come from the fact I am using multiple scrolltriggers?
 

let fifthWrapText = gsap.utils.toArray('.fifth-wrap')

fifthWrapText.forEach((section) => {

  let title = section.querySelector(".business-title");

  let text = section.querySelector(".business-general");

  gsap

    .timeline({

      scrollTrigger: {

        trigger: section,

        start: "top center",

        end: "+=400",

        scrub: true,

        markers: true

      }

    })

 

    .from(title, {

      opacity: 0,

      x: 500

    })

 

    .from(text, {

      xPercent: -120

    });

});

[How to stop onUp and onDown for a certain element ScrollTrigger?]

I want touch and scroll to not function when they are on a certain element. I tried using ignore and it worked for a div that covers the whole page, but not for the one I am using which covers half of it. Any idea how I can fix it?

 

  ScrollTrigger.observe({
    target: window,
    ignore: startScreen || carousel,
    type: "wheel, touch",
    onUp: () =>mainFunc(index- 1), 
    onDown: () =>mainFunc(index+ 1),
  });

[Need help fixing this carousel.]

See the Pen GRBGXeO?editors=1111 by NikiKarai (@NikiKarai) on CodePen

Need help with snapping to correct values at onStop,

spinning correctly, as right now it spins out of control 
 

[Why are the cards skewed?]

2 minutes ago, FrEZ said:

Well, I managed to fix the snapping to go to correct values, but it still spins incorrectly.

 

Any idea  how to fix the navigation, as right now it spins to the correct value, but at the end changes to the last.

[Why are the cards skewed?]

Well, I managed to fix the snapping to go to correct values, but it still spins incorrectly.

See the Pen GRBGXeO by NikiKarai (@NikiKarai) on CodePen

[Why are the cards skewed?]

On 12/27/2022 at 12:06 AM, Rodrigo said:

Hi,

 

You could try using the Horizontal Endless Loop helper function:

https://greensock.com/docs/v3/HelperFunctions#loop

 

That should provide enough tools for accomplishing something like this.

 

Unfortunately we don't have the time resources to tackle specific user requests or create complex fully working demos, so you have to give it a try and we can guide you along the way as much as we can.

 

Let us know if you have more questions.

 

Happy Tweening!

Who can I contact that I can pay to finish this job for me? I am unable to do it myself.

[Why are the cards skewed?]

On 12/27/2022 at 12:06 AM, Rodrigo said:

Hi,

 

You could try using the Horizontal Endless Loop helper function:

https://greensock.com/docs/v3/HelperFunctions#loop

 

That should provide enough tools for accomplishing something like this.

 

Unfortunately we don't have the time resources to tackle specific user requests or create complex fully working demos, so you have to give it a try and we can guide you along the way as much as we can.

 

Let us know if you have more questions.

 

Happy Tweening!

Do you think wrapping updating the snap to 1/images.length*2 and the wrap to -1 to 1 will do the desired job for the logic?

[Snap acting weird]

2 hours ago, Rodrigo said:

Hi,

 

I can spot two issues in your setup, mostly on your onStop callback:

onStop: (self) => {
  progressX.value = snap(progressWrap(progressX.value));
  gsap.to(progressX, {
    duration: 2,
    value: progressX.value
  });
  console.log(progressX.value, "progress");
  console.log(snap(progressX.value), "snap");
}

What happens here is that you're updating progressX.value in the first line (), then you tell to GSAP to tween the value property of progressX to it's current value, because by that time progressX.value was updated with this:

progressX.value = snap(progressWrap(progressX.value));

See the issue?

On top of that if you add this to your callback:

onStop: (self) => {
  progressX.value = snap(progressWrap(progressX.value));
  gsap.to(progressX, {
    duration: 2,
    value: progressX.value,
    onUpdate: () => console.log("stop update", progressX.value)
  });
  console.log(progressX.value, "progress");
  console.log(snap(progressX.value), "snap");
}

You'll see that sometimes the values in the onUpdate are negative when that particular tween starts, that's why is taking the long way around soto speak, because is going from a negative progress to a positive one.

 

This seems to prevent the jump in the rotation:

onStop(self) {
  // progressX.value = snap(progressWrap(progressX.value));
  target = snap(progressWrap(progressX.value));
  console.log("onStop init", target);
  gsap.to(progressX, {
    duration: 2,
    value: target,
    onUpdate: () => console.log("stop update", progressX.value)
  });
  console.log(progressX.value, "progress");
  console.log(snap(progressX.value), "snap");
}

Unfortunately it doesn't prevent the negative value, for that you'll have to review the logic in your onChange callback to prevent negative values.

 

I don't get what you mean that stop delay is inconsistent. How exactly? With the modifications I suggested for the onStop callback everything seems to work as expected (except for the negative values of course).

 

Hopefully this helps.

Happy Tweening!

I would greatly appreciate it if you could help me fix the issues behind the inconsistencies in my logic as I am truly stuck here.

[Snap acting weird]

1 hour ago, Rodrigo said:

Hi,

 

I can spot two issues in your setup, mostly on your onStop callback:

onStop: (self) => {
  progressX.value = snap(progressWrap(progressX.value));
  gsap.to(progressX, {
    duration: 2,
    value: progressX.value
  });
  console.log(progressX.value, "progress");
  console.log(snap(progressX.value), "snap");
}

What happens here is that you're updating progressX.value in the first line (), then you tell to GSAP to tween the value property of progressX to it's current value, because by that time progressX.value was updated with this:

progressX.value = snap(progressWrap(progressX.value));

See the issue?

On top of that if you add this to your callback:

onStop: (self) => {
  progressX.value = snap(progressWrap(progressX.value));
  gsap.to(progressX, {
    duration: 2,
    value: progressX.value,
    onUpdate: () => console.log("stop update", progressX.value)
  });
  console.log(progressX.value, "progress");
  console.log(snap(progressX.value), "snap");
}

You'll see that sometimes the values in the onUpdate are negative when that particular tween starts, that's why is taking the long way around soto speak, because is going from a negative progress to a positive one.

 

This seems to prevent the jump in the rotation:

onStop(self) {
  // progressX.value = snap(progressWrap(progressX.value));
  target = snap(progressWrap(progressX.value));
  console.log("onStop init", target);
  gsap.to(progressX, {
    duration: 2,
    value: target,
    onUpdate: () => console.log("stop update", progressX.value)
  });
  console.log(progressX.value, "progress");
  console.log(snap(progressX.value), "snap");
}

Unfortunately it doesn't prevent the negative value, for that you'll have to review the logic in your onChange callback to prevent negative values.

 

I don't get what you mean that stop delay is inconsistent. How exactly? With the modifications I suggested for the onStop callback everything seems to work as expected (except for the negative values of course).

 

Hopefully this helps.

Happy Tweening!

I don't understand what's making my progressX.value negative. I see that it's because of p, and so I wrap the progressX.value within 0-1. Why does it still come out negative?

[Snap acting weird]

Anyone got any idea why my snapping values are getting mixed up? Also any idea how to add an animating variable that sets to true once my gsap.to progressX value is finished, so then the onStop gets the progress value and I don't have to use onStopDelay that is inconsistent?

 

Thanks in advance!

See the Pen mdjxGdw by FrEZy (@FrEZy) on CodePen

[How to set correct value for progress?]

9 hours ago, Cassie said:

Alright, so the easiest route is going to be to use a tween, like the first example, instead of what Fabio set up for the observer example.

His route's not wrong, it's just a little less flexible and fiddly to adjust because he's doing a bunch of math and setting values directly instead of letting GSAP handle it.

I've commented this out so you can see what's going on. Hope it helps!
 

 

 

This is exactly what I am looking for, thanks! Just one thing. By using gsap.set we kill the whole animation of the spin. Any idea how to preserve that? It creates bugs for scrolling as well.
Also you should add   progress = snap(spin.progress()) at the end of onStop to remove that flicker when spinning again.

[How to set correct value for progress?]

1 hour ago, FrEZ said:

Any idea how to do the navigation or snapping to closest image?

I figured out the navigation, but don't know how to properly write the snapping.

[How to set correct value for progress?]

7 hours ago, Cassie said:

It would be great to know whether you need help with a Draggable carousel like this one from your last thread
 

 

 

Or a carousel that's using observer to scroll and drag like this pen you've forked for this thread.
 

 

 

What you're attempting is quite tricky and these two pens have different approaches and will have different solutions. Do you need scrolling functionality or just dragging?

 

 

Any idea how to do the navigation or snapping to closest image?

[Why does onUp not work?]

5 hours ago, Cassie said:

 

That's exactly what I suggested here yesterday - It seems like we're going around in circles and covering the same ground in multiple threads at the moment.

 

Well, for some reason I understood it better from this person and managed to do it

[How to set correct value for progress?]

3 hours ago, Cassie said:

It would be great to know whether you need help with a Draggable carousel like this one from your last thread
 

 

 

Or a carousel that's using observer to scroll and drag like this pen you've forked for this thread.
 

 

 

What you're attempting is quite tricky and these two pens have different approaches and will have different solutions. Do you need scrolling functionality or just dragging?

 

 

I'll be using an observer

[Why does onUp not work?]

2 hours ago, akapowl said:

 

As you can see from the logs I added in the onUp and onDown callbacks, Observer's onUp works just fine - what fails is your custom logic.

 

You are getting an error in console that points you to what is wrong

 

funcs[index] is not a function

 

If you log out the different indexes you are working with, you will notice that you are pointing towards an item of an array with a negative value for the index in multiple occasions, and arrays inherently do not have / work with negative indexes. So you will need to rework your logic with that regard, to make it work.

 

BTW, you have a typo in your Observer: targer --> target

 

 

 

 

 

Edit:

One suggestion I have is taking a look at GSAP's utility methods.

 

Here is an example of how you could e.g. use .wrap() to wrap around your variable value to the last one in your array, if it becomes negative. Click anywhere on the body in this example to decrease the variable I'm working with by 1.

 

 

 

 

 

... the wrapping also works in the positive direction, btw.

 

 

 

 

 

Thanks for the reply! Wrapping fixes most of it! My current issue is calling the timeline a second time. For example, when I call onDown, it does the animation, but when I call it again, it doesn't. I believe that that's an issue from calling a timeline twice? Could possibly be having issue with the reverse method. Any idea on how to fix it? Thanks! Please make sure to check out the updated codepen A Pen by George (codepen.io)

[How do I snap after scroll and snap from buttons]

On 1/23/2023 at 2:58 AM, Cassie said:

Well these are two separate questions really.

- snap to the closest position after drag

 

- spin to the corresponding position by pressing the li elements

 

I'm not all too sure how to help with snapping to a card after throwing. Maybe someone else can jump in!

I opened a new topic because I explained the problem more in detail there. Also I didn't get an answer here. I will ask once again, can you please not close my topic? It's not a duplicate as it is a different codepen with a similar issue, but not quite the same as it goes into more detail.

Take care!