Jump to content
Search Community

Abi Rana

Members

  • Posts

    24

  • Joined

  • Last visited

 Content Type 

Posts posted by Abi Rana

    Gsap observer and and scroll tirgger expert required urgent $100/hr

    in Jobs & Freelance

    Posted

    Hi Adil,

     

    I'm Abi Rana, an experienced Web Developer and my expertise lies around building very responsive and interactive websites.

     

    I see that you are looking for a GSAP expert so I'm interested to work on this. Why don't you share all the detailed requirements and let's move ahead with the conversation.

     

    And I understand you are looking for an urgent turnaround but do mention a date by when this can be done?

     

    Looking forward to your reply.

     

     

    Regards,

    Abi Rana

    info@abirana.com

     

    Looking for someone to implement ScrollTrigger

    in Jobs & Freelance

    Posted

    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

    ScrollTrigger - When scrolling up a pinned div it skips and leaves a blank space

    in GSAP

    Posted

    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

    Need a Freelancer to help with ScrollTrigger animation

    in Jobs & Freelance

    Posted

    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

     

    5 step animated section needed

    in Jobs & Freelance

    Posted

    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.

     

    Regards,

    Abi Rana

    info@abirana.com

    GSAP rotateY or rotationY issue when applying inner SVG elements

    in GSAP

    Posted

    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

    Issue using MorphSVGPlugin.pathDataToBezier()

    in GSAP

    Posted

    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

    Issue using MorphSVGPlugin.pathDataToBezier()

    in GSAP

    Posted

    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?

×
×
  • Create New...