Jump to content
GreenSock

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

Slider to work with tweenMax for better slides animation

Recommended Posts

Hi!

pls advice some slider to work with tweenmax (animatinf slide elements upon elemnts get visible).

I've tried swiper and pagepiling.

 

PS sorry for bad Eng.

Share this post


Link to post
Share on other sites

Hello and welcome to the forums!

 

Please check out this thread for a very useful slider implementation by our very own Craig (PointC):

 

 

If you have a particular error that you'd like us to help you solve, please make a minimal demo using something like CodePen so that we can see your code and be able to help you more easily. For more information about that, check out this thread:

 

 

Happy tweening!

  • Like 2

Share this post


Link to post
Share on other sites

hi @creative_routine;

 

Welcome to the GreenSock Forum.

 

Here is the quite simple fade version:

 

See the Pen gNgLgO by mikeK (@mikeK) on CodePen

 

Or, if it should run with animated action:

 

See the Pen mgLLWa by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

Share this post


Link to post
Share on other sites

@mikel Realy appreciate your  this answer

See the Pen mgLLWa by mikeK (@mikeK) on CodePen

 

But this is not working on mobile device. It's not sliding.  Can you help me out?

Share this post


Link to post
Share on other sites

Hey @hybreeder. Maybe this thread can help you:

 

Share this post


Link to post
Share on other sites

@mikel Yes, I checked. I added that code in my script but it's not working on mobile device. I mean in mobile device slider is not working using touch.

 

Using click navigation working  but swipe not working.

Share this post


Link to post
Share on other sites

Hey @hybreeder,

 

For my neighbor, the cobbler, I created this web a long time ago - and it also runs on the iPhone.

 

http://www.schustermasmann.imgrindelhof.de/

 

The swipe solution:

 


	$('.slides-container').swipe({
	swipe: function(event, direction) {
	  if (direction === 'up') {
		goToPrevSlide();
	  } else {
		goToNextSlide();
	  }
	}
	});

 

Try it ...

Mikel

 

  • Like 1

Share this post


Link to post
Share on other sites

@mikel, Thanks for the reply and swipe solution. I tried but I don't know what i doing wrong. I created code pen Please check this.

 

I have two issues

1) Swipe not working on mobile

2) In desktop: If I reach last slider which is "contact us" and swipe down 2-3 times more then swipe up is not working. I mean If swipe down 2-3 times then swipe up also I have to do 2-3 times then "contact us" selecting.  I think at the last slider swipe is still running. I have to stop swipe once reach last slider.

 

Please help me out with issue.

 

 

See the Pen ExYdqdQ by Narendra_verma (@Narendra_verma) on CodePen

Share this post


Link to post
Share on other sites

Hey @hybreeder,

 

Place homeDots and mouseHero outside of the slides container

 

See the Pen QWLJLgM by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

  • Thanks 1

Share this post


Link to post
Share on other sites

@mikel, Awesome!.. Thank you so much! my second issue got resolved. Have you tested the 1 issue? I am also using iPhone and checked but not working.

Share this post


Link to post
Share on other sites

 

Try to test it on your server. Not in an iframe like CodePen

Share this post


Link to post
Share on other sites

@mikel, Yes, I added code on server and tested but swipe not working.  Click event is working but swipe not working.

Share this post


Link to post
Share on other sites

@mikel, I added the plugin in the code . I got an error in console "TypeError: $document.touchwipe is not a function".

 

Also checked on mobile not working. Is this working from your side?

Share this post


Link to post
Share on other sites

@mikel, I found the console error issue

 

I change it from 

$document.touchwipe({ 

to

$document.swipe({

 

and console issue got resolved but still swipe not working on mobile

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×