Jump to content
Search Community

How to set correct value for progress?

FrEZ test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

  • Cassie locked this topic
  • Cassie unlocked this topic

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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


 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...