Jump to content
Search Community

Slide in and out not working well

Bigtreat test
Moderator Tag

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

Hi , guys i create a slider , in which i am first

 

check out the attachment , the problem is with my slideout , my first slide animation is  from top to bottom and second slide animation is bottom to top ,

user can decide the slide animation duration through html , the problem is with slide out animation 

 

there is a gap between slides , if user not set  the same animation speed for slide in and slide out 

 

, i check out revolution slider , then i noticed there is no slideout animation option which user can set , 

so how its work ?

 

how revolution slider slideout the animation ?? please help me to complete my slider 

https://www.themepunch.com/revslider-doc/slide-animation/

 

 

 

 

 

 

 

slider .zip

Link to comment
Share on other sites

It's a bit tough to understand the issue you're facing. I'm going to try to break it down to see if I understand correctly.

 

You have an environment where the HTML author can determine the speed and direction of a slide's movement both onto and off of the viewing area. I'm assuming with data-attributes on the slide element ... example

 

<div class="slide" data-direction="left-to-right" data-slide-speed=".5"></div>

 

If the user has a faster timing on the out-slide than that of the in-slide, there will be a noticeable separation of the two while they both tween to their new positions.

 

Am I understanding correctly?

Link to comment
Share on other sites

5 minutes ago, Shaun Gorneau said:

It's a bit tough to understand the issue you're facing. I'm going to try to break it down to see if I understand correctly.

 

You have an environment where the HTML author can determine the speed and direction of a slide's movement both onto and off of the viewing area. I'm assuming with data-attributes on the slide element ... example

 


<div class="slide" data-direction="left-to-right" data-slide-speed=".5"></div>

 

If the user has a faster timing on the out-slide than that of the in-slide, there will be a noticeable separation of the two while they both tween to their new positions.

 

Am I understanding correctly?

Yes You are correct :)

 

Link to comment
Share on other sites

Well, I would just do a quick comparison of the in-slide's speed value and the out-slide's speed value ... and set the out-speed to the in-speed if out is greater than in. Or, just have the configuration speed only control in-speed ... and that same value always dictates the out-slides speed.

Link to comment
Share on other sites

19 minutes ago, Shaun Gorneau said:

Well, I would just do a quick comparison of the in-slide's speed value and the out-slide's speed value ... and set the out-speed to the in-speed if out is greater than in. Or, just have the configuration speed only control in-speed ... and that same value always dictates the out-slides speed.

ok thats sounds great , but there is a problem in my code related to gsap ,  there is function name , runSlide which handle the slide in and elements in animation , which working fine and another function name finishslide which handel element out and slide out , as you can see in my file html , elements in are come in sequence and element out are going all togther why its happend i am able to understand , in finishslide function (jquery.slider.js ) ,

 

please take a look 

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...