Jump to content

Abi Rana

  • Posts

  • Joined

  • Last visited

Posts posted by Abi Rana

  1. Your main issue is with video encoding, please check that first. Above codePen has also mentioned it on its code block.


    The encoding is super important here to enable frame-by-frame scrubbing. You should try following:

    ffmpeg -i ~/Downloads/Toshiba\ video/original.mov -movflags faststart -vcodec libx264 -crf 23 -g 1 -pix_fmt yuv420p output.mp4
    ffmpeg -i ~/Downloads/Toshiba\ video/original.mov -vf scale=960:-1 -movflags faststart -vcodec libx264 -crf 20 -g 1 -pix_fmt yuv420p output_960.mp4


    You can test with above (codePen's) video to make sure that your code is working. By the way, I've tested on your site so code is working only the video should be fixed.

    • Like 2
  2. This is just how your scrollTrigger has been setup.

    gsap.to(".shipping-section__vertical-container", {
      scrollTrigger: {
        trigger: ".shipping-section__globe-container",
        start: "top top",
        end: "400% top",
        markers: true,
        pin: true

    You scrollTrigger ends when it reached at the top of the viewport. So for end value you should set it for "400% bottom" like below. Just change the end value only.


    gsap.to(".shipping-section__vertical-container", {
      scrollTrigger: {
        trigger: ".shipping-section__globe-container",
        start: "top top",
        end: "400% bottom",
        markers: true,
        pin: true


    By the way, you do have one separate div in the HTML with some height, I guess that is intended

    • Like 1
  3. Hi Krystian, just checked your requirements, I understand what you need and I'd love to work on this.


    By the way, I need one thing to be clear; you mentioned you only need animation incorporated. So do you have the page already developed and you just need the animation work? Or does this work include the whole page development, I mean design to HTML work?


    If there is anything else I'd love the opportunity to discuss, we can chat on DM or via email at info@abirana.com


  4. Hi there, I'm interested to work on this. But I've quite a tight schedule right now, so I won't be able to work on this in couple days.


    So I just wanted to inform you that if anyone else would work on this then great. But if someone could not manage then and if you would still be looking for it then do let me know.



    Abi Rana


  5. Hello guys, I was working on some animation for my client and I found the issue with rotateY which I'm unable to implement. Can you guys please check and let me know if there is any solution to this?


    I've checked few forum topics and did see the solution below shared by you guys. It suggests to use scaleX but element is not a symmetrical element so I need it actually be flipped and I don't think I can use it as a separate SVG as well.



    By the way storyline is as follow (store guy filling crate to a van):

    • store guy goes near the van
    • crate is left there (hide crate)
    • store guy come back to the crate laying outside the store
    • picks another crate
    • repeat until there is no crate


    So can you guys please check and let me know if there is any solution to this?


    Thank you for checking in.

    Abi Rana

    See the Pen JjYmeaw by abirana (@abirana) on CodePen

  6. Hi there, an update if anyone visiting this topic.


    I just saw that MotionPathPlugin is a separate plugin in this new version, I just found it. In fact now you don't even need MorphSVGPlugin just only for MotionPathPlugin. Also GSAP is providing MotionPath helper, with that we can see the path and edit in real time. Check this out here https://greensock.com/docs/v3/Plugins/MotionPathPlugin


    Maybe this can be helpful if anyone is having such issue.

    • Like 3
  7. Has anyone encountered the issue, today I was work on a new project and I was using new updated GSAP and MorphSVGPlugin for this one. I had to do some motion along a path. So first this I wan creating variables like below:


    var motionPath_1 = MorphSVGPlugin.pathDataToBezier("#motionPath-1", {align:"#connecting-dot"});


    But this is throwing an error as below:

    Uncaught TypeError: MorphSVGPlugin.pathDataToBezier is not a function


    This is the same thing I've been using and on the new update this has no change as I can think of. When using old GSAP and MorphSVGPlugin it is work fine.


    Has anyone encountered this? Does anyone know what is the issue?