Jump to content
GreenSock

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

silverd

ShockinglyGreen
  • Posts

    15
  • Joined

  • Last visited

About silverd

Profile Information

  • Gender
    Not Telling

silverd's Achievements

Newbie

Newbie (1/14)

1

Reputation

  1. Yes great the design is perfect sorry about codepen the next time
  2. Thanks but the render it's not very good with your example maybe it's better with svg ? i have two functions and with that my design is perfect function init() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); draw(ctx); } function draw(ctx) { // fondCopie/Trac transparent ctx.save(); ctx.beginPath(); // fondCopie/Trac transparent/Trac ctx.moveTo(90.0, 113.5); ctx.bezierCurveTo(79.9, 113.5, 67.1, 111.3, 61.8, 106.7); ctx.bezierCurveTo(59.6, 94.5, 55.7, 85.9, 51.5, 75.7); ctx.bezierCurveTo(47.3, 65.6, 52.9, 56.0, 56.5, 49.6); ctx.bezierCurveTo(58.7, 45.5, 67.1, 40.7, 71.9, 38.7); ctx.bezierCurveTo(72.8, 38.3, 73.6, 38.0, 74.5, 37.7); ctx.bezierCurveTo(75.6, 37.7, 76.7, 37.8, 77.7, 37.9); ctx.bezierCurveTo(75.1, 40.7, 73.0, 42.5, 73.0, 43.7); ctx.bezierCurveTo(73.0, 44.8, 73.5, 47.0, 75.1, 48.9); ctx.bezierCurveTo(75.1, 48.9, 75.1, 45.2, 79.0, 46.0); ctx.bezierCurveTo(79.0, 46.0, 88.6, 49.9, 88.6, 51.6); ctx.bezierCurveTo(88.6, 51.6, 88.0, 55.6, 88.0, 64.7); ctx.bezierCurveTo(88.0, 73.5, 89.9, 101.7, 90.0, 103.6); ctx.lineTo(90.0, 103.7); ctx.bezierCurveTo(90.0, 103.7, 90.0, 103.7, 90.0, 103.7); ctx.bezierCurveTo(90.0, 103.7, 90.0, 103.7, 90.0, 103.7); ctx.bezierCurveTo(90.0, 103.7, 90.0, 103.7, 90.0, 103.7); ctx.bezierCurveTo(90.0, 103.7, 90.0, 103.7, 90.0, 103.7); ctx.lineTo(90.0, 103.6); ctx.bezierCurveTo(90.1, 101.7, 92.0, 73.5, 92.0, 64.7); ctx.bezierCurveTo(92.0, 55.6, 91.4, 51.6, 91.4, 51.6); ctx.bezierCurveTo(91.4, 49.9, 101.0, 46.0, 101.0, 46.0); ctx.bezierCurveTo(104.9, 45.2, 104.9, 48.9, 104.9, 48.9); ctx.bezierCurveTo(106.5, 47.0, 107.0, 44.8, 107.0, 43.7); ctx.bezierCurveTo(107.0, 42.5, 104.9, 40.7, 102.3, 37.9); ctx.bezierCurveTo(103.3, 37.8, 104.4, 37.7, 105.5, 37.7); ctx.bezierCurveTo(106.4, 38.0, 107.3, 38.3, 108.1, 38.7); ctx.bezierCurveTo(112.9, 40.7, 121.3, 45.5, 123.5, 49.6); ctx.bezierCurveTo(127.1, 56.0, 132.8, 65.6, 128.5, 75.7); ctx.bezierCurveTo(124.3, 85.9, 120.4, 94.5, 118.2, 106.7); ctx.bezierCurveTo(112.9, 111.3, 100.1, 113.5, 90.0, 113.5); ctx.closePath(); // fondCopie/Trac transparent/Trac ctx.moveTo(48.5, 33.4); ctx.bezierCurveTo(54.4, 29.1, 60.4, 25.9, 74.4, 35.2); ctx.bezierCurveTo(74.4, 35.2, 56.2, 38.2, 48.5, 33.4); ctx.closePath(); // fondCopie/Trac transparent/Trac ctx.moveTo(105.6, 35.2); ctx.bezierCurveTo(119.6, 25.9, 125.6, 29.1, 131.5, 33.4); ctx.bezierCurveTo(123.8, 38.2, 105.6, 35.2, 105.6, 35.2); ctx.closePath(); // fondCopie/Trac transparent/Trac ctx.moveTo(179.9, 24.0); ctx.bezierCurveTo(178.8, 31.6, 176.2, 33.7, 171.0, 36.0); ctx.bezierCurveTo(165.2, 38.5, 162.2, 37.4, 155.7, 37.7); ctx.bezierCurveTo(154.6, 36.2, 153.5, 34.6, 149.4, 28.3); ctx.bezierCurveTo(149.4, 28.3, 155.9, 26.6, 164.2, 32.9); ctx.bezierCurveTo(163.1, 31.1, 161.9, 29.6, 159.8, 27.8); ctx.bezierCurveTo(157.6, 26.1, 152.0, 23.4, 147.7, 24.7); ctx.bezierCurveTo(146.2, 25.2, 145.1, 26.0, 144.1, 27.2); ctx.bezierCurveTo(143.5, 27.9, 143.5, 27.8, 144.1, 28.5); ctx.bezierCurveTo(144.3, 28.7, 144.5, 29.0, 144.7, 29.2); ctx.bezierCurveTo(148.4, 33.5, 158.6, 44.0, 161.8, 49.9); ctx.bezierCurveTo(164.9, 55.6, 168.9, 70.5, 168.8, 77.0); ctx.bezierCurveTo(165.4, 77.5, 161.1, 77.0, 153.6, 87.9); ctx.bezierCurveTo(150.0, 93.1, 145.2, 97.2, 138.1, 100.3); ctx.bezierCurveTo(136.8, 97.8, 137.2, 92.7, 139.7, 89.8); ctx.bezierCurveTo(134.3, 94.3, 131.5, 98.5, 132.5, 106.2); ctx.bezierCurveTo(128.7, 107.5, 124.0, 107.6, 122.3, 104.1); ctx.bezierCurveTo(120.6, 100.6, 122.0, 95.4, 125.8, 87.5); ctx.bezierCurveTo(130.5, 77.4, 132.8, 74.9, 133.5, 64.5); ctx.bezierCurveTo(134.0, 56.3, 130.3, 49.4, 127.1, 45.1); ctx.bezierCurveTo(124.3, 41.3, 117.2, 39.2, 112.8, 37.3); ctx.bezierCurveTo(127.8, 39.6, 140.0, 33.8, 140.0, 33.8); ctx.bezierCurveTo(135.3, 28.1, 131.3, 27.7, 131.3, 27.7); ctx.bezierCurveTo(132.9, 27.1, 136.1, 26.9, 136.1, 26.9); ctx.bezierCurveTo(123.8, 21.8, 114.6, 25.9, 110.2, 29.9); ctx.bezierCurveTo(108.5, 31.5, 104.9, 33.6, 102.0, 33.7); ctx.bezierCurveTo(99.1, 33.8, 98.5, 33.3, 97.6, 33.1); ctx.bezierCurveTo(97.6, 33.1, 94.6, 30.7, 90.0, 30.7); ctx.lineTo(90.0, 30.7); ctx.lineTo(90.0, 30.7); ctx.bezierCurveTo(90.0, 30.7, 90.0, 30.7, 90.0, 30.7); ctx.lineTo(90.0, 30.7); ctx.bezierCurveTo(90.0, 30.7, 90.0, 30.7, 90.0, 30.7); ctx.lineTo(90.0, 30.7); ctx.lineTo(90.0, 30.7); ctx.bezierCurveTo(90.0, 30.7, 90.0, 30.7, 90.0, 30.7); ctx.lineTo(90.0, 30.7); ctx.lineTo(90.0, 30.7); ctx.lineTo(90.0, 30.7); ctx.bezierCurveTo(85.4, 30.7, 82.4, 33.1, 82.4, 33.1); ctx.bezierCurveTo(81.5, 33.3, 80.9, 33.8, 78.0, 33.7); ctx.bezierCurveTo(75.1, 33.6, 71.5, 31.5, 69.8, 29.9); ctx.bezierCurveTo(65.4, 25.9, 56.2, 21.8, 43.9, 26.9); ctx.bezierCurveTo(43.9, 26.9, 47.1, 27.1, 48.7, 27.7); ctx.bezierCurveTo(48.7, 27.7, 44.7, 28.1, 40.0, 33.8); ctx.bezierCurveTo(40.0, 33.8, 52.2, 39.6, 67.2, 37.3); ctx.bezierCurveTo(62.8, 39.2, 55.7, 41.3, 52.9, 45.1); ctx.bezierCurveTo(49.7, 49.4, 46.0, 56.3, 46.5, 64.5); ctx.bezierCurveTo(47.2, 74.9, 49.5, 77.4, 54.2, 87.5); ctx.bezierCurveTo(58.0, 95.4, 59.4, 100.6, 57.7, 104.1); ctx.bezierCurveTo(56.0, 107.6, 51.3, 107.5, 47.5, 106.2); ctx.bezierCurveTo(48.5, 98.5, 45.7, 94.3, 40.3, 89.8); ctx.bezierCurveTo(42.8, 92.7, 43.2, 97.8, 41.9, 100.3); ctx.bezierCurveTo(34.8, 97.2, 30.0, 93.1, 26.4, 87.9); ctx.bezierCurveTo(18.9, 77.0, 14.6, 77.5, 11.2, 77.0); ctx.bezierCurveTo(11.1, 70.5, 15.1, 55.6, 18.2, 49.9); ctx.bezierCurveTo(21.4, 44.0, 31.6, 33.5, 35.3, 29.2); ctx.bezierCurveTo(35.5, 29.0, 35.7, 28.7, 35.9, 28.5); ctx.bezierCurveTo(36.5, 27.8, 36.5, 27.9, 35.9, 27.2); ctx.bezierCurveTo(34.9, 26.0, 33.8, 25.2, 32.3, 24.7); ctx.bezierCurveTo(28.0, 23.4, 22.4, 26.1, 20.2, 27.8); ctx.bezierCurveTo(18.1, 29.6, 16.9, 31.1, 15.8, 32.9); ctx.bezierCurveTo(24.1, 26.6, 30.6, 28.3, 30.6, 28.3); ctx.bezierCurveTo(26.5, 34.6, 25.4, 36.2, 24.3, 37.7); ctx.bezierCurveTo(17.8, 37.4, 14.8, 38.5, 9.0, 36.0); ctx.bezierCurveTo(3.8, 33.7, 1.2, 31.6, 0.1, 24.0); ctx.bezierCurveTo(-0.9, 16.2, 5.1, 8.3, 8.4, 5.0); ctx.bezierCurveTo(11.7, 1.7, 15.7, -0.4, 20.8, 0.1); ctx.bezierCurveTo(25.1, 0.5, 28.8, 1.1, 33.4, 4.8); ctx.bezierCurveTo(38.0, 8.4, 40.4, 11.0, 43.4, 12.0); ctx.bezierCurveTo(45.5, 12.6, 47.8, 12.5, 50.7, 10.9); ctx.bezierCurveTo(52.5, 9.9, 54.6, 9.0, 56.7, 8.6); ctx.bezierCurveTo(62.6, 7.0, 68.8, 9.1, 74.0, 11.9); ctx.bezierCurveTo(77.0, 13.5, 79.8, 15.4, 82.7, 17.1); ctx.bezierCurveTo(84.7, 18.4, 86.9, 19.6, 89.4, 19.8); ctx.bezierCurveTo(89.6, 19.8, 89.8, 19.8, 90.0, 19.8); ctx.lineTo(90.0, 19.8); ctx.lineTo(90.0, 19.8); ctx.lineTo(90.0, 19.8); ctx.lineTo(90.0, 19.8); ctx.bezierCurveTo(90.0, 19.8, 90.0, 19.8, 90.0, 19.8); ctx.lineTo(90.0, 19.8); ctx.lineTo(90.0, 19.8); ctx.bezierCurveTo(90.2, 19.8, 90.4, 19.8, 90.6, 19.8); ctx.bezierCurveTo(93.1, 19.6, 95.3, 18.4, 97.3, 17.1); ctx.bezierCurveTo(100.2, 15.4, 103.0, 13.5, 106.0, 11.9); ctx.bezierCurveTo(111.2, 9.1, 117.4, 7.0, 123.3, 8.6); ctx.bezierCurveTo(125.4, 9.0, 127.5, 9.9, 129.3, 10.9); ctx.bezierCurveTo(132.2, 12.5, 134.5, 12.6, 136.6, 12.0); ctx.bezierCurveTo(139.6, 11.0, 142.0, 8.4, 146.6, 4.8); ctx.bezierCurveTo(151.2, 1.1, 154.9, 0.5, 159.2, 0.1); ctx.bezierCurveTo(164.3, -0.4, 168.3, 1.7, 171.6, 5.0); ctx.bezierCurveTo(174.9, 8.3, 180.9, 16.2, 179.9, 24.0); ctx.closePath(); ctx.fillStyle = colorLogo; ctx.fill(); ctx.restore(); } it's my logo i would like that it is pixel perfect
  3. Hi i have a question maybe it's simple but maybe not I would like animate a color of canvas shape but i don't understand how in my draw ctx i have this line ctx.fillStyle = colorLogo; colorLogo it's my variable var colorLogo = "rgb(65, 190, 238)"; but with css in tweeMax i don't understand how i have to proceed can you help me ? i have to create a function animate ? Thanks
  4. silverd

    Simple Question

    Hello Rodrigo, This is a continuation of my question about text animation on the path I have not been able to do what I wanted with my text animation so I had to tweak it, taking a .gif animation is text around my form. That's why I have to trigger this gif. at a specific time. I know it's not a best practice but since I can not do it I had to try another way I should add the ".gif" at this time otherwise the animation will start from the beginning of the timeline and thus arrived at the point in question, the animation is already finished: ( Best Jeff
  5. silverd

    Simple Question

    Hi Rodrigo, thanks I wanted to know : why It's not possible to do easily tl.add(slide02.append('<img src="img/text.gif">'), 1.2, {autoAlpha:1, ease:Power2.easeOut}); or .to or .insert because the image.gif is load in the start of animation I throught that as the "addchild" in flash until i don't use "addchild" the animation.gif is not load A bit like "load" my picture just in my timeline at the precise moment I want without using a simple function for it. Because there my function is very very simple maybe too simple for just load one image.gif But it's maybe not possible without it. Thanks
  6. silverd

    Simple Question

    Hello i think it's simple but i would like add and remove a image .gif in my timelineMax I tried to do : tl.to(slide02.append('<img src="img/text.gif">'), 1.2, {autoAlpha:1, ease:Power2.easeOut}); and add or insert but my problem it's that the image .gif begin in start of timeline but i don"t want that, because the .gif is animate and the animation have to start after few others animations. I tried with onComplete and the function but after i don't know how the remove it because after the gif animation i have few others animations and I think it's not the best way function addImageGif () { document.getElementById("imgText").innerHTML='<img src="img/text.gif">'; }; Can you help me ? Thanks
  7. silverd

    Text Animation

    Hi Rodrigo thanks for your help i m going to try with that it's a little bit hard the SVG and bezierToCurv but i m going to find a solution with your explanation Thanks again you are the best Jeff
  8. silverd

    Text Animation

    Thanks Rodrigo It's easy when you explain to me like that Easy easy it's a big word but more easy I read the D3.js tutorial and i tried to understant it, but it's not very easy for me i'm a beginner not a expert in javascript because in this tutorial the svg is a random path not a design path. I am going to try with kiwi svg example I think it's more easy like that My words have to follow the kiwi path on start and after i use your second part of explaination for go to the straight line Thks Jeff
  9. silverd

    Text Animation

    Maybe If I use a textPath for following my complexe path it's maybe a solution no ? but for go to the end straight line, maybe it's too strange
  10. silverd

    Text Animation

    Thanks Rodrigo I am going to try to do that it's maybe a little hard because i would like to do a animation after, as you do in your first example code to do a straight line at the end because if the path are to hard maybe the animation doesn't work easily Thanks a lot for your help If you can, send me how i must do for protect my buy file (SplitText) as you say me Jeff
  11. silverd

    Text Animation

    Hi again I have a question in your code you use path with x and y but when I generate my path in canvas i have this : ctx.save(); ctx.beginPath(); ctx.moveTo(7.1, 217.8); ctx.bezierCurveTo(-10.4, 157.9, 4.4, 87.8, 59.7, 41.1); ctx.bezierCurveTo(167.9, -50.4, 242.2, 40.0, 242.2, 40.0); ctx.lineTo(248.1, 38.3); ctx.bezierCurveTo(253.0, 38.3, 279.1, 50.2, 284.4, 57.2); ctx.bezierCurveTo(289.6, 64.2, 326.8, 88.5, 326.8, 88.5); ctx.bezierCurveTo(326.8, 88.5, 356.4, 78.3, 362.3, 82.6); ctx.lineTo(381.2, 105.8); ctx.bezierCurveTo(381.2, 105.8, 402.6, 117.5, 394.1, 158.6); ctx.bezierCurveTo(394.1, 158.6, 402.1, 189.6, 376.4, 212.0); ctx.lineTo(351.9, 233.9); ctx.bezierCurveTo(351.9, 233.9, 326.7, 265.4, 325.7, 271.3); ctx.bezierCurveTo(324.6, 277.2, 327.9, 281.1, 327.9, 281.1); ctx.bezierCurveTo(291.4, 309.8, 235.9, 357.6, 132.7, 336.5); ctx.bezierCurveTo(73.9, 324.5, 27.2, 279.2, 8.9, 223.8); ctx.lineWidth = 0.3; ctx.strokeStyle = "rgb(255, 0, 0)"; ctx.stroke(); ctx.restore(); and in svg format I have this kind of code : <path fill="none" stroke="#FF0000" stroke-width="0.2728" stroke-miterlimit="10" d="M290.514,343.786 c-17.428-59.95-2.708-130.075,52.588-176.768c108.298-91.447,182.549-1.122,182.549-1.122l5.886-1.62 c4.889,0,31.048,11.87,36.288,18.88c5.234,7.015,42.408,31.286,42.408,31.286s29.63-10.246,35.557-5.931l18.854,23.193 c0,0,21.411,11.703,12.865,52.837c0,0,8.012,30.986-17.628,53.423l-24.575,21.901c0,0-25.105,31.517-26.174,37.394 c-1.07,5.875,2.176,9.762,2.176,9.762c-36.424,28.727-91.977,76.481-195.137,55.445c-58.833-11.998-105.521-57.316-123.817-112.75" /> How to do for translate that in position x and y Where Can I find that, you have a "software" or a "website" to find the coordonates x and y ? because my path are also complexe Thanks
  12. silverd

    Text Animation

    Thanks Yes i am going maybe try the contest i had thinking also use SplitText i m already club member but the animation is for a customer maybe and i don't want put this plugin in the package it's normal i saw the new video on SplitText yesterday it's awesome
  13. silverd

    Text Animation

    Yes like that I can put in place of the square, a letter from my sentence and return to a straight line like that, you think? Because in fact I would like to make an animation from a text on a path, which follows the shape of shell and return to a normal text line Thanks
  14. silverd

    Text Animation

    Yes a little but i would like to start from the arc text (your finish) to inline text standard it's maybe the same think in the other way I would like to beziers curves so that they become flat (inline) as a Arc to become a line but with text Maybe i am not very clear
  15. silverd

    Text Animation

    Hello thanks for your work it's so great i just have a question i would like to do a animation from this : http://csswarp.eleqtriq.com/ to the text not curve (standard) how i can do this ? Use "straggerFrom" for all letter ? any ideas ? thanks for help
×