bootstrap007

Thanks, @akapowl this is exactly what I am looking for. ?

Hi All, As you can see in the Codepen demo that the hamburger menu is working fine if user clicks on the menu icon. However, what I am looking is to close the burger menu with the same reverse animation if user clicks on any of the hyperlinks before proceeding to the nextpage/link. Can anyone please let me know how to do it? menu test (codepen.io) $('.hamburger').on("click", function(e){ $('.hamburger.active').not(this).removeClass('active'); $(this).toggleClass('active'); }); var $hamburger = $('.hamburger'); gsap.set('.line01',{x:40}); gsap.set('.line03',{x:-40}); //gsap.set('.navigation',{xPercent:-50, yPercent:-50}) gsap.set('.navigation li',{x:0, opacity:0}); var hamburgerMotion = gsap.timeline(); hamburgerMotion.to('.line03',0.4,{x:'-=40'},0) hamburgerMotion.to('.line01',0.4,{x:'+=40'},0) hamburgerMotion.to('.menu',0.4,{autoAlpha:1},0) hamburgerMotion.staggerTo('.navigation li',0.4,{y:-30, opacity:1, ease: "sine.out"},0.2,0.5) //hamburgerMotion.to('.navigation li',1,{marginBottom:'40px', ease: Power1.easeOut}) hamburgerMotion.from('.getintouch',.8,{y:30, opacity:0, ease: "sine.out"}) hamburgerMotion.reverse(); $hamburger.on('click', function(e) { hamburgerMotion.reversed(!hamburgerMotion.reversed()); }); $('.menu-links').on("mouseover", function (e){ gsap.to($(this), .4, {x:20, ease: "sine.out"}); }) $('.menu-links').on("mouseout", function (e){ gsap.to($(this), .4, {x:0, ease: "sine.out"}); }) $(".hamburger").on("click", function (e) { if ($(this).hasClass("active")) { $(".cursor-follower").addClass("reverse"); } else { $(".cursor-follower").removeClass("reverse"); } });

Thanks @OSUblake @GreenSock

OSUblake Do you have a code reference or example?

OSUblake One more question on this topic. How to control the speed of each slides/images? In the codepen demo the speed looks perfectly fine. But when I added this to the project then all the images/slides are sliding away on a single scroll. Any solutions for that? Possible to slow down the sliding speed on scrolling?

Thanks OSUblake Really appreciate it. ?

OSUblake Added the CodePen Demo and as you can see the Error in the console.

Hi All, I know this might be very simple question for most of you to answer. But I couldn't find any proper answers from the search. The issue is that I am getting "Uncaught SyntaxError: Identifier 'tl' has already been declared" error If I have multiple timelines. How to fix it? https://codepen.io/bootstrap007/pen/dyRyYWg The below is the code: gsap.registerPlugin(ScrollTrigger); let container = document.querySelector(".portfoliomob"); let tl = gsap.timeline({ scrollTrigger: { pin: true, scrub: 1, scroller:'[data-scroll-container]', trigger: container, end: () => container.scrollWidth - document.documentElement.clientWidth }, defaults: { ease: "none", duration: 1 } }); tl.to(".parallaxhead", { x: 300 }) tl.to(".panelmob", { x: () => -(container.scrollWidth - document.documentElement.clientWidth) }, 0) tl.from(".secondAn", { opacity: 0, scale: 0.5, duration: 0.2, stagger: { amount: 0.8 } }, 0); tl.from(".firstAn", { duration: 1, opacity: 0, scale: .5, scrollTrigger: { trigger: container, start: "top 90%", end: "bottom 10%", toggleActions: "play none none reverse" } });

Thanks OSUblake & GreenSock (Jack) I have actually used a dummy tween before the next animation happens/take place and it was working fine. But then I thought there must be a proper way to do it something like a delay function for scrolltrigger. Thanks to you both.

Hi, As you can see that the yellow color box is animating to the screen from the left side then the Green color box came on top of the yellow box. But the green box is immediately animating away from the screen without staying there for few seconds even if the user scrolls. So is there a delay function even if the user scrolls continuously the green box should stay on top of the Yellow box for some time then it can animate and go away from the screen. Any help would be highly appreciated. https://codepen.io/bootstrap007/pen/bGWJEWX Thanks

Thanks @GreenSock (Jack). Really appreciate it. ?

Hi, As you can see from the CodePen demo that ScrollTrigger animation (two boxes in Yellow and Green color) is not working after adding LocomotiveScroll. Can anyone please let me know what's wrong with the code. https://codepen.io/bootstrap007/pen/MWmxJog Thanks

OSUblake Thanks, It's working fine now. Just a quick question. How can I make those boxes exactly in the center of the viewport by using percentage value instead of PX?

Hi, As you can see from the Codepen demo that ScrollTrigger animation is visible on the viewport only after scrolling down the page. Please refer to the attached screenshot for reference. How to make the viewport stay remain in the same position until the animation completes and clearly visible on the viewport then the page can scroll down further like in ScrollMagic? Same like the (https://scrollmagic.io/) Hat and then the magic stick is coming down with some effect then the text animation then after that only the viewport scrolls down.

Ah, Got it. Thanks mikel for the help and support?