How to set correct value for progress?

[FrEZ 0 Likes (Newbie)]

Hello,

I tried wrapping p, so that when I click on the buttons it seeks a near value, rather than spinning going to it, but it spins all the spins made until it finds it. How do I make it spin till it finds it without spinning a thousand times(try after grabbing and throwing).

 

Also can't figure out how to make the carousel snap to the nearest element. I would be grateful for that help as well.

 

Take care!

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

[Cassie 5,099 Likes (Superhero)]

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

See the Pen KKBQWbV?editors=0110 by GreenSock (@GreenSock) on CodePen

 

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

See the Pen BaJKyyz?editors=0010 by supah (@supah) on CodePen

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?

[FrEZ 0 Likes (Newbie)]

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

[FrEZ 0 Likes (Newbie)]

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?

[FrEZ 0 Likes (Newbie)]

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.

[Cassie 5,099 Likes (Superhero)]

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!

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

 

[FrEZ 0 Likes (Newbie)]

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.

[Cassie 5,099 Likes (Superhero)]

If the scrolling is a little jumpy on scroll I assume it's because you're using a mousewheel? So it's jumping in increments?

A few options - 

You could add a smooth scrolling library to even this out

Rewrite this to use scrollTrigger instead of observer so you can make use of scrub values to smooth the animation

Write some custom logic to smooth out the values you're getting from observer before plugging them into the tween

Possibly use a to tween with a short duration instead?

Each of these routes will involve some trial and error and some testing - 

This article may be of use. This was put together from a lot of back and forth in the GSAP forums and might be a good baseline approach for what you're attempting.

https://css-tricks.com/going-meta-gsap-the-quest-for-perfect-infinite-scrolling/

 

Alternately if you want someone to help build this out for you to spec you can post in the GSAP jobs/freelance forums!