Jump to content
GreenSock

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

Leaderboard

Popular Content

Showing content with the highest reputation on 08/01/2019 in all areas

  1. Update: I added SVG to Canvas support! Example: https://codepen.io/LuckyDe/pen/pMrgwz You can now use straight svg point data and if you have the morph plugin you can also morph data and its in canvas! I took @OSUblake 's post implemented it into my library but I also added https://github.com/goessner/parseSvgPathData modified that so you dont need to use path2D so it works in IE I also added a cache system so on every frame if the path data is the same as the old one it wont update the for loop to convert it, it will just run the same draw function. So now you can add svgs like this var hat_dark_p = "M58.2,81c0,0-3.1-29.6-3.5-75.4c0,0,73.2-18.9,141.5,12.3l-10.6,71l55.5,16.4c0,0-75.4,58.9-241.2-15.1L58.2,81z"; var hat_dark = new el.svg({points:hat_dark_p,style:{fillStyle:"#1e3449"}}) and animate it like any other element - skew, scale, xy , etc And if you want to use the morph plugin you can just do var hand_l_p= "M0,105.3l27.8-77.9L42,53.7c0,0,13.8-23.2,50.2-53.7c0,0,38.9,76.2-37.5,129.5c0,0-5.9,3.8-12.1,7.2C34.2,141.3-0.6,134,0,105.3z" var hand_l_b_p= "M0,80.8l53.5-66.9l-1,24.8c0,0,25.8-23.8,64.4-38.6c0,0,14.2,51.7-62.3,104.9c0,0-5.9,3.8-12.1,7.2C34.2,116.7-0.6,109.5,0,80.8z" var hand_l_shapes = [hand_l_p, hand_l_b_p]; MorphSVGPlugin.pathFilter(hand_l_shapes); var hand_l = new el.svg({points:hand_l_shapes[0],style:{fillStyle:"#58cfcb"}}) TweenMax.to(hand_l,1,{points:hand_l_shapes[1],onUpdate:el.update})
    5 points
  2. Hey @lzy100p, Maybe you try the AttrPlugin: https://codepen.io/mikeK/pen/QXXNJj Happy tweening ... Mikel
    5 points
  3. You can just call reverse() on any animation, but in order to do that you've got to have a reference to that animation. So you could create a variable (outside your functions) to store the animation reference. But the bigger problems it that the way you built this means that the back buttons will never trigger anything because you have click event handlers on the parent elements, thus those will hijack the clicks. Feel free to add a console.log() inside your back button handlers and you'll see they never fire. You could just handle the logic based on click on the whole section like this: https://codepen.io/GreenSock/pen/00d0d94f15f9f3c8e2eb5b8449babaad?editors=0010 But I the danger in that approach is that if someone clicks very quickly, you'll be creating timelines based on inbetween positions, thus when those get reversed, they'll appear to only go part-way back (that's not a problem with GSAP - it's a logic issue in the code). So you could pre-compile each of the two timelines and then just flip the direction on each click which ensures that the starting/ending states are locked in properly: https://codepen.io/GreenSock/pen/31339d8f0e252e0e87f6ecf4f98f6960?editors=0010 You could also build the timelines on the fly so that the easing isn't inverted on reverse. Lots of options. Anyway, I hope that helps.
    4 points
  4. Welcome to the forum. You can check out the Bezier plugin: https://greensock.com/docs/Plugins/BezierPlugin The MorphSVG plugin has a .pathDataToBezier() method. https://greensock.com/docs/Plugins/MorphSVGPlugin You may also be able to make it work with a textPath animation. I wrote about that here: Demo from that thread: https://codepen.io/PointC/pen/vRzmeO Hopefully that points you in the right direction. Happy tweening.
    4 points
  5. Just to add (ha) to Zach's excellent advice. You'll often use the .add() method to add a label or a function (without parameters) to the timeline. The biggest use, at least for me, is building a master timeline and adding nested timelines to the master. Check out this great article for all the details. https://css-tricks.com/writing-smarter-animation-code/ Happy tweening.
    4 points
  6. Hey sashaikevich, good question. As you can read about here, those two formats are equivalent (practically, though technically the first takes an extra function call, but that's not an issue for 99.999% of projects). The first is shorthand for the second. P.S. ScrollMagic is not a GSAP product and is unaffiliated with GSAP, so some of their docs about GSAP may not be accurate nor the recommended way to do things using GSAP.
    4 points
  7. Hey @lzy100p, Clip-path is not a feature that all browsers support (that has nothing to do with GSAP): https://caniuse.com/#feat=css-clip-path Kind regards Mikel
    4 points
  8. HI @lzy100p and welcome to the GreenSock Forum! Also keep in mind that you should also target for clipPath (clip-path), not just webkitClipPath. So you cover your bases for non webkit browsers.
    3 points
  9. Hey lzy100p and welcome. As mikel said, this is unrelated to GSAP. But as caniuse says, you should be able to get it working by using the url(#foo) syntax for an inline SVG instead of trying to use the CSS clip path that you show in the code sample above.
    3 points
  10. Hey @nicmare, These examples should give you some suggestions: https://codepen.io/mikeK/pen/dwooWw https://codepen.io/mikeK/pen/XwKbeE https://codepen.io/mikeK/pen/REXaxq If you have any questions about using GreenSock, feel free to contact us. Happy tweening ... Mikel
    3 points
  11. This always gets me. Someone always believes they need dynamic or responsive banners to fulfil a media request, but there's always an intersection point of the time it takes to build dynamic vs building separate banners by volume. Half the time the request is small enough that its probably faster for me to create 10 sizes separately than coming up with a whole dynamic build.
    3 points
  12. I had a pretty steep downturn in mid-2017 to mid-2018 where I was doing 1 banner campaign per quarter and switched gears to focus on After Effects and social content. After that year my banner work has come back to make up 40-50% of my work, that's held pretty steady. I notice a trend where tech/product companies have embraced banners and are really doing nice, aesthetic pieces. I do find institutional knowledge is being lost in other departments - creative, producers, account. I have to do a lot more hand holding to sell through or produce a banner. I am a semi producer these days int hat regard. Surprisingly too I don't get asked to do much programmatic or responsive, I mean responsive takes as much time to execute as making 4 separate sizes anyway.
    3 points
  13. And it's not only faster but more accurate. Right now i'm working on a responsive sitebar ad (300x600 initial and then all the way 100% width and 100% height responsiveness) For us as ad developer it is quite logic that to do so you have to make some compromises. There will always be some width and height combinations which just look let's call it unfortunate but you have to accept that. Though it's hard to explain the effort you have to put in a responsive ad to make it work 98% acceptable. Often you fix one element / animation overlap which results in another problem for other size variations. Very annoying. I'm always happy when the client himself prefers various static sizes before the one big responsive ad.
    2 points
  14. Hey @nicmare, Take a look at this: https://greensock.com/forums/topic/19706-staggering-data-from-multiple-arrays Or: https://www.amcharts.com/ Kind regards Mikel
    2 points
  15. Hey @five.design, Welcome to the GreenSock Forum. There may be other solutions (Note: <button> in html!): https://codepen.io/mikeK/pen/eqRejq Happy tweening ... Mikel
    2 points
  16. Hey all I wanted to share this with you! ElCanvas: https://github.com/luckyde/elCanvas I spent 6 months on a canvas library which I built around gsap and I wanted to share it here! I wanted to create a library which I can use to animate in Canvas and still use objects, so I spent a while trying to create a layer of seperation and this is what I got! The TLDR is now instead of drawing a rectangle on the canvas, then redrawing it with a bunch of ctx commands I can do this: var myRectangle = new el.rect({width:30,height:30}); el.update(); And If I want to animate it i can put a setInterval or since I use GSAP I would do TweenMax.to(myRectangle,1,{width:60,height:60,rotation:90, onUpdate: el.update}) So the whole goal of this as I'm hopefully explaining here is to DOM-ify canvas commands like rectangle,circle,customshapes,text and more so that its extremely easy to draw on a canvas context and animate in it! The reason is because DOM animation and SVG animation started to lag hard on the game I'm working on but canvas worked great on all devices! I'm not allowed to use huge libraries like pixie or phaser so I thought I would make a mini library that just does what I need it to do! Supported objects at this point supported properties at this point Examples!!! Parenting / Character animation: http://thisgoodboy.com/elCanvas/_tests/SoloBot_intro/ Logo Animation: http://www.thisgoodboy.com/elCanvas/_tests/_word_seeker_logo/ Text animation (CLICK on the gray space over and over for different animations): http://www.thisgoodboy.com/elCanvas/_tests/el_canvas_30points_v3/ Particle effects using canvas blend modes: http://thisgoodboy.com/elCanvas/_tests/FF_board_clicker/index_manual.html Using images/shapes/custom shapes http://thisgoodboy.com/elCanvas/_tests/bot_message_waiting_for_oponent/ Once again without GSAP and it's ability to modify objects optimally and with precision none of this would be possible I really hope this is useful to someone else too!
    1 point
  17. Thanks @PointC this looks to be exactly what I was looking for and should be a good start! Much appreciated.
    1 point
  18. Hi Jiri. I'm full for the next few weeks with my current workload. If you create a simplified codepen example of what you're trying to accomplish and post your question(s) in the forums, I'm sure someone will be able to assist! Best of luck
    1 point
  19. Hi @mosk, Could you provide us with a minimal setup that shows what you are trying? I assume you looked at the repo I placed in this thread so, there might be some difference as the repo should cover all those questions you have.
    1 point
  20. Are you talking about the actual hover or did you mean when the cursor gets close to the button? If it's the former, I'd follow @ZachSaucier's advice. If it's the latter, we do have some threads that show a menu button pulling towards the cursor as it gets close to the hover target. I just wasn't quite sure what you meant. Happy tweening.
    1 point
  21. I think you'd have to animate the position of the rect towards the middle and then later start a counter animation to move it back to the start. 
    1 point
  22. If you want Blake to appear you have to say the magic word three times in a row. "canvas canvas canvas"
    1 point
  23. Hi @UnioninDesign, I'm not sure if I understand your concerns correctly. Here is my interpretation ... Kind regards Mikel
    1 point
  24. Ya I guessed it. That's interesting, what are practical and common uses of Math.SQRT2 and SQRT1_2 that it is part of API? How would you go about normalizing the speed based on where you click? I gave it a quick try but my approach seems incomplete or hackish. EDIT: I guess you would suggest expoScaleEase, I will give it a try later.
    1 point
×