landing slider move base on mouse direction left/right and stop

[jitu]

Hello,

 

I am trying to create similar "Landing slider" as like reference website url "www.mountaindew.com/". I have done Some of "Linding slider" part. but there is still some work need to complete.

 

could you please help out ? to add following kind of functionality mouse event on "Landing slider".

 

I want to be add mouse event. How ever if user mouse over on "Linding slider".Base on mouse direction left /right "Linding slider" should be move.

and also it should be stop. if user stop  mouse direction at any point of width landing slider.

 

Thanks,

Jitu

See the Pen qaGjvp by tinhh (@tinhh) on CodePen

[Jonathan]

Hello jitu, and welcome to the GreenSock Forum

 

Another way using the GSAP ScrollToPlugin:

 

I created separate events for hover and mousemove.

• Hover events (mouseeneter/mouseleave) for the box up and down animation
• Mousemove event for the scroll animation. I check the .landing-inner-content elements clientX and see if it is greater than half of the .landing-wrapper containers width. So you can detect whether to auto-scroll left or right.

Also you will notice I am using GSAP TimelineMax and the GSAP ScrollToPlugin. This way you are not creating multiple tweens on each hover. There is only one tween created and you just simply play and reverse when you hover in and out. I am also animating y (translateY) instead of animating the bottom property. So this way it animates smoother and on a sub-pixel level. Whereas animating top and bottom or left and right animate only on a pixel level which is choppy

 

Your example modified to auto-scroll:

 

See the Pen avPaWq by jonathan (@jonathan) on CodePen

 

And here is another more basic example of only auto-scrolling using the GSAP ScrollToPlugin:

 

See the Pen QjzZpO by jonathan (@jonathan) on CodePen

 

var $landingWrapper = $(".landing-wrapper"),
    $landingInnerContent = $(".landing-inner-content");

var tl = new TimelineMax({paused:true});
tl.staggerTo(".box", 0.4, {y: -100}, 0.1);

// animate boxes up and down 
$landingInnerContent.on("mouseenter", function() {
  tl.play();  
}).on("mouseleave", function() {
  tl.reverse();
});

// scroll left and right
$landingInnerContent.on("mousemove", function(e) {
   // check if .landing-inner-content clientX is greater than half of the .landing-wrapper width
   if(e.clientX > $landingWrapper.width() / 2){
     TweenMax.to($landingWrapper, 2, {scrollTo:{x:"+=200"}, ease:Power2.easeOut});
   } else {
     TweenMax.to($landingWrapper, 2, {scrollTo:{x:"-=200"}, ease:Power2.easeOut});
   }
});

I had to adjust your CSS to accommodate for the scroll effect you were after. You were animating the elements outside the main scroll div, so i had to increase the height of the main scroll div, so when overflow hidden is applied you can still see your boxes. This is due to the very nature of scrolling in CSS.

 

So you will notice in the CSS I added heights to your .landing-wrapper and .landing-inner-content CSS rules. This so they are positioned correctly for cross browser. You should always define your height especially when nesting divs. If you don't specify a height then you will need to clear your divs to prevent collapsing. To clear you would use the CSS property clear:both after your inner div. You would need to add a clearfix. Meaning adding a CSS rule that would use the :after pseudo-element so the landing-inner-content class inherits the height of its parent. But just for time sake i just added heights and just increased the amount of the bottom position value.

 

Also when binding events, you shouldn't mix mouseover and mouseleave. I would either use mouseover with mouseout. Or just use mouseenter with mouseleave. This way the hover events will work the same when hovering in and out, since mouseover and mouseout will use event bubbling, Whereas mouseenter and mouseleave do not use event bubbling. Meaning mouseenter and mouseleave will trigger when you hover over the selected element.  But mouseover and mouseout event will also trigger if you hover over any of their child elements.

 

Keep in mind i could have also used the GSAP Draggable Plugin which actually would be better because i could tap into the already mobile touch events packaged into Draggabble.

 

Your example again using GSAP Draggable so it works on mobile as well:

 

See the Pen xwmQKG by jonathan (@jonathan) on CodePen

 

This basic example uses GSAP Draggable to move your elements on drag and works on mobile:

 

See the Pen ojJaOx by jonathan (@jonathan) on CodePen

 

var $landingWrapper = $(".landing-wrapper"),
    $landingInnerContent = $(".landing-inner-content");

var tl = new TimelineMax({paused:true});
tl.staggerTo(".box", 0.4, {y: -100}, 0.1);

// animate boxes up and down 
$landingInnerContent.on("mouseenter", function() {
   tl.play(); 
}).on("mouseleave", function() {
   tl.reverse();
});

Draggable.create(".landing-inner-content", {
   type: "x",
   bounds: ".landing-wrapper",
   throwProps: true
});

I also noticed your images are larger than the size of your boxes. Your boxes are around 200px, but the actual images size is 500px by 500px. You might want to reduce and optimize your images so they are the actual size of your div boxes. Anytime you animate images it can be a expensive performance wise. So its best to optimize them so their file size is as small as possible. And that there dimensions fit the largest size you need them at. So you can prevent jank (lost frames) when animating.

 

I would have set this up differently CSS wise. But it should get you at least in the right direction and good starting place.

 

GSAP ScrollToPlugin : http://greensock.com/docs/#/HTML5/Plugins/ScrollToPlugin/

GSAP Draggable Plugin: http://greensock.com/docs/#/HTML5/Utilities/Draggable/

 

[jitu]

Hi Jonathan,

 

Thank you so much.

[jitu]

Hi Jonathan, 

 

Mouse move left and stop moving  "Landing slider" function works fine but there are issue with mouse  move right and stop 'moving 'Landing slider " in between.
it goes auto move until end of right width. could you please help me out.? to stop auto move right side.

 

 

See the Pen avPaWq by jonathan (@jonathan) on CodePen

[Jonathan]

It doesnt move left until you move right because the container is positioned all the way to the left onload.

 

You would have to position the container like half its width onload, so when you first hover you can move left or right:

// set initial container to half of .landing-inner-content width
TweenMax.set($landingWrapper, {scrollTo: {x: $landingInnerContent.width()/4}, ease: Power2.easeOut});

Try this, i updated my codepen:

 

See the Pen avPaWq by jonathan (@jonathan) on CodePen

 

var $landingWrapper = $(".landing-wrapper");
var $landingInnerContent = $(".landing-inner-content");

var tl = new TimelineMax({paused: true});
tl.staggerTo(".box", 0.4, {y: -100}, 0.1);

// animate boxes up and down 
$landingInnerContent.on("mouseenter", function() {
   tl.play();
}).on("mouseleave", function() {
   tl.reverse();
});

// set initial container to half of .landing-inner-content width
TweenMax.set($landingWrapper, {scrollTo: {x: $landingInnerContent.width()/4}, ease: Power2.easeOut});

// scroll left and right
$landingInnerContent.on("mousemove", function(e) {
  if (e.clientX > $landingWrapper.width() / 2) {
    TweenMax.to($landingWrapper, 2, {
      scrollTo: {
        x: "+=200"
      },
      ease: Power2.easeOut
    });
  } else {
    TweenMax.to($landingWrapper, 2, {
      scrollTo: {
        x: "-=200"
      },
      ease: Power2.easeOut
    });
  }
});

[jitu]

Hello,

 

I have review that update one. But still there is issue when I visit first time webpage it first two slides goes offset and when I try to stop move at slide no 7 or any middle slide it doesn't stop auto move. I am testing on desktop device only.

 

Can you refer the refrance website "www.mountaindew.com" I would like to create a same mouse move and stop function on top of our "landing slider"

[Jonathan]

jitu,

 

I really can't just build the mountaindew website effect for you. If i did i would have to rewrite all your HTML markup and CSS to it properly. I was just using your HTML and CSS to show you how you could achieve something similar based on your original HTML and CSS.

 

It is not really a GSAP question. But more of an implementation of JavaScript events, CSS, and HTML.

 

I have spent the better part of the day helping you with this. I am sorry, but you will have to spend the time and create that effect on your own. We have to focus on helping people with GSAP specific questions and how to use the GSAP API. And not spend time creating or mimicking entire effects or animations of other websites for you.

 

If you have a question regarding GSAP I will be happy to help you! But we have to focus on GSAP specific questions.

 

Thanks!

[jitu]

Hi Jonathan,

 

Really thanks to you for help me. Can you just give me example of tween kill. I was thinking that way may be possible to fix way.

[Jonathan]

You can find all these kill methods in the GSAP Docs page. Just use the search field in the left sidebar:

 

http://greensock.com/docs/#/HTML5/

 

Here is a list of available kill methods:

_________________________________________________________________

 

kill()

 

Kills the animation entirely or in part depending on the parameters.

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/kill/

//kill the entire animation:
myAnimation.kill();

//kill only the "x" and "y" properties of the animation (all targets):
myAnimation.kill({x:true, y:true});

//kill all parts of the animation related to the target "myObject" (if the tween has multiple targets, the others will not be affected):
myAnimation.kill(null, myObject);

//kill only the "x" and "y" properties of animations of the target "myObject":
myAnimation.kill({x:true, y:true}, myObject);

//kill only the "opacity" properties of animations of the targets "myObject1" and "myObject2":
myAnimation.kill({opacity:true}, [myObject1, myObject2]);

_________________________________________________________________

 

killAll()

 

Kills all tweens and/or delayedCalls/callbacks, and/or timelines, optionally forcing them to completion first.

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/killAll/

//kill everything
TweenMax.killAll();
//kill only tweens, but not delayedCalls or timelines
TweenMax.killAll(false, true, false, false);
//kill only delayedCalls
TweenMax.killAll(false, false, true, false);

_________________________________________________________________

 

killChildTweensOf()

 

Kills all tweens of the children of a particular DOM element, optionally forcing them to completion first.

 

http://api.greensock.com/js/com/greensock/TweenMax.html#killChildTweensOf()
 

<div id="d1">
   <div id="d2">
     <img src="photo.jpg" id="image" />
   </div>
</div>
<div id="d3"></div>

TweenMax.to( document.getElementById("d2"), 1, {css:{left:100}});
TweenMax.to( document.getElementById("image"), 1, {css:{left:100}});
TweenMax.to( document.getElementById("d3"), 1, {css:{left:100}});
//only kills the first 2 tweens because those targets are child elements of the "d1" DOM element.
TweenMax.killChildTweensOf( document.getElementById("d1") );

_________________________________________________________________

 

killTweensOf()

 

Kills all the tweens (or specific tweening properties) of a particular object or the delayedCalls to a particular function.

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/killChildTweensOf/

TweenMax.killTweensOf(myObject);

TweenMax.killTweensOf(myObject, {opacity:true, x:true});

_________________________________________________________________

 

You could use any of the above GSAP methods to kill the animation in part or entirely depending on the parameters and what method you use.

 

[jitu]

Need your  help to insert Gsap x direction Tween

 

Hi Jonathan,

 

Your  hope really help to me  create "Landing slider" mouse event. As we had earlier discussion.  I  would like to  extend topic "Landing slider". Resently i found "javascript" which detect the mouse direction left /right  and stop and i have impliment in our topic "Code Pen" Js file. I just need your help to impliment into that event GSAP x direction API. Those  insert pleases  I have commented "Please insert the Tween ". Hope you will help me.

 

Please go through below Code pen URL.

 

Code pen URL : "

See the Pen YydBQX by jahagirdar (@jahagirdar) on CodePen

 

Advance in Thanks..!

[hahuutin]

Hello,

 

Can you help me add feature is infinite scrolling?

[Carl]

hi hahuutin,

 

this is a very old post. not sure what you need. It always helps if you can provide a demo that you are working on.

 

For infinite scrolling though, Blake has this example which you can drag and throw infinitely: http://codepen.io/osublake/pen/2716a24249f67d1179c5bdb0e9eb3489?editors=0010

 

it should help you see how to achieve that effect.

 

this post has more details too: http://greensock.com/forums/topic/14916-loop-draggable-carousel/

[hahuutin]

Hi Carl,

 

Firstly, thanks for your suggestion link about infinite scrolling, I will figure out it right now.

 

Secondly, this is my demo:  (this demo is the same with demo of Jonathan above)

 

And my expectation in this demo that is two things:

 

1. Infinite scrolling in both of direction left/right, I will have 10 items in HTML code, I wanna GSAP can clone item to create infinite scrolling. (I will figure out this follow as your suggestion above)

 

2. When I stopped mouse move then it seem that my tweenmax still auto scrollTo step by step. I wanna it will stop when mouse stopped.

 

I spent a couple days to handling these issues..but it's doesn't working as my expectation.

 

I hope that you will suggest for me some solutions for this, even if have a demo is awesome.

 

P/s: English is not native for me, please excuse any mistakes on my post!

 

Thank you so much!

[Carl]

When you detect that the mouse isn't moving you should be able to stop the scrolling with:

TweenMax.killTweensOf($landingWrapper);

http://greensock.com/docs/#/HTML5/GSAP/TweenLite/killTweensOf/

 

 

I'm not sure what the best and most efficient way to detect when the mouse stops moving. That's really not a GSAP thing, but I suspect StackOverflow will have some good tips.

 

 

Also, if you want infinite scrolling, I wouldn't use the scrollTo plugin. Better to just offset the x position of a nested div like in the demo I posted above.

[Guest olegfilth]

 

Need your  help to insert Gsap x direction Tween

 

Hi Jonathan,

 

Your  hope really help to me  create "Landing slider" mouse event. As we had earlier discussion.  I  would like to  extend topic "Landing slider". Resently i found "javascript" which detect the mouse direction left /right  and stop and i have impliment in our topic "Code Pen" Js file. I just need your help to impliment into that event GSAP x direction API. Those  insert pleases  I have commented "Please insert the Tween ". Hope you will help me.

 

Please go through below Code pen URL.

 

Code pen URL : "

See the Pen YydBQX by jahagirdar (@jahagirdar) on CodePen

 

Advance in Thanks..!

 

Man, if you find a way to complete this, tell me please, I need a same thing

[OSUblake]

I made a couple of demos in this thread for detecting when the mouse stops moving based on a timer. Here's the most recent demo from that thread.

 

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

 

That's similar to a debounce function, like one used in lodash or underscore.

https://lodash.com/docs/4.16.6#debounce

[jitu]

Hello,

 

Here are below URL. Which  i have created my won way bottom of the page "Landing Slider". Please have a look

 

https://www.eno.co.in

 

Soon I will update my code on this  http://greensock.com/  forum..! 

[Tigran2]

Hello everyone!

Luckily found this tread:)

I`d like to replicate the slider acceleration effects on mouse movement at the corners of document implemented in  https://99designs.com/ . The stupid thing is I can`t observe DOM changes inside  <div data-scrollable="examples"> </div>

Any ideas or hints to achieve the same effect are welcomed and appreciated! 

Thanks in advance!

[kuldpsingh786]

Hi thanks for brilliant work, but i have a issue user needs to click on the box but the boxes movement is too fast and hard to click the cta,

so can we slow down the movement.

here working link : http://www.codinggang.com/holiday-channel/

Please advice and help me.

 

here is the code i'm using.

http://prntscr.com/rh6fon

Thanks!

[ZachSaucier]

Hey @kuldpsingh786 and welcome to the GreenSock forums. 

 

You're much more likely to get a helpful response if you create a new thread, explain your issue clearly, and create a minimal demo of the issue using something like CodePen. You can read more about how to do so in the thread below:

 

Happy tweening!