Jump to content
Search Community

JIZA

Members

  • Posts

    13

  • Joined

  • Last visited

 Content Type 

Posts posted by JIZA

    MotionPathPlugin - How to rotate an element on rotations?

    in GSAP

    Posted

    55 minutes ago, Cassie said:

    Heya! 

    I think you're after timelines and the position parameter.

    At the moment you're using timelines - but you're not using them to sequence animations at all - you're just using normal tweens and delays.

    Timeline's unlock a whole new way of thinking about animation. Give this article a look! There's an explainer video too.
     

     

    due to some bugs in the library, such an implementation option as mine came up. Now you need to somehow rotate the element hehe)

    GSAP and Wordpress - Any way to "hide" .js file from being discovered? (ie with chrome dev tools)

    in GSAP

    Posted

    16 minutes ago, Jo Mourad said:

    Hello all!

     

    I usually build wordpress sites and properly enqueue gsap and my custom script js files. Since i am a greensock member, i have some gsap files i don't want to be copyable from my site. However, when i inspect page, and go to network or source, i can easily find my files. There must be a way i don't know of to hide those?

     

    Thanks!

    webpack build as an option😅

    • Like 1

    MotionPathPlugin - How to remove jerks when cornering?

    in GSAP

    Posted

    18 minutes ago, OSUblake said:

    It looks like your path just needs some fine tuning. For a smoother curve, you need to make sure the anchor points form a straight line, kind of like this.

     

    image.png

     

     

    Some SVG editors can automatically to do that for you, although I didn't see that option in the one you were using. Boxy SVG is another good one you can use online. If you double click a point, it should automatically make the curve smooth for you.

     

    https://boxy-svg.com/

     

    I would also try to reduce the amount of points if possible. The less, the better.

     

    Thank you, I will try to smooth the corners. If it doesn’t work out, I will write here)

    Quote

    I would also try to reduce the amount of points if possible. The less, the better.

    Didn't quite understand what you mean

    MotionPathPlugin - How to remove jerks when cornering?

    in GSAP

    Posted

    https://codesandbox.io/s/lingering-bird-wggrl

     

    Hey guys!

    I have a problem, I can not make smooth turns without jerking.

    This happens when the car approaches the bridge.

    I tried to smooth the svg path itself, but for some reason it turns out even worse. by using https://yqnn.github.io/svg-path-editor/

    PathCars :

     

    M 2313.22 1939.62 c -132.3 -0.39 -245.6 -39.38 -250.35 -41.04 l -2.3 -0.8 l -118.57 -50.78 l -24.63 -14.71 c -118 -79 -195.57 -113.86 -260.37 -131.29 c -56.19 -11.24 -109.8 -23.43 -123.8 -30.43 l -16.41 -7.21 l -16.76 -9.71 l -139.04 -77.25 c -73.38 -40.07 -130.76 -86.57 -170.54 -138.19 c -38.74 -50.28 -61.47 -105.73 -67.55 -164.81 c -5.29 -51.4 2.21 -104.72 22.28 -158.49 c 14.89 -39.88 36.76 -80.1 65.01 -119.54 c 45.78 -63.92 93.09 -104.86 98.34 -109.32 l 2.08 -1.77 l 1.65 -1.24 c 2.17 -1.69 45.49 -35.71 94.8 -93.37 c 44.72 -52.3 104.01 -135.73 132.52 -236.2 c 20.59 -72.55 65.39 -134.53 133.15 -184.22 c 49.01 -35.93 110.15 -65.26 181.74 -87.16 c 100.09 -30.62 193.19 -38.25 221.78 -44.37 c 72.73 -12.48 136.3 -16.01 202.43 -9.78 c 55.07 5.19 108.88 16.95 159.92 34.97 c 67.53 23.83 113.29 52.7 133.31 66.75 c 16.29 7.63 46.63 23.36 80.12 48.25 c 64.92 48.27 112.72 109.48 138.22 177.02 c 18.4 48.73 25.55 100.85 21.25 154.9 c -4.65 58.4 -22.84 119.5 -54.08 181.6 c -65.48 130.2 -47.14 241.55 -25.9 370.48 c 10.66 64.7 21.68 131.6 21.4 202.27 c -0.33 84.07 -16.99 160.3 -50.95 233.06 c -20.42 43.77 -47.41 82.12 -80.21 114.01 c -29.97 29.14 -65.08 53.13 -104.33 71.32 C 2467.45 1925.06 2394.71 1939.62 2313.22 1939.62 z z

    The car twitches, how can I fix it? (

    MotionPathPlugin (start / end positions) doesn't work more than 1, in React, why?

    in GSAP

    Posted

    43 minutes ago, OSUblake said:

    Welcome to the forums @JIZA

     

     

    I'll need to check on that behavior, but the easiest solution is to just draw your SVG path at the correct start and end points.

     

    Another option is to animate the progress of the timeline like this.

     

    https://codesandbox.io/s/red-brook-xvwi9?file=/src/App.js

     

    Thank you very much. You have a great library, I recently started using and learning about it. Cool😍

    • Like 1
    • Thanks 1
×
×
  • Create New...