Jump to content
GreenSock

tun712

Scroll to div on mouse scroll up/down

By tun712, in GSAP. Views: 41,160

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

Posted

Need help to scroll when mouse wheel is used. Scroll Up or Down as per mouse action.
I'm trying to create  moveUp() &   moveDown() function,  to scroll according mouse wheel action
On scroll, remove class of current div :- .active and add class :- .active to scrolled div (div in viewport), by default first div has class .active.

See the Pen zXZKYN by tun712 (@tun712) on CodePen

Link to comment
Share on other sites
Posted

Hi @tun712,

 

I really do not understand your intentions.
What should happen to the elements '.pane'?

 

Just for fun - maybe it fits into your concept - here's a forked version of @Shaun Gorneau`s smart version 'pseudo-window' and scroll:

 

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

 

 

Happy tweening ...

Mikel

  • Like 4
Link to comment
Share on other sites
  • Author
Posted

check following link, one page scroll

I'm trying to create something like this, as I have many animations as per clients needs.

 

Go from one section or div to other with single mouse scroll, it may be upwards or downwards .

Link to comment
Share on other sites
Posted

Here's the vertical version of my demo:

See the Pen MzWzyv by PointC (@PointC) on CodePen

 

Maybe that'll give you some ideas. Happy tweening.

 

  • Like 4
Link to comment
Share on other sites
  • Author
Posted

@both Thanks

 

@mikel   I'm using jquery-3.4.0.min for my other code,

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

code is not working with jquery-3.4

 

 

@PointC  In your

See the Pen YRzRyM by PointC (@PointC) on CodePen

  how to hide previous - next arrows for first & last slide?

 

Using both sliders for my project, thanks.

Link to comment
Share on other sites
  • Author
Posted

I have 10 <span> elements on each slide. How to animate even & odd elements on scroll complete?

 

For e.g. On scroll complete animate even <span> from top to center & odd <span> from bottom to center

Link to comment
Share on other sites
  • Author
Posted

It's like following ,

 

<span>H</span>

<span>E</span>

<span>L</span>

<span>L</span>

<span>O</span>

<span>T</span>

<span>H</span>

<span>E</span>

<span>R</span>

<span>E</span>

Link to comment
Share on other sites
Posted
8 hours ago, tun712 said:

code is not working with jquery-3.4

 

That demo was made 5 years ago and uses an old version of jQuery. Lots of things have probably changed in that time and it would be beyond the scope of the GreenSock forum to hunt down the differences.

 

8 hours ago, tun712 said:

  how to hide previous - next arrows for first & last slide?

 

You'd need to add some logic to see if you're on the first or last slide. If on the first, you can set or tween the opacity of the left arrow to 0. If on the last, you'd do the same to the right arrow.

 

8 hours ago, tun712 said:

How to animate even & odd elements on scroll complete?

 

You'd need a listener to check when the slide is in position and then play a tween/timeline. To alternate even and odd, check out the cycle property of staggers.

https://greensock.com/docs/TimelineMax/staggerFrom()

 

Happy tweening.

  • Like 1
Link to comment
Share on other sites
  • Author
Posted

Thanks

 

Just one problem, how to make it work with jquery-3.4 ?

Link to comment
Share on other sites
Posted

Sorry, I have no idea. As I mentioned, jQuery has probably changed a lot in 5 years. You'd need to go back through that demo and find out which part of the jQuery dependency makes it break when using 3.4.

 

You could also look at converting it to not use jQuery. This site can help with that.

http://youmightnotneedjquery.com/

  • Like 1
Link to comment
Share on other sites
Posted

Hi @tun712,

 

As @PointC mentioned its an 'old' example.

 

But there are 'helpers': https://github.com/jquery/jquery-migrate/#usage

 

NOTE: To upgrade to jQuery 3.0, you first need version 1.12.x or 2.2.x. If you're using an older version, first upgrade to one of these versions using jQuery Migrate 1.x, to resolve any compatibility issues. For more information about the changes made in jQuery 3.0, see the upgrade guide and blog post.

 

Best regards

Mikel

 

 

  • Like 1
Link to comment
Share on other sites
Posted

Hi @tun712,

 

Here's a first try with jquery 3.4 ...

 

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

 

 

But you should test it thoroughly!

 

Kind regards

Mikel

 

 

  • Like 3
Link to comment
Share on other sites
  • Author
Posted

@ Mikel

 

Hey Mikel,

Thanks a lot,  you tried with jquery 3.4. I've not tested it  with my code yet, but I'll check it.

 

I was working with your previous code for Horizontal slider

Is it possible to help  with this?

 

https://codepen.io/anon/pen/ZZrvVR

Link to comment
Share on other sites
Posted

Hi @tun712,

 

Here is a modification for a horizontal scroll function:

 

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

 

 

Happy scrolling ...

Mikel

 

 

  • Like 2
Link to comment
Share on other sites
Posted

I just made this as an answer to another forum question, but it may help. It's just a basic starter for full screen slides with a wheel listener. No jQuery necessary. ;)

 

See the Pen EJWpry by PointC (@PointC) on CodePen

 

Happy tweening.

  • Like 1
Link to comment
Share on other sites
  • Author
Posted

@both Thanks ! ?

Horizontal is not tried yet, working on vertical. It's working with  jquery 3.4. 

 

But I've little problem, I'm unable to add or remove class active to nav li a 

 

var  $navButtons =   $("ul.nav li a").filter("[href^=#]");  this is not working for me. Below is my code to add navigation, please check

  

	var navList = "";

	$(".slide").each(function (i) {		
		navList += "<li><a href='#" + (i + 1) + "' class='slide-" + (i + 1) + "'></a></li>";
	});

	if ($('ul.nav').length < 1) {
		$("<ul class='nav'></ul>").prependTo($(".slides-container").parent());
	}
	
	$('ul.nav').html(navList);

	$("ul.nav li a").on('click', function (e) {
      e.preventDefault();
    });

 

 

 

Now I've little simplified scrolling code to find out problem, please check below

  

var $window = $("section");
var $navButtons = $("ul.nav li a");
var $slidesContainer = $(".slides-container");
var $slides = $(".slide");
var $currentSlide = $slides.first();	
//Animating flag - is our app animating
var isAnimating = false;
//The height of the window
var pageHeight = $window.innerHeight();
//Going to the first slide
goToSlide($currentSlide);
/**Adding event listeners**/
$window.on("mousewheel DOMMouseScroll", onMouseWheel);
/**When user scrolls with the mouse, we have to change slides**/
function onMouseWheel(event)
{
  //Normalize event wheel delta
  var delta = event.originalEvent.wheelDelta / 30 || -event.originalEvent.detail;
  //If the user scrolled up, it goes to previous slide, otherwise - to next slide
  if (delta < -1)
  {
    goToNextSlide();
  } else
  if (delta > 1)
  {
    goToPrevSlide();
  }
  //event.preventDefault();
}
/**If there's a previous slide, slide to it**/
function goToPrevSlide()
{
  if ($currentSlide.prev().length)
  {
    goToSlide($currentSlide.prev());
  }
}
/**If there's a next slide, slide to it**/
function goToNextSlide()
{
  if ($currentSlide.next().length)
  {
    goToSlide($currentSlide.next());
  }
}
/**Actual transition between slides**/
function goToSlide($slide)
{
  //If the slides are not changing and there's such a slide
  if (!isAnimating && $slide.length)
  {
    //setting animating flag to true
    isAnimating = true;
    $currentSlide = $slide;	 
	  
	//Sliding to current slide
    TweenMax.to($slidesContainer, 1, { scrollTo: { y: pageHeight * $currentSlide.index() }, onComplete: onSlideChangeEnd, onCompleteScope: this });   
	TweenMax.fromTo(".title span:nth-child(even)", 1, {y: "50%",opacity: 0}, {ease:SlowMo.ease.config( 0.4, 0.4),y: "0%",opacity: 1});
	TweenMax.fromTo(".title span:nth-child(odd)",1, {y: "-50%",opacity: 0}, {ease:SlowMo.ease.config( 0.4, 0.4),y: "0%",opacity: 1}); 	
  }
}
/**Once the sliding is finished, we need to restore "isAnimating" flag. You can also do other things in this function, such as changing page title**/
function onSlideChangeEnd()
{
  isAnimating = false;
}

 

 

Is it possible to convert nav li a into, 

<div  class="nav">

      <div  class="slide-1">Slide 1</div>

      <div  class="slide-2">Slide 2</div>

      <div  class="slide-3">Slide 3</div>

      <div  class="slide-4">Slide 4</div>

</div>

 

Link to comment
Share on other sites
  • Author
Posted

@both Thanks ! ?

 

Horizontal scroll is working with jquery 3.4.   Need little help to add prev & next button for both  horizontal demo. My code is not working,

  

$(".btnPrev").on('click', function(e) {
    e.preventDefault();
    goToPrevProject();
    if (?????) {
        $(".btnPrev").addClass("hide");
    } else {
        $(".btnPrev").removeClass("hide");
    }
});
$(".btnNext").on('click', function(e) {
    e.preventDefault();
    goToNextProject();
    if ((?????)) {
        $(".btnNext").addClass("hide");
    } else {
        $(".btnNext").removeClass("hide");
    }
});

 

Link to comment
Share on other sites
Posted

It's difficult to continue offering assistance and troubleshooting your project without a demo and just looking at a pasted wall of code.  It's usually best to fork your own demo each time you have a new question so anyone helping you can see the progress you've made on your own. It also should not be your whole project. Just enough to demonstrate the problem/question. 

 

Thanks.

  • Like 2
Link to comment
Share on other sites
Posted

Hey  @mikel, how can i make this 

slide in horizontal? Not from the top to the bottom? I would really appreciate it !

 

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

 

Link to comment
Share on other sites
Posted

Hi @Arianna,

 

Welcome to the GreenSock Forum.

 

As a little Easter egg, here is this version

 

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

 

 

Happy tweening ...

Mikel

 

 

  • Like 4
Link to comment
Share on other sites
  • 2 weeks later...
Posted

hello, 
I am totally new here so sorry if this is off topic but I saw this is kinda related to sliding and stuff I am facing this problem which I can't solve. I hope someone can help me. 

Need help to scroll when the mouse wheel is used. I want to have some accordion images and want them to span horizontally by mouse wheel to their 100% width. I have no idea why my code is not working at all.


See the Pen oRvjGr#code-area by nargess-shabani (@nargess-shabani) on CodePen

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account