[GSAP hamburger menu should close if user clicks on hyperlinks]

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

 

[GSAP hamburger menu should close if user clicks on hyperlinks]

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

 

 

See the Pen ExQmbGN by bootstrap007 (@bootstrap007) on CodePen

[Getting "Uncaught SyntaxError: Identifier 'tl' has already been declared"]

Thanks @OSUblake  @GreenSock

 

[Getting "Uncaught SyntaxError: Identifier 'tl' has already been declared"]

OSUblake Do you have a code reference or example?

[Getting "Uncaught SyntaxError: Identifier 'tl' has already been declared"]

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?

[Getting "Uncaught SyntaxError: Identifier 'tl' has already been declared"]

Thanks OSUblake  Really appreciate it. 👍

[Getting "Uncaught SyntaxError: Identifier 'tl' has already been declared"]

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

[Getting "Uncaught SyntaxError: Identifier 'tl' has already been declared"]

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?

 

 

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

See the Pen dyRyYWg by bootstrap007 (@bootstrap007) on CodePen

[Delay the animation on scrolltriger]

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.

 

[Delay the animation on scrolltriger]

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.

 

 

Thanks

 

See the Pen bGWJEWX by bootstrap007 (@bootstrap007) on CodePen

[ScrollTrigger animation is not working after adding LocomotiveScroll]

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

[ScrollTrigger animation is not working after adding LocomotiveScroll]

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.

 

 

Thanks

See the Pen MWmxJog by bootstrap007 (@bootstrap007) on CodePen

[ScrollTrigger animation is happening after scrolling down the page]

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?

[ScrollTrigger animation is happening after scrolling down the page]

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.

 

See the Pen NWjeobY by bootstrap007 (@bootstrap007) on CodePen

[Full width scroll text continuously]

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

[Full width scroll text continuously]

Thanks for the demos @mikel I can adapt few things from both and make it.

 

One last question on this topic.

How can I make the scrolling till the right side of the screen in the below codpen: Please check the attached screenshot where it is marked in red color is empty and the text scrolling gets disappear there.

 

See the Pen 9ce005bdad509ae1fed02cc107ad4421 by mikeK (@mikeK) on CodePen

 

 

 

[Full width scroll text continuously]

Hi All,

I have seen the below demo in CodePen that was created by @mikel . I am wondering that if possible to have width auto, instead of fixed width for each boxes? Also, If I will switch the Codepen mode to full screen then  the box items are getting disappear even before reaching to the right side corner. How can I make it disappear only after passing the right side corner? Lastly, possible to make the animation pause/stop on mouseover?

 

 

 

Thanks

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

[Delay the second timeline]

GreenSock That was just a simplified version of code that I have mentioned above to debug. Thanks for the quick response and support. Really appreciate it.

[Delay the second timeline]

Thank you both Visual-Q  and GreenSock

 

This one is working fine - .add(middle, "+=2"); Instead of this syntax - .add(middle(), "+=2");

[Delay the second timeline]

Hi All,

Can you please check the below code and let me know that why the delay function for the "middle" timeline is not working? I have followed the Gsap documentation and added the second timeline to the master timeline same as the below.

 

function intro() {
  const tl = gsap.timeline();
  tl.to('.head', 1, {x:'30%', opacity:0});
      tl.to('.btn', 1, {y:'50%', opacity:0},"-=.2");
}

 

function middle() {
  const tl = gsap.timeline();
      tl.reverse();
      tl.fromTo(".holder", {yPercent:-100}, { duration: 1, yPercent:0, stagger: .5});
      tl.fromTo(".holder img", {yPercent:100}, {duration: 1, yPercent: 0, stagger: .5}, "<");
}

 

 

 const master = gsap.timeline();
    master.add(intro())
    .add(middle(), "+=7");

[How to create a image transition animation same like in the demo link]

@Cassie Thanks for the reference. Appreciate it. 

[How to create a image transition animation same like in the demo link]

@Cassie Thanks for the reply. I was wondering that if possible to add the same image effect to the swiper slider using GSAP?

 

Thanks

[How to create a image transition animation same like in the demo link]

Hi,

 

How to add an image transition effect the same as in the below link to the CodePen demo using GSAP? I am talking about the image only not the text effect here. Is it possible to add the same image effect to the swiper slider?

 

https://tympanus.net/Development/TextTrailEffect/index2.html

 

Thanks

 

See the Pen PomjzKW by bootstrap007 (@bootstrap007) on CodePen

[How to reveal any SVG shape something like a mask effect or drawing?]

2 minutes ago, ZachSaucier said:

Correct! That's exactly what DrawSVG does - animates the stroke. It can't animate the fill. So that means that you should either modify your SVG to only use strokes or use masks/clip paths as Craig first mentioned.

masks/clip paths - most of the browsers will support this clip path? Do you have any simple reference for masks/clip paths?

Thanks

 

 

[How to reveal any SVG shape something like a mask effect or drawing?]

2 minutes ago, ZachSaucier said:

Indeed, it's not what you're wanting. Can you describe what's going on in your own words? 

 

I think only the stroke is animating but not the fill. Correct?