Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
thaka

onPressed or onclick Stopping a carousel swipe position .

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello friends;

 

First of all my English is bad, so I apologize.

 

I'm new in GSAP world, I am studying a carousel Swipe provided by another member of the forum. following link:

 

https://codepen.io/bdang/pen/pJyYEO

 

My doubt be the next point, when you run the onPressed event in Draggable in the middle of execution of TweenMax, it overwrites the position x performed in transition by Tweenmax.to (), is there any possibility to disallow the onPressed or the default event while the animation TweenMax is active?

 

Thank you.

post-43636-0-87905500-1461123099_thumb.jpg

Share this post


Link to post
Share on other sites

There's a logic error in all the events. You need to rework how the activeID is set. Interrupting the animation negates the activeID, and does something with the 'item_next' class.

// This code is in all the events
if($(this).hasClass('item_next')) {activeID++}
else {activeID--};
    
navigateSlide();

You can prevent stuff from happening if a tween is running, but that's probably not the behavior you want because then you can't change directions or advance to the next slide. You'd have to wait until the animation was over.

  • Like 1

Share this post


Link to post
Share on other sites

Hi there, I know it's been a lot since this post was done but I've been using this code and I can't get the navigation looping, can you help me?

Share this post


Link to post
Share on other sites

HI @Underlog

Do you have a question relating to GSAP. As I understand it what you are asking is going to require re-writing a bunch of the logic to the demo you are referencing. That isn't something we created or support. We really need to keep our support focused on the GSAP API.

 

If you only had buttons controlling the images I would say that you could probably just detect when the activeID gets to the last image you can reset that value to 0 if they hit the next button again. When that happens you could just animate all the images fly by and you could show the first one again. If you are swiping left and you get to the last image (on the right) swiping left again would then have to cause all the images to fly by to the right to get to the first again and that would be super awkward. I think its going to be a considerable re-write of the code to have a smooth slider that infinitely and seamlessly loops as you keep swiping. 

 

@OSUblake has a great "bare bones" demo that probably does most of the hard stuff that you need.

 

 

See the Pen veyxyQ?editors=0010 by osublake (@osublake) on CodePen

 

also see this thread:

which includes this demo:

See the Pen ZOgGXB by osublake (@osublake) on CodePen

 

  • Like 2

Share this post


Link to post
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

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×