Jump to content
Search Community

tun712

Members
  • Posts

    17
  • Joined

  • Last visited

Everything posted by tun712

  1. 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 ?
  2. @PointC Thanks Vertical https://codepen.io/tun712/pen/jRKWxb Horizontal https://codepen.io/tun712/pen/MRXKZp
  3. @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"); } });
  4. @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>
  5. https://codepen.io/tun712/pen/ZZrvVR
  6. @ 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
  7. Thanks Just one problem, how to make it work with jquery-3.4 ?
  8. 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>
  9. 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
  10. @both Thanks @mikel I'm using jquery-3.4.0.min for my other code, Fullscreen slides with GSAP code is not working with jquery-3.4 @PointC In your Horizontal full-screen slider how to hide previous - next arrows for first & last slide? Using both sliders for my project, thanks.
  11. 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 .
  12. 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.
  13. Thanks for reply. I've done this using your code, but I was trying to do something like in image Three elements moving in rectangular path one after each other. In image there is black border, which is path and three red lines are elements - suppose snakes - chasing each other , moving around path
  14. Thanks Gone through your post but, as I'm very new to GSAP I've difficulties in creating animation. I want to create very simple animation. I've created here , would you please edit it? Would you like to help me to create animation? Also I found another example here : https://codepen.io/GreenSock/pen/qEdoRE
  15. I'm trying to create seamless loop of animated border. svg rect is moving in rectangular path but it stops for a while before repeating The example can be seen here: https://codepen.io/anon/pen/qMJENG It should work like this, https://codepen.io/anon/pen/VGEYEa Here’s an example for different shape
×
×
  • Create New...