Jump to content

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


  • Posts

  • Joined

  • Last visited

Posts posted by midnightgamer

  1. I am new to GSAP and animation. I am trying to make really simple animation where I want to rotate the SVG while it is rotating I want to be PINED and once it complete rotating I want to release the pin and move to new section. I applied everything but for some reason it is not getting pinned.

    See the Pen vYeMpdP by midnightgamer (@midnightgamer) on CodePen

  2. Hi, I am trying to add a sort of infinity scroll but before than I am stuck at the issue. In above pen i have 2 columns each have 16 images in it. I want to see all 16 images as i scroll down but it is not happening. I am pretty sure i using yPercetage is not the solution, but I don't know how to solve this.  And idea how I can convert this into infinity scroll as well?  

    See the Pen vYymZbX by midnightgamer (@midnightgamer) on CodePen

  3. 9 minutes ago, tailbreezy said:

    A few things.


    Moving your .para xPercent:100, moves it to the right by the value in offsetWidth which about 8000px.

    Instead you can position it with left: "100%" to be right after the right edge — making it start immediately upon entering the trigger.


    Additionally, if you want the animation to happen naturally you can to add that value (8000px) to the end marker of ScrollTrigger.



    Oh thanks


  4. 2 hours ago, mikel said:

    Hey @midnightgamer,


    I don't really understand your intention.
    As I said, a simple example would help.
    Here is a case where elements appear (instead of disappearing) in the scrolling process.





    Happy tweening ...




    44 minutes ago, ZachSaucier said:

    I'd guess that you should set up a ScrollTrigger for each section and then do what mikel is doing in that case. As he said, if you'd like a more help a minimal demo would be very helpful.

    See the Pen RwobvNX by midnightgamer (@midnightgamer) on CodePen



    In this codepen I used code given by @mikel and added some thing what i need is when we scroll down and green triangle reaches red circle it should undraw just like the line.

  5. 28 minutes ago, mikel said:

    Hey @midnightgamer,


    A reduced case would be more helpful.
    So here's a simple version.
    Note the structure of the path: from below!





    Happy tweening ...



    Thanks mike but this idea is not working from me as .draw not a single svg. It is array of svgs which i am trying to undraw as hand reach near the particular item. You can see animation when page load , I need revers the same animation but using scroll trigger. 

  6. 15 minutes ago, mikel said:

    Hey @midnightgamer,


    Please show us your attempts in the CodePen.
    Comment on your problems ...


    Every attempt brings you further


    First I tried your solution It was working fine for first section others were behaving strange then I added one class to each section set trigger to that class yet It didn't work. Then I tried to use forEach with ScrollTrigger.Create  but I was not clear with concept so I skipped it. Lastly I duplicated same code 4 times and trigger each section by thier ID yet it didn't work. I don't have code as undo all the changes.

  7. On 10/1/2020 at 5:54 PM, mikel said:

    Hey @midnightgamer,


    Just another approach ...





    Happy studying ...


    This is nice but I want text box in each section and each section should behave like current effect. I tried with your code and try to figure some way out but fail It would be great if you help me out here.


  8. 10 hours ago, midnightgamer said:

    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.


    10 hours 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.

    Is there any platform where I can learn Farmer Motion?