Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Posts posted by midnightgamer

  1. 17 minutes ago, Ihatetomatoes said:

    Hi @midnightgamer, great inspiration and a beautiful effect you are trying to recreate. There is not much help I can offer without you posting a Codepen demo or anything to start with.


    In other words the effect would not involve only GSAP but most likely also a canvas library such as Three.js, Pixi.js or WebGL.


    You mentioned that you are trying to learn GSAP, but I don't think this effect is the easiest for a beginner.


    Here are some other forum threads that might steer you in the right direction:



    If you have any questions specific to GreenSock and the syntax, please ask.

    Thanks for  sharing , Liquid effect is just one part of it. I will try to recreate page transition effect and I think that is achievable with GSAP.

  2. 1 minute ago, Ihatetomatoes said:

    Hi @midnightgamer, why don't you simply use the document.querySelector?


    const c = 3;
    const child = document.querySelector(`.box:nth-child(${c})`);
    gsap.to(child, {duration: 1.4, width: '100%', ease: "expo.inOut", stagger: 0.4});

    Here is CodePen demo:


    See the Pen

    See the Pen bGpqxrx by ihatetomatoes (@ihatetomatoes) on CodePen

    by ihatetomatoes (@ihatetomatoes) on CodePen



    You should also use the new GSAP3 syntax gsap.to


    Hope that helps.

    Ohh, Yeah Thanks It worked. By the way I am huge fan of your work saw some videos on YouTube.

    • Like 2
  3. I am trying animate child of element dynamically on button click.

    Here is the code for selecting the nth-child


    I am passing ${c} as parameter to function.

    var child = CSSRulePlugin.getRule(`.main-overlay .child:nth-child(${c})`)
    TweenLite.to(child, {duration: 1.4, width: '100%', ease: "expo.inOut", stagger: 0.4})

    But child is undefined, What is wrong with my code? 

  4. 4 minutes ago, Richard1604 said:

    Hi midnight gamer,


    you could  try using unsplash.com or another of the free picture  sites like lorry.picsum that serve up Random images On demand instead of loading up your assets into codepen.
    i think that would  help explain your issue more clearly.


    Thanks for taking efforts, But I have solved the problem. But can you guide me how can I install and  use CSSRule  plugin.

  5. I am fairly new in GSAP animation. I am trying to recreate landing page and animate it through gsap to learn it better. What I want to there is two layers of slide changes. The one appear after page load I want to execute that when I click next button.


    I can't provide codepen link as I am using some assets.



    Thanks for help.