Jump to content
Search Community

Leaderboard

Popular Content

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

  1. Then move your element to the middle and set the progress of the animation to 0.5. Problem solved. Just don't expect your units to be in "em" as the browser reports everything in pixels. The minX/maxX values on your draggable instance will be the current bounds. If minX is not 0, you can normalize it like this. function onDrag() { var norm = (this.x - this.minX) / (this.maxX - this.minX); animation.progress(norm); }
    6 points
  2. You can start at the other end like this: .staggerFrom(".svg-path", 0.8, {drawSVG:"0% 0%"}, 0.08); or you could use a fromTo() like this: .staggerFromTo(".svg-path", 0.8, {drawSVG:"0% 0%"}, {drawSVG:"0% 100%"}, 0.08); or you could even get fancy and start in the middle like this .staggerFromTo(".svg-path", 0.8, {drawSVG:"50% 50%"}, {drawSVG:"0% 100%"}, 0.08); DrawSVG is quite flexible for starting points. You could also reverse your path in your vector software before animating. Hopefully that helps. Happy tweening.
    5 points
  3. Hello @pauljohnknight and Welcome to the GreenSock Forum! Sorry your having this issue This is happening due to the way you have your positional offsets (top, right, bottom, left .. and the use of position absolute with no relative) for your span elements and their parent <div>'s. Even before you start animating.. as a rule of thumb and to enforce cross browser layouts. It's best to always remember to have your parent element have position relative which acts like a main stage anchor point for any children that are position absolute, like your span tags. Without using position relative the browser has no way to know what parent are the absolutely positioned elements positioned relative to, this is very important. Otherwise you will get crazy positional layouts when introducing CSS transforms which will make things worse if the proper foundation of CSS position isn't there. Once you have your elements layout properly using position relative and absolute, then you know the underlying HTML and CSS layout will be positioned the same cross browser. Then you can start animating the elements Do you mean something like this? What i did: first i make sure the #wrapper is filling up the entire viewport, since by default height is not inherited and is default auto. This has to be done in either two ways. Either make the root and body element have height 100% or you must use viewport units for the #wrapper to make the height stretch to fit. As well as adding position: relative, very important give your absolutely positioned elements parent, which in this case is .leftblock have a defined width and height which is the same as its children so the browser knows what your bounding box is for that element and its children. for the CSS rule .leftblock span i comment out your transform rotate and let GSAP set() that rotation. And gave .leftblock span a defined height (even though when rotated it looks like its the width) I used the position parameter (see below youtube video) in your to() tween to offset the tween by a relative negative 100th of a second ("-=0.1") removed CSS property bottom from span#digital and placed on it's parent .leftblock I removed DIGITAL DESIGN text and from span#digital and placed it in a new <span> called span#digital-text that will also get rotated. (this is so when span.underline1 is animated it does not cause bad blurry anti-alias webkit bug) after that you notice that it doesn't shift to render your text on each line animation Resources: CSS position: https://developer.mozilla.org/en-US/docs/Web/CSS/position Happy Tweening!
    5 points
  4. Hello GreenSock! I haven't posted on the forum before but I've used it a lot recently and wanted to say thanks to the community! I've decided to try greensock for svg animations while working on my graduation project. And even though I've never worked with any sort of animation library before I'm very pleasantly surprised by how intuitive and seamless greensock works. Just something about working with js components for svg objects that lends itself very naturally to using gsap to animate these objects - it just clicks.. Aside from simple enter animations, having the ability to predefine entire timelines of atomic movements and then stack them to get more complex behaviour is pretty astonishing. And then the cross browser consistency, woah dude! I really really enjoyed working on this and I'm already thinking of the next project I'm going to work on with GSAP Thank you all for making this library what it is!
    4 points
  5. I'm not quite sure I understand having all 3 states at once. If the <li> in the red box pauses for a second, the <li> above and below the box should be transparent during that pause, correct? If that's the case, you would only see two at once: the one moving out of the red box and the one moving into it. That being said, you could use a loop instead of a stagger and play with the delays and durations and do something like this: Does that help?
    3 points
  6. Be careful joining Club GreenSock. You'll start playing with all the cool bonus plugins and pretty soon you'll be hooked on all of them. You'll probably start hanging out on the forum more and more and pretty soon - before you even realize it - you'll have posted over 1,000 times. GSAP can be quite addictive. Happy tweening.
    3 points
  7. Thanks so much for the nice note. We love to see lurkers come out of the shadows and share their pleasant experiences. Very happy to hear that you found the tools intuitive and that they handled the cross-browser issues that can suck hours of your life away;) Happy Tweening!
    3 points
  8. Safari for Windows hasn't been updated since 2011. https://en.wikipedia.org/wiki/Safari_(web_browser) Probably worthwhile to drop it entirely from your tests.
    3 points
  9. Thanks for the question, The tools you get with your membership today will never be disabled. There are no scripts inside that phone home or do anything to check your membership status. After your membership expires you can use them in the exact same way you use them today. After the membership expires you will just no longer have access to download the "members only" tools from our site and get the latest versions with any updates, bug-fixes, and new features. Let us know if you have any more questions. Happy to help.
    3 points
  10. Hi and welcome to the GreenSock forums, Nice demo. We usually don't have a lot of time to help construct advanced effects like this as we like to focus our attention on the GSAP API. However I have an idea that might help. I think the problem is that everything inside .top is always going to be visually stacked on top everything inside .bottom. A solution may be to just rotate each image 90 degrees like so:
    3 points
  11. Hi Jonathan, Thanks for such a great, detailed answer. I understand what you mean so I'll have to make some changes. The animation I was after is different to your example, but that's due to the fact I didn't explain that part very well, but I understand what you're saying and why the problem is happening which is really helpful. Thanks again for the explanation it was excellent. Paul.
    2 points
  12. it was starting from the end of the path Craig has nailed the answer, I was setting my animation 100% 100%, it should have been 0% 0% All sorted now
    2 points
  13. If I understand your desired outcome correctly, it's just a matter of starting the fade-out stagger later via the position parameter. Is this what you needed? Hopefully that helps. Happy tweening.
    2 points
  14. Tell me about it I've been playing with this for 2 solid weeks, i've barely scratched the surface of what it can do but im making a little progress. A massive thank you as well to the forum answers, quick, accurate and helpful, it's worth the money alone just for that. I'll get sorted now with a license, too good not too. Cheers
    2 points
  15. You're just missing the ThrowProps plugin. Add that and you'll be all set. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js Happy tweening.
    2 points
  16. hmm, I've been following this thread and had the same understanding as Craig. It seems each element takes a much more elaborate path from bottom to top. Is the following accurate? start completely transparent. moves up a tiny bit and fades in to 0.1 opacity at bottom pause move to redbox and gain full opacity ( at this point the next item moves to step 2 ) pause move up and fade out to 0.1 opacity ( at this point the next item moves into the red box) pause move up some more and fade out completely ( at this point next item moves out of red box) Perhaps it would help to get the animation of 1 item (with all its pausing) and then we can help get the other elements in synch.
    1 point
  17. The only thing I'd add to Carl's answer is that if you're using GreenSock tools in a way that'd require the special commercial license (which comes with "Business Green" memberships), when that membership expires you shouldn't continue using GreenSock tools in that project because the license would no longer be active. I know you said you're not using it in a way that'd require that special commercial license, so you're totally fine - I just wanted to clarify for others who might read this. I'm very happy to hear that you're enjoying the tools so much! Perhaps you'll follow in Craig's ( @PointC ) footsteps and become a forums rock star. That'd be awesome. We can never have too many Craigs around here (or Blakes, Jonathans, Pedros, Rodrigos, Carls, etc.) Happy tweening!
    1 point
  18. Hello @rojus32 and Welcome to the GreenSock Forum! I tested on an iPad Air 2 on latest Safari (Safari 10 on iOS 10.3) and i'm seeing it animate smooth. What device and Safari version are you seeing this choppy stuff going on? The only thing i see in your code is that your not declaring your variable element with var. That is throwing an exception reference error in the console due to not declaring your variables with var, let or const.
    1 point
  19. I have never worked with cluep so, can't comment on their side of the equation. When a adserver comes back saying 'the ad is not working' I always press them to know what exactly is not working because it could be N number of things. Don't know if you have come across the following, it could be of use: https://www.iab.com/guidelines/mobile-rich-media-ad-interface-definitions-mraid/ As two your last two questions. I am sorry, I can't help you there. I just don't know. In my personal experience, that end of the setup has always been dealt with by the adServer. All I had to do is write simple bug-free animation and adhere to the adServer's API.
    1 point
  20. @OSUblake Thanks, pal you are gentleman and scholar. My finest teacher of the web. Bummer about SVG sprite sheets. It seemed like a good idea to serve only one file. I guess with GZIP there isn't much to be gained. Need to find a solution for cleaner HTML now that am going to start to inline everything.
    1 point
  21. Doh!!!! Easiest fix ever. Cheers for that
    1 point
  22. To follow up on @flysi3000 explanation I wrote the tutorial how to use Bannertime. So if @emmanuelulloa and anyone else still has questions, come check it out: http://codecrave.io/bannertime-tutorial/ I would appreciate input from @joe_midi one of the main contributors to Bannertime. I'll keep this tutorial updated when new features come out.
    1 point
  23. I would only recommend using SVG sprite sheets if you enjoy spending hours trying to figure how to access your SVG and poor performance. And a loop was never your problem. The reason you see an animation in your second demo is because you're searching the entire document for elements with a .green-sock class. var sock = document.querySelectorAll(".green-sock"); You see 2 animations, but there's only 1 element being animated, and it's not even visible. It's the path in your symbol. Changing the symbol is causing the SVGs inside the buttons to be redrawn. See how animating the symbol here is causing all 4 buttons to change. So you had the right idea about trying to select the path inside your button like this. Technically, the path is in there, but you can't access it because it's inside a DOM that is not exposed. var sock = parent.querySelectorAll(".green-sock"); There's a lot overhead involved with tracking and updating changes to clones using the <use> element, which can lead to poor performance. If you want to clone something, create an actual clone using the cloneNode method.
    1 point
  24. I'm not really sure if you can even get inside SVGs used as symbols like that. Inspecting the DOM I found this nefarious shadow-root thing that gets created: Might want to start poking around google for some more info. There are some suggestions here that might prove useful: https://stackoverflow.com/questions/29629492/how-to-query-elements-within-shadow-dom-from-outside-in-dart
    1 point
  25. Everything about getBBox is a gotcha. For those that don't know what it is, it's a method on SVG elements that will return its position and size... var bounds = someElement.getBBox(); // => { x: 0, y: 0, width: 100, height: 100 } Sounds pretty useful as positioning is an important part of animation. The problem is that it reports its bounding box without any transforms applied. What does that mean? If you have an element at 0,0 and tween it to 100,100 using x and y, and then get it's bounding box, it will say it's still at 0,0. This goes for all transforms, x, y, scale, rotation, etc. Not very useful considering most animations use transforms. Things get even more confusing with group <g> elements, which don't have a fixed bounds like other elements. They are calculated based on the size and position of their children. If you call getBBox on a group, and it has transformed children inside of it, it will take into account those transforms. Look at this example. The green box is the bounds of the group. The red box is the bounds of the blue square. As you can see, the blue square is nowhere near the red box. It uses transforms to calculate some things, but not others, which can be really confusing. Check it out for yourself.... Another confusing thing about bounds is that they are axis-aligned (AABB), meaning they are parallel to the x and y axis. Take a look at what happens when you rotate an element. The blue boxes are the original bounds of the element, but they are no longer aligned, so a new bounds is created around them to make them aligned. This causes the bounds to separate and move away from the element. Look at how the green boxes don't even touch the elements on the left and right. You really need to see it in action to fully understand how it works. The red boxes are the bounds getBBox reports. The blue box is the transform being applied to the red box. And the green box is the transformed bounds, which is calculated by drawing an axis aligned box around the blue box. Notice how large the transformed bounds become at the end. That can cause stuff like hit testing with Draggable to fail. So there's a little info about bounds and why getBBox isn't that useful. Well, unless you want to find the original position and size of your element. But it's not a total loss. It just needs to be improved, so I made a little getBBox helper function that will calculate transformed bounds, which is what's needed to get correct positioning. /** * @param {SVGElement} element - Element to get the bounding box for * @param {boolean} [withoutTransforms=false] - If true, transforms will not be calculated * @param {SVGElement} [toElement] - Element to calculate bounding box relative to * @returns {SVGRect} Coordinates and dimensions of the real bounding box */ function getBBox(element, withoutTransforms, toElement) { var svg = element.ownerSVGElement; if (!svg) { return { x: 0, y: 0, cx: 0, cy: 0, width: 0, height: 0 }; } var r = element.getBBox(); if (withoutTransforms) { return { x: r.x, y: r.y, width: r.width, height: r.height, cx: r.x + r.width / 2, cy: r.y + r.height / 2 }; } var p = svg.createSVGPoint(); var matrix = (toElement || svg).getScreenCTM().inverse().multiply(element.getScreenCTM()); p.x = r.x; p.y = r.y; var a = p.matrixTransform(matrix); p.x = r.x + r.width; p.y = r.y; var b = p.matrixTransform(matrix); p.x = r.x + r.width; p.y = r.y + r.height; var c = p.matrixTransform(matrix); p.x = r.x; p.y = r.y + r.height; var d = p.matrixTransform(matrix); var minX = Math.min(a.x, b.x, c.x, d.x); var maxX = Math.max(a.x, b.x, c.x, d.x); var minY = Math.min(a.y, b.y, c.y, d.y); var maxY = Math.max(a.y, b.y, c.y, d.y); var width = maxX - minX; var height = maxY - minY; return { x: minX, y: minY, width: width, height: height, cx: minX + width / 2, cy: minY + height / 2 }; } The function takes 3 parameters. The first one is required, which is the element you want to get the bounds for. The second one, calculateWithoutTransforms, will calculate the bounds without any transforms if set to true. And the third parameter is an element to calculate the bounds relative to. By default it uses the SVG document the element is in, which is usually what you want, as it's kind of like the global space. I also have another version that will work around the Chrome bug that PointC came across. I was able to get around the bug by manually calculating the bounds of all the children in a group element instead of calling getBBox. So here's a pen of the original version... And the one with the Chrome workaround... (EDIT - looks like Chrome fixed the bug so this isn't necessary anymore) And one last tip. You can set outlines on SVG elements in your CSS in Chrome. This is really helpful as it will let you see where stuff is, like a group element, which is usually invisible. That makes positioning so much easier. You can even see it incorrectly apply an outline on paths inside a group, just like with PointC issue. g { outline: 1px dashed red; } path { outline: 1px solid blue; } Putting it all together: https://codepen.io/osublake/pen/ZxVmyx
    1 point
  26. Hello Craig (PointC), I believe this to be the webkit getBBox() svg bug report for what you are describing: Bug 53512 - [CG] getBBox() on a SVGPathElement with curves incorrectly includes control points https://bugs.webkit.org/show_bug.cgi?id=53512 It looks like it affects SVG <path> elements with cubic bezier curves that calculate more than what the actual getBBox() is. It shows as RESOLVED FIXED in the above bug report, but with webkit that doesn't mean anything since webkit is a groundhogs day of fun feelings! UPDATE: Here is a new Chrome webkit bug report ticket regarding this webkit bug, - ticket status is STARTED Issue 230599 getBBox() on a SVGPathElement with curves incorrectly includes control points https://bugs.chromium.org/p/chromium/issues/detail?id=230599 Issue 646525 SVG path and g element return incorrect values in getBBox result for some arcs https://bugs.chromium.org/p/chromium/issues/detail?id=646525
    1 point
  27. Answer to my own question regarding emitter position. I corrected the emitting position, align it to the centre of the arrow by getting the bounding box, using getBoundingClientRect() and just offset the emitting position accordingly. http://codepen.io/vm6ej04/pen/NpZNRw
    1 point
  28. On my recent handwriting demo (http://codepen.io/PointC/pen/MpLVvO), I hit a little oddity in Chrome involving the bounding box of a SVG group and incorrect data. To demonstrate this issue, I’ve created a 100x100 SVG and added a 100x100 rectangle for reference as a background. I then dropped in a circle and added 2 points to make it into a blob. These two elements are grouped. Both elements are within the 100x100 size of the viewBox and the group. You would expect a group size of 100x100 and x/y positions of 0, but Chrome reports back odd size and position data. Firefox, IE and Edge all calculate everything as you’d expect. Chrome seems to be calculating the group BBox based on the child elements plus the Bezier handle positions of the path(s). You can check it for yourself: http://codepen.io/PointC/pen/vxqgrr This can cause problems when trying to align the group to a motion path or animate it with precision to a new x/y position. Just something to watch for when creating your vector artwork. Happy tweening
    1 point
×
×
  • Create New...