Jump to content
Search Community

tun712

Members

  • Posts

    17

  • Joined

  • Last visited

 Content Type 

Posts posted by tun712

    Scroll to div on mouse scroll up/down

    in GSAP

    Posted

    Great!!!

    Thanks, finished project with this help.

     

    @Mikel vertical scroll  Just little problem if down scroll occurs on last slide it scrolls in reverse direction at once.

     

    Once I posted my Tween question to daniweb and got suggestion to post it on GreenSock Forum. With uncertainty about reply I started posting questions on GreenSock Forum.  And it's working well.

     

    These two Forums are really really very helpful ?

    Scroll to div on mouse scroll up/down

    in GSAP

    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");
    }
});

     

    Scroll to div on mouse scroll up/down

    in GSAP

    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>

     

    Scroll to div on mouse scroll up/down

    in GSAP

    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

    Scroll to div on mouse scroll up/down

    in GSAP

    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

×
×
  • Create New...