Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 03/20/2018 in all areas

  1. Craig, was right. the all knowing Oracle of CSS made it look easy
    5 points
  2. Hi @jemes You should be able to correct that by setting your svg overflow to visible in your CSS or scaling the entire SVG instead of the path. Happy tweening.
    4 points
  3. The MorphSVGPlugin will only change the path data, the stuff inside the d attribute. <path id="start" d="M129.06,46.05" /> To change the fill, you will need to set that yourself. function morph (){ TweenMax.to("#start", 1, { morphSVG:{shape:"#end",shapeIndex: 12}, fill: "#ff0000", ease:Bounce.easeOut }) }
    4 points
  4. Thanks for the demo. Every animation (tween or timeline) has a progress() which you can control https://greensock.com/docs/TweenLite/progress() You can use your mouse position to change the progress value. I just dropped something in quick to give you an idea. You may have to tweak the value to your liking. Notice how the word test spins when you move your mouse
    4 points
  5. jQuery hover may be a better solution for what you need. https://api.jquery.com/hover/ See discussions below showing use of .hover and here's a card flip using .hover
    3 points
  6. SVG elements are created differently than html elements. Using vanilla js you create html elemnts using, var elem = document.createElement('div'); While you create svg you use following syntax, var elem = document.createElementNS("http://www.w3.org/2000/svg", "text"); I did quick search to see if jQuery supports creating svg elements but didn't find anything. Here is how you can create your element while still using jQuery. Also, from wherever you forked this demo, it is using really old version of Draggable.
    3 points
  7. Hi, The thing here is that componentWillUnmount is not designed for that actually. From the React docs: Basically the lifecycle methods are there only as hooks or event emitters, soto speak, pretty much like GSAP's own callback system. The onComplete, for example instance is not going to wait for something else to happen before executing the provided callback. Like that componenWillUnmount is not going to wait for some animation or anything else that might take more time than it's own execution to complete and remove the component. So that's not a good place for any of that type of code. In fact this particular hook is not as used as others lifecycle hooks. A good thing would be to know exactly what you're trying to do.For your code I assume that you're still working on the loading overlay from the other day. If you're trying to simply animate out the component without removing it from the DOM then I'd recommend a simpler approach, such as a regular event handler like a button or something similar. This sample animates a DOM element with a delay (wait two secs) and then with the button you can toggle the animation Another option is a callback in the GSAP instance itself. As I mentioned it'll be best to know exactly what you're trying to achieve and take it from there. Happy Tweening!!!
    3 points
  8. You can do it with a set ... but my bigger question is, what is it you're trying to achieve? I have a hunch that what you want to achieve can be better handled without multiple background images. https://codepen.io/sgorneau/pen/xWgepN
    3 points
  9. That's a good question, and a concept a lot of people might not be familiar with, hoisting. https://www.w3schools.com/js/js_hoisting.asp The JavaScript compiler will move all variable declarations (var) and named functions to the top of their scope. This crazy looking code is totally valid. num = 8; num += 4; var num; console.log(num); // => 12 That's because the compiler is reading the code like this. var num; num = 8; num += 4; console.log(num); // => 12 The same goes for named functions. The branchDraw function comes after I call it. branchGroups.forEach(branchDraw); function branchDraw() { ... } But the compiler reads it like this. function branchDraw() { ... } branchGroups.forEach(branchDraw); But that will only work for named functions. Assigning an anonymous function to a variable will result in an error. branchGroups.forEach(branchDraw); // TypeError: branchDraw is not a function var branchDraw = function() { ... } And that's because the compiler is reading it like this. It only moves the declaration to the top. The initialization of the variable, assigning the function to it, stays where it is. var branchDraw; branchGroups.forEach(branchDraw); // TypeError: branchDraw is not a function branchDraw = function() { ... } Knowing that, a good way to organize your code is by putting the "what" at the top, i.e. your variables, and the "how" at the bottom i.e. your functions. // What var a = 1; var b = 2; var c = add(a, b); var d = subtract(c, a); var e = multiply(d, b); // How function add() { ... } function subtract() { ... } function multiply() { ... } And here's a little video about hoisting.
    3 points
  10. If you watch the animation in the console, you'll see that the second group of masks is drawing correctly and at the right trigger. However, they are not affecting the appearance of the second set of branches. I think the problem is the second SVG is picking up the masks from the first SVG since they have the same IDs. I pulled the branches out of your site and put them into a pen. (Squeeze to a narrow window to watch both at once) Notice the 2nd copy of the SVG has the <defs> commented out and yet the masks are still working correctly. I think you'll have to switch to unique mask IDs.
    3 points
  11. OK, here goes round 2. A triggerElement needs to be an element that is rendered so ScrollMagic can get its position. A mask is not rendered, nor is any element inside <defs>, so try using another element.
    3 points
  12. Yay! I answered my first ScrollMagic question without resorting to, "You don't need ScrollMagic for that".
    3 points
  13. Hi @mbower Welcome to the GreenSock forum. Looks like you're getting some elements stuck with rapid hovering. If it were me, I'd create a timeline for each element and play/reverse on hover. That way nothing can get stuck in the 'back' position. Something like this: You'll also see that I added a .trigger class around each of your rotating containers. I did that because each of the rotating containers was the trigger and if you moved the mouse during the rotation, it would sometimes no longer be over the element and trigger the reverse. By adding a trigger div that isn't part of the actual rotation, the mouse is always over the target element throughout the rotation even if you move it a bit. I don't know if that's what you'll want to do in your final project, but it's just an idea. Hopefully that helps. Happy tweening.
    2 points
  14. I'm not sure I understand your question. Wouldn't it be as simple as: if (variable === true) { TL4.TL.add(someOtherTimeline, position); } ? (I have a strong suspicion that I misunderstood though) Or maybe you meant: if (variable === true) { var master = new TimelineLite(); master.add(TL1.TL).add(TL2.TL).add(TL3.TL).add(TL4.TL); //assumes you want them to play in sequence. } If you need help, the best thing to do is to create a reduced test case in Codepen (without your real NDA-clad assets) and post it here so we can poke around and see what's going on. Happy tweening!
    2 points
  15. I notice couple of problems, 1. You are using 3 year old version of TweenMax. 2. You are using will-change everywhere, which can be counter productive because it puts additional work load on GPU memory if I am not mistaken. 3. You were using Tween but updating your scale using onUpdate which is unnecessary as you can directly tween your element. See if following demos help,
    2 points
  16. If I understand your desired outcome correctly, I think you'd want to use svgOrigin instead of transformOrigin. var pieFromLand = { opacity: 1, rotation: -120, svgOrigin: '171 171' }; More info: https://greensock.com/gsap-1-16 Happy tweening.
    2 points
  17. @Sahil many thanks! Just what I needed, super appreciated! And yes, that is old draggable, I started from an old test pen when I was troubleshooting this, then didn’t update it coz I wasn’t using Draggable in his context. thanks again!
    2 points
  18. Yep.. I think everyone would have to agree that we love to hate IE and MS Edge
    2 points
  19. Thank you! This fix solved the issue. and I still hate IE
    2 points
  20. Great In related news, as some might know I'm working with Three.js as well as GSAP right now, and the docs/communities are simply not in the same league. It's weird to go from Three.js's documentation to GSAP's, and to suddenly have some actual explanation for things! Would you believe it? A documentation that actually tries to make it easier to use a product...
    2 points
  21. Hmmmm... sounds kind of complicated. SVGs can be converted into images. If you have HTML, you can put it inside of a <foreignObject> SVG element, and then convert the SVG into an image. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject Not sure how you were calculating the video time, but if you could get that dialed in, then you could just draw the video and svg image on a canvas using the .drawImage() method. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage ctx.drawImage(video, 0, 0); ctx.drawImage(svgImage, 0, 0); Actually, you could probably just add the video to the foreignObject, and capture the video with everything else. After that you can extract an image from the canvas using the .toDataURL() method. https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL Once you have all your images, then you can convert them into a video using some encoder. I only used gif.js because it was easy to demonstrate inside of a browser, but you can use whatever. @swampthang might be able to expand on what I just described. I know he has a lot of experience with converting GSAP animations into video.
    2 points
  22. @Sahil and @OSUblake Thank-you very much for your help. I could finally manage to record the animation. Had to play the animation (progress) and <video> (currentTime) frame by frame. It was a little tricky for the video element because the number of frames may be different from the animation. However, use the gif.ls lib did not work for me because of the quality of the image and I just could not make html2canvas work.. Always got blank screenshot. So I added a delay of 1 second on each frame and console.log of some string. Then running headless browser (chrome) I could get console messages and take screenshot everytime this string was printed.. Each screenshot takes about 500ms so I still had some extra time to wait for the next frame. After that ffmpeg to make the video from images. It worked great and excellent quality. Totally recommend for who needs to get this same job done.
    2 points
  23. yeah, like Blake said, a demo would really help. For instance just looking at this.superTL.add(TL2.start, 2) we have no idea what TL2 is. I would assume it is a timeline but timeline's don't have a start method, so we then have to guess that TL2 is a custom object that you created with a start method but we don't know what TL2.start() returns. And unfortunately one assumption leads to another and its difficult to offer any real actionable advice without a simple, reduced demo that we can edit. I'm sure once you have a demo running we'll be able to figure it out.
    2 points
  24. The dollar sign syntax ${} is part of a string template literal. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
    2 points
  25. Yep - Blake is exactly right. You have to create a timeline for each of the mask groups that are hitting separate ScrollMagic triggers . Declaring the variable inside the loop should take care of it for you. Happy tweening.
    2 points
  26. I don't know ScrollMagic, and it's not a GSAP product, but maybe you need to create a new timeline. // const tl = new TimelineMax() for ( var i = 0; i < layerOneMask.length; i++ ){ const tl = new TimelineMax() tl .from(layerOneMask[i], 0.5, { drawSVG: 1, ease: Power2.easeOut }) .from(layerTwoMask[i], 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25") .from(layerThreeMask[i], 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25") .from(layerFourMask[i], 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25"); const scene = new ScrollMagic.Scene({ triggerElement: layerOneMask[i], offset: -300 }) .addTo(controller) .setTween(tl) }
    2 points
  27. Hello @RolandSoos This looks like a browser bug in MS EDGE. Since MS EDGE uses webkit as its render engine then it is susceptible to the same type of rendering bugs. So you need to use CSS transform perspective() function instead of CSS perspective property, then you are still using perspective Add this CSS rule right below your .outer CSS rule. It only targets MS Edge /* target only MS EDGE, and use transform perspective() instead of perspective */ @supports (-ms-ime-align:auto) { .outer { -webkit-perspective: none; perspective: none; -webkit-transform: perspective(1000px); transform: perspective(1000px); } } Tested in latest MS Edge 41 on latest Windows 10 Also you might want to add a slight rotation: 0.01 to help it animate more smooth on a new rendering layer. Happy Tweening Resources: CSS perspective property: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective CSS perspective() transform function: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/perspective
    2 points
  28. Great catch, Craig. That's definitely a browser rendering bug. I worked around it now by adding this to the tween: strokeMiterlimit:Math.random(). Silly, I know, but changing the strokeMiterlimit is a way to force the browser to re-render the path/mask. Seems to work well for me now. I'll add this fix to DrawSVGPlugin itself in the next release as well.
    1 point
  29. As usual, @PointC is right on. For the fun of it, I made a little dynamic demo that'll plot things around a circle and show you how to convert angles into the drawSVG % values so that you can do your variables accordingly: Just click on any of the green dots and you should see what I mean. That assumes you want to always start the drawing at the top. You could change that, of course. Hopefully this gets you headed in the right direction. In any case, a mask is likely what you need. Happy tweening!
    1 point
  30. I'm not sure I follow. Do you mean the white rectangle in my demo? If so, that can be removed (or change the color) and the mask will still be fine. The white stroke in the mask is just what will be revealed, but it doesn't have to be over white. Is that what you meant?
    1 point
  31. Hi @DevSaver For a dashed line and DrawSVG, you'll need to use a mask. I wrote about that here: Using variable shouldn't be any problem. You could do something like this: You may also want to take a look at our big 'circle start point' thread. Hopefully that helps. Happy tweening.
    1 point
  32. 1) Exactly. 2) You shouldn't need to mess with autoRemoveChildren, no. If I were you, I'd probably just re-create a new TimelineLite instance each time you need to play things in whatever order you want, and add() the timelines to it accordingly. You don't have to keep re-using the same master timeline (though you're welcome to if you prefer). Remember, a child animation's playhead is always controlled by its immediate parent (their playheads are aligned). This gives you lots of flexibility and keeps things pretty intuitive. Have fun
    1 point
  33. 1 point
  34. In that case, I'm glad I could help!
    1 point
  35. Here's how you could set the mask dynamically.
    1 point
  36. Oh yeah, nice catch! The mask urls are the same for both groups. <g id="branch-layer-four" fill="#cfcbc8" fill-rule="evenodd" mask="url(#branch-mask-four)"></g>
    1 point
  37. Look at @OSUblake go today - two ScrollMagic answers without rewriting the entire project and using his catchphrase. I find anything involving ScrollMagic much easier to debug with the addIndicators plugin. You'll immediately see if the triggers are where you think they are. http://scrollmagic.io/docs/debug.addIndicators.html
    1 point
  38. Hi @GRoliins I can't tell what's going on based on the code you provided. Can you put that in a simple demo? I think you are just referencing stuff incorrectly.
    1 point
  39. Your wish is my command, @Acccent Done.
    1 point
  40. Thanks for the demo, but that is still a whole lot of code to look through. I'm actually not sure what the question is either. You mentioned things don't go smoothly. Do you mean they stutter or don't animate at the correct time? I'm just not clear on the nature of the problem. One thing I do see is a bunch of CSS transitions on elements. Are you perhaps creating a conflict between GSAP and CSS animations? That can definitely lead to things not running smoothly as there would be a fight for control. If you could trim that demo down to just a few elements to isolate the issue, I'm certain we can point you in the right direction. Happy tweening.
    1 point
  41. hmmm.... I'm not sure then. It's not related to GSAP, but it does seem something that's specific to Edge. @Jonathan is the all-knowing Oracle of CSS solutions. If he's around, maybe he'll jump into the thread with some good ideas.
    1 point
  42. Hey There, This is my first post here at GSAP forums. Loving the tool so far! I'm a designer that's learning JS, so my code is probably going to be meh. I'm having a little problem though, I have the animation running just fine, but wanted the three circles to continue to spin after the main animation. So I used onComplete to run another function that has the continued animation inside. It seems to work "kind of". The problem is only one of the circles continues to spin. It looks like it tries at first and then gives up and rotates just one circle. What am I doing wrong (I'm sure a few things)? Any help or tips would be much appreciated.
    1 point
×
×
  • Create New...