Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by bootstrap007

  1. 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){

    var $hamburger = $('.hamburger');

    //gsap.set('.navigation',{xPercent:-50, yPercent:-50})
    gsap.set('.navigation li',{x:0, opacity:0}); 

    var hamburgerMotion = gsap.timeline();
    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"})

    $hamburger.on('click', function(e) {

    $('.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")) {
      else {



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

  2. 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: 



    let container = document.querySelector(".portfoliomob");
    let tl = gsap.timeline({
      scrollTrigger: {
        pin: true,
        scrub: 1,
        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

  3. 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.





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

  4. 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

  5. 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?





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

  6. 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.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();
        .add(middle(), "+=7");

  7. 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?