Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 07/31/2018 in all areas

  1. Sahil test
    Ya codepen can be really handy to do any experiments quickly. You can fork any pens that are public or you can also create templates as you prefer. Check out their docs and FAQs. Yes you will be able to perform all kinds of 2D animations using SVG. If you are familiar with any kind of animations and little bit of JavaScript then it will be easy to get going. I would recommend visiting the learning page and GreenSock's youtube channel to get started. https://www.youtube.com/user/GreenSockLearning There is also a video tutorial course by @Carl, https://www.nobledesktop.com/html5-greensock-video-class-gsap?a=ox7 I don't know if it covers SVG in detail but any 2D animations you perform on regular HTML elements can be performed on SVG elements. Then there are a bit advanced effects like drawing or morphing shapes that let you animate paths using DrawSVG and MorphSVG plugins. Finally go through the SVG Gotchas thread so it will save you a lot of time in future.
    6 points
  2. Jonathan test
    Hi @pauljohnknight Here is a better way to detect if the browser is Firefox, It uses feature detection since using the useragent can be spoofed. var FF = !(window.mozInnerScreenX == null); if(FF) { // is firefox } else { // not firefox } Be careful with hiding the content like that Google will ding you for hiding content to increase ranking. But you will have to test and see what Google is doing in your case. Google still dings for using high values of text-indent. Do you have a limited codepen demo example? Since it will be hard to even see what your GSAP specific code is doing or what it looks like. Also i noticed you are using canvas on that page, so be careful since canvas can be a resource hog, especially on mobile draining your battery. Happy Tweening!
    5 points
  3. PointC test
    Thanks for the link. I see the problem. It looks like you grabbed the MorphSVG plugin from the npm folder. When you unzip your GreenSock download you'll see the src folder. In there you'd want to grab the MorphSVG plugin from the uncompressed or minified folder. I recommend the minified version. Once you make that change, you'll be all set. Happy tweening.
    4 points
  4. PointC test
    Right now you have a circle in the SVG. You can target that circle like this: Make sense? Happy tweening.
    4 points
  5. Sahil test
    Here is how you can do it. First you need to record position of your element using getBoundingClientRect and then append it inside your target container and reset your target element's x and y translate values. Now again record the position using getBoundingClientRect and use both position values to calculate the difference. Then use the from Tween and animate it to the position based on difference.
    4 points
  6. Sahil test
    Sorry I am not sure, @OSUblake can comment on that. Recently he mentioned types are incomplete, I am not aware of any workaround that.
    4 points
  7. wijesijp test
    @PointC thank you for your answer.
    3 points
  8. PointC test
    Yes, you would place the SVG code on the web page between the <body> tags. You could add it as an image too but that won't allow you to easily animate all the child elements. If you want to get started, I'd recommend forking this pen which loads everything you need to get started: Then just delete everything in the HTML, CSS and JS panels. Paste your SVG code into the HTML panel and your image should be visible. Does that make sense? If you'd like to create a demo from scratch, check out this post: Happy tweening.
    3 points
  9. PointC test
    Hi @wijesijp Welcome to the forum. You're targeting the container: cardImg = new PIXI.Container(); TweenMax.to(cardImg, 1, { pixi: { x: 500, lineWidth: 5, fillColor: 0x0088f7 } }); If you want to animate the fill, you'll need to target the graphic. TweenMax.to(graphics, 1, { x: 500, pixi:{fillColor: 0x0088f7} }); I thought the lineWidth would work in that same tween too, but it doesn't want to cooperate. I had to target the lineWidth in the graphicsData object to make it animate. Most of my Pixi work is with sprites and I barely touch the graphics so I'm honestly not sure why we can't target the lineWidth without going into that object. @OSUblake is our resident Pixi expert so I'm sure he can answer that for us when he has time. Here's a fork of your pen. Hopefully that helps. Happy tweening.
    3 points
  10. NDF test
    Just thought I'd share some banner examples from my day-job https://www.andyfoulds.co.uk/banners/html5_banners/ Reckon every one has GSAP to thank to some extent! Andy___F
    2 points
  11. OSUblake test
    I was showing @PointC that Coding Math has 4 videos on Verlet Integration, which is exactly what you want. This is the 4th video, which shows a weighted rope animation. It uses canvas, but feel free to substitute in whatever rendering method you like. The source code for that episode. https://github.com/bit101/CodingMath/tree/master/episode39
    2 points
  12. Wim Lammers test
    Hi Craig, It works!! Many thanks for the tip. I will be more careful next time I have updated my GreenSock link on BasicPhysiology.com Many thanks again! All the best Wim
    2 points
  13. Sahil test
    Here is one example by @OSUblake https://stackblitz.com/edit/angular-tkmxb4 Take a look at docs for NPM usage, https://greensock.com/docs/NPMUsage
    2 points
  14. Visual-Q test
    For all things svg follow Craig's advice above. Based on the example you showed, the best approach is probably svg. Depending on the nature of your illustrations, for instance if they are not made up of vector artwork or suitable for creation as vectors, you can also prepare them as pngs with transparency. Typically you'd use Photoshop, but I'm sure there are other software options if you do a little research.
    2 points
  15. PointC test
    Hi @bowen192 Welcome to the forum. Yep - asset prep is super important. I'm not 100% sure I understand what you're asking. Are you asking which vector software to use? If that's the case, I recommend Adobe Illustrator. While it's not perfect, it is the industry standard. If you don't want to subscribe to Adobe Creative Cloud, there are other options. I know some people use Inkscape. I have no experience with it, but you can check out their website. https://inkscape.org/en/ If your question relates more to 'how to export for SVG animation', I wrote a little piece about how to do that with Adobe Illustrator. Hopefully that gets you started. Happy tweening.
    2 points
  16. Carl test
    Using set() creates an actual tween with no duration. A tween by nature needs to read current values of the properties you are animating (or setting) and then also record the ending values. Also a tween is a javascript object with quite a few methods and properties. With element.style you have a direct path to changing a value with no additional memory or cpu overhead. element.style technically is less work than using set(). Whether or not you would ever notice any difference really depends on how you are using it and I suspect you'd only find a significant difference if you were doing hundreds (or thousands) of sets() vs hundreds of element.style.
    2 points
  17. Jonathan test
    Hello @jesper.landberg, The reason you would use GSAP set() versus element.style is so GSAP can keep track of what you are setting. If you use element.style, than you are updating the DOM with a CSS style change on an element outside of GSAP. So in your case you can use the GSAP set method so GSAP can keep track of your CSS changes. Now that doesn't mean you have to use GSAP set(), but there are some benefit to using set() over element.style. Using element.style is likely faster, but if it was me I would opt for GSAP being always in the loop on what CSS properties you change. Im sure others here might opt for one over the other. But you can test each one and see what works best for your project. But that is just my two cents, Happy Tweening
    2 points
  18. PointC test
    Yep - you can target any of the elements, paths, groups, filters etc. inside the SVG, but you can also target the SVG itself. In some cases that may be exactly what you want. In those situations you just target the SVG like any other DOM element. Happy tweening.
    1 point
  19. OSUblake test
    Do you actually need to call requestAnimationFrame? The ModfiersPlugin might be a better option depending on what you're doing. Check out these demos. https://codepen.io/collection/AWxOyk/
    1 point
  20. PointC test
    I don't know much about Animate so I can't be much help, but I wanted to make sure you were aware of this: https://greensock.com/GSAP-Animate-CC-2017 @Carl knows a ton so he may have some answers for you. Happy tweening.
    1 point
  21. bowen192 test
    Ahh, of course. The whole point of importing the SVG file is that you can target individual items; I was trying to work the whole SVG file. Cheers Mr C.
    1 point
  22. OSUblake test
    That works when importing Draggable with TypeScript with older versions of GSAP or when using the umd versions. If you're using the latest version of GSAP (2.0.1), try importing like this. import Draggable from "gsap/Draggable"; And there won't be any auto-complete for Draggable. If you get errors, the simplest way to silence is to add this to your code. declare var Draggable;
    1 point
  23. PointC test
    Happy to help. Let us know if you have additional GSAP questions or problems. Have fun and happy tweening.
    1 point
  24. bowen192 test
    Cheers, Sahil. ?
    1 point
  25. pauljohnknight test
    Hi Jonathan, I'll try and set up a simplified example to show the jank. Also, I'm not using canvas, it's all SVG - I think you're referring to the original poster at the top of the thread who was someone else. I was chipping in because I did a search on GSAP jank in Firefox. Many thanks, Paul.
    1 point
  26. yulia test
    @mikel Jesus! This is fantastic ? Thank you!
    1 point
  27. GreenSock test
    Yep, @Jonathan and @Carl are correct. Just to be add to what Jonathan said, it's particularly helpful to set transform-related values via GSAP rather than directly or via CSS because future animations can be faster and more accurate. GSAP caches the transform-related values and can skip parsing the matrix() or matrix3d() values that are reported by the browser which are inherently ambiguous (a rotation of 0, 360, 720, etc. result in the same matrix, and various other values combinations could be equally valid so things can get very imprecise). If all you're doing is setting values that are not transform-related, it's fine to set them directly. Most people find it's "safest" to go through GSAP since it solves so many browser inconsistencies, especially with transforms.
    1 point
  28. GreenSock test
    Couldn't agree more. So proud to be a part of this community. It's got some of the most generous, kind, smart people I know of anywhere on the web. ?
    1 point
  29. PointC test
    Agreed. The GreenSock forum is an island oasis in the sea of bickering and belittling on the web. You'll find this entire community to be helpful, knowledgeable, respectful and occasionally funny. It's really what public discourse on the web should aspire to become. Happy tweening.
    1 point
  30. PointC test
    Hi @Wim Lammers Welcome to the forum and thanks for joining Club GreenSock. Sorry to hear you are experiencing problems. Just so we don't overlook the obvious here. Is the plugin definitely in the js/ folder? Are you loading TweenMax too? <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script> Can you upload your test animation to a page on your website? If that's not possible, a screenshot of your code would be helpful. Happy tweening.
    1 point
  31. GreenSock test
    Oh, and one other option is to drop the bonus files directly into the node_modules/gsap folder.
    1 point
  32. GreenSock test
    Hmm, it sounds like your bundler may not be configured to understand (or transpile) ES6 modules(?) According to that error message, it's choking on "import" which is pretty standard ES6 stuff. If your setup doesn't understand ES6 modules, you could just use the plain ES5 files which are also included in your member zip download (in "uncompressed" or "minified" folders). As for documentation, @conor909, please see https://greensock.com/docs/NPMUsage. Is that what you're looking for? @eelsiee, if you're still having trouble, would you mind creating a reduced test case and giving us access to it? Like a basic github repo or stackblitz link or something like that? Then we could try doing the compile on our end and see exactly what you're seeing. And thanks @eelsiee and @conor909 for being Club GreenSock members!
    1 point
  33. PointC test
    Hey @smallio Okay, I re-read your question and I'm fairly certain you meant a background image for the page. The answer to that is you use the index of the loop to target the elements that are not part of the jQuery each() loop or $(this). Accessing that index number is quite powerful. Here's one way to do it. Hopefully that's what you needed. Happy tweening.
    1 point
  34. PointC test
    Hi @jillo Welcome to the forum. I'm not sure what the animations should be doing. I looked at your site and you're using GSAP 1.19.0 which is two years old. Could you put together a basic demo that shows the broken animation? If you can do that, I'm sure we can help you troubleshoot the problem. More info: Happy tweening.
    1 point
  35. mikel test
    Hi @neokid2416, Welcome to the GreenSock Forum. Use it as an archive for many stimulating suggestions. And post your questions whenever you like. Happy tweening ... Mikel
    1 point
  36. mikel test
    Hi @yulia and all scroll fans, It's a bit crazy, but it's a lot of fun: Happy scrolling and tweening ... Mikel
    1 point
  37. Salmen test
    Hi all, I would like to share with you my test, might be helpful for someone else :). Thanks.
    1 point
  38. PointC test
    No canvas?? I'm surprised @OSUblake didn't write up a 17 paragraph lecture about the awesomeness of canvas and post 29 of his demos as proof. ? If you do want to see cool canvas demos, check out Blake's CodePen profile. His work is amazing and educational. https://codepen.io/osublake/ Happy tweening. PS @WILDmonkeyDESIGN Welcome to the forum and thanks for joining Club GreenSock.
    1 point
×
×
  • Create New...