Leaderboard


Popular Content

Showing most liked content since 12/16/2017 in all areas

  1. 8 points
    Hi alessio, Just use transformOrigin. TweenMax.fromTo('.test', 0.6, {scale: 1}, {scale: 1.1, repeat: -1, repeatDelay:0, yoyo: true, transformOrigin: 'center center'});
  2. 8 points
    That's because when a tween is defined it is rendered immediately to the start position, usually only noticed in the case of 'from tweens'. Because you are using set at the start of timeline, it is behaving same. You can set immediateRender to false on first tween and it will behave as expected. Well and you can use just fromTo tween to same thing. // To tween tl.set(".slide", { opacity: 1, immediateRender: false }); tl.to(".slide", 1, { x: 300, opacity: 0 }); // fromTo tween tl.fromTo(".slide", 1, { opacity: 1, immediateRender: false }, { x: 300, opacity: 0 });
  3. 8 points
    Hello dear friends, No doubt Christmas is coming ... Hi @Jonathan - sorry, when I saw your new portrait, I just felt the need to redecorate my tree to dedicate it to the GreenSock community. I coded my first Christmas tree inspired by the work of Petr Tichy (here) Dec 2015. It was one of my first exercises. Kind regards Mikel
  4. 7 points
    Hi @Raistlin That's a nice effect. Are you asking if that website uses GSAP or just how to make something like it in general? As far as I can tell, they're using CSS transitions. This would normally fall outside the scope of GSAP support, but coincidentally I'm in the middle of creating something quite similar for some interactive infographics so I'll show you what I'm doing. I'm using SVGs in my project, but you can do it with some plain old divs too. The secret is setting the origin point for the divs so they go around the circle correctly. That website is using a pretty big parent circle (3000px) so they set the origin point of the divs to the center of that circle (1500px) and then rotate them. The fade at the top and bottom is accomplished with an additional div over the top of everything with a gradient background image that's transparent in the middle. Here's a basic example of what you could do: I'm manually setting the start rotation of each box with a set() tween, but if you had a lot of elements, you could get them to their starting positions with a loop too. To get the infinite part to work, I simply set() the rotation of each box back to the beginning as it drops down out of view. I just use a simple counter to pick which box is set back to the beginning and when the counter reaches 1, I reset it back to 6. Again, the fade-out at the top and bottom is created with a gradient div over the top of everything. There would be other ways to approach this, but this is how I'd do it. Hopefully it gives you a starting point. Happy tweening and good luck with your project.
  5. 7 points
    I'd definitely echo @GreenSock's advice and convert that to a path. I've fought with many circle animations and that is the easiest approach. (You can also convert it to a path before exporting from your vector software if you like.) I started a thread last year about SVG circle fun in the various browsers. It may be of interest to you. Happy tweening.
  6. 7 points
    Hi and welcome to the GreenSock forums. The way I normally attack this situation is using React's lifecycle methods, most specific the componentDidMount method. With that you know for sure that all the child have been rendered before making the animation. This is a sample that uses a code similar to that. Unfortunately I don't have any samples around with the specific behavior you need but hopefully you'll get the gist of it: Basically when creating each child (which in this case come as a hardcoded array, but getting the data via props shouldn't be much different) you give it a unique ref attribute to each which then you can use to loop and create the timeline or the stagger instance if you like (to create a stagger instance just reach to the array in the props and that should do it), then create the timeline and finally play it. I'll try to whip something during the afternoon that matches what you need. This is another sample but it uses a different approach, since it uses Transition Group since the elements are mounted and unmounted depending on the user interaction. It doesn't use a timeline or stagger, just a simple delay. This relies in the fact that the code is executed very fast (for larger apps you could consider server side rendering or perhaps another approach, once all the elements are rendered, perhaps pagination to render a small chunk of elements) and that the components are rendered in the sequence they exist in the app's data (again hardcoded in an array). But considering the fact that in a real app React will render all those child components at once so we can rely on that delay to create the stagger effect. Pay no attention to the code that's commented out, that's there in case someone needs to use CSS Transitions. The only catch is that the duration const used in the <Transition> component has to be the same that the one used in the GSAP instance, otherwise the component mount/unmount will be out of sync with the animation. https://codesandbox.io/s/7Lp1Q8WBA Hope this helps. Happy Tweening!!!
  7. 7 points
    Hello dear friends, Kind regards Mikel
  8. 7 points
    I think I see what the problem is - GSAP doesn't natively interpolate "vw" or "vh" units (though it likely will when 2.0.0 is released, but that won't be for a few months most likely). It can set() them directly, but interpolating is different. In this case, the inbetween values are converted to px. So here's a solution that gives you the same result but just does the conversion for you at the right time: Is that what you're after?
  9. 7 points
    Hi @ericshew The most noticeable problem is line 19. //Switch this tl.reversed() ? tl.play() : tl.reversed(); //to this tl.reversed() ? tl.play() : tl.reverse(); That should get everything working for you. It can certainly work with playing and reversing the timelines like that, but you'll see some harsh morph jumps when hovering on/off quickly between <li> tags. You could get some smoother morphs with rapid hovering like this: Just my two cents worth. Hopefully that helps. Happy tweening.
  10. 7 points
    yPercent is the easiest, but the slowest because it has to calculate more stuff because it's based on the size of the element. And the reason for the translate and matrix transform is so that you can animate yPercent and y separately. TweenLite.to(box, 1, { yPercent: -50, // translate value y: 100 // matrix value }) GSAP has some performance stuff built in. Inspect your middle box (box2). GSAP switches from 3d to 2d at the end. However, if you set force3D to true, it will only use 3d. But really, your best bet is to just test and see what works best for what you're doing. Performance will vary a lot depending on what you're animating, and the browser. Setting will-change: transform in your CSS might provide the best performance for Chrome, but if you try that in Firefox and the element is too big, you might get a warning in your console saying that the surface area is too big, and will-change has been canceled. It's definitely frustrating figuring out what works best for everything.
  11. 7 points
    Hi @DD77 pls check these out : and the second one: are these what you looking for?
  12. 6 points
    Hello @DD77 You could try and use a SVG displacement map (feTurbulence). Here is an example using it with GSAP Happy Tweening!
  13. 6 points
    Hi @alessio Welcome to the forum. You just need to add transformOrigin to your tween so the element scales from the middle like this: TweenMax.fromTo('.test', 0.6, {scale: 1}, {scale: 1.1, transformOrigin:"center center", repeat: -1, yoyo: true}); More info here: https://greensock.com/docs/Plugins/CSSPlugin#transformOrigin Hopefully that helps. Happy tweening and welcome aboard.
  14. 6 points
    Sure, GSAP can do everything anime can do plus a lot more. And GSAP is faster too. It looks like the demo you provided leverages some other helper classes pretty heavily, and anime was only used for small portions. Here's a fork where I swapped in GSAP for the anime code: The structure of things seemed a bit convoluted so I may have missed something, but it appears to work just fine with my edits. Is that what you were looking for?
  15. 6 points
    Hi @ericshew I think the easiest approach would be to use the x/y attributes. Here's a fork of your pen with that possibility. That works well for circles(cx/cy) and rectangles, but you can also get the BBox of paths and loop through for those as well. We had a similar question here: Here's the demo I made as an answer to that question. Hopefully that all helps. Happy tweening.
  16. 6 points
    Hello @hanslibuzli .. Regarding the trailing pixels that you see, that @OSUblake advised about. I cant see what your code is like, but i have seen this in webkit based browser before. You could try setting -webkit-backface-visibility: hidden; to that element. That usually helps with that sort of evil. If it doesn't help you might want to create a reduced codepen demo example
  17. 6 points
    the way I understand it you need a repeating animation to happen for the entire duration of another animation and all animations need to be in the same timeline. I would suggest instead of putting the repeating animation in the timeline, just use tweenTo() to create a tween from the repeating animations start time to the end time of the other animations. Using PointC's great demo... var rain = new TimelineMax() rain.set("#stage", {xPercent:-50, yPercent:-50}); rain.set(".rain2", {y:-500}); rain.to(".rain1 , .rain2", 1.5, {y:"+=500", repeat:-1, ease:Linear.easeNone}); var box = new TimelineMax(); box.to("#box", 3, {x:600, ease:Linear.easeNone}); var main = new TimelineLite({id:"main"}); main.add(box); main.add(rain.tweenTo(box.duration()), 0) GSDevTools.create({animation:"main"}); DevTools now has a finite time and it controls one timeline which includes all the animations. Docs for TimelineMax.tweenTo()
  18. 6 points
    Hi @Annika Providing a simple demo is always the best way to get help, even if it doesn't work. You only have 1 object, demos, but you need 2 objects. The best way to go about what you're doing is to create an array of objects. You can add more animations later by adding another loop, but this should help you get started.
  19. 6 points
    Here is how I would do it.
  20. 6 points
    I'm not sure if it will help with what you're doing, but the ThrowPropsPlugin has a track() method that will allow you to track velocity. https://greensock.com/docs/Plugins/ThrowPropsPlugin Happy tweening.
  21. 6 points
    Hi @hemmoleg Welcome to the forum. I see you're using TweenLite so perhaps you didn't load the EasePack? Another thing to check is if you've put the ease in the correct place in your tween vars? Here's a simple pen with a few different eases. My pen loads TweenMax which also loads the EasePack, but if you're loading TweenLite only, you need to load the EasePack too. TweenMax loads: TweenLite TweenMax TimelineLite TimelineMax CSSPlugin AttrPlugin RoundPropsPlugin DirectionalRotationPlugin BezierPlugin EasePack If you have other questions, a demo is most helpful in getting you the best answers. Hopefully that helps. Happy tweening.
  22. 6 points
    Congratulations @Dipscom -- your membership in the comma club includes this fancy t-shirt. Only 999,000 more posts to get into the two comma club.
  23. 6 points
    Hey guys, just an FYI. We're going to be resetting everyone's posts and likes counts soon. The logs are getting too big. I think a fresh start will be nice and will even the playing field for those that came in a little late. Happy helping in 2018! just kidding of course Looking forward to #1000
  24. 6 points
    Hi @jesper.landberg Nice use of mix-blend-mode! It looks like @Sahil might have got you going in the right direction. The thing to understand about the canvas context is that it's more of a graphics API, so there really aren't any built in objects to animate. Whatever properties you want to animate, just make an object with those properties, and animate that object. One thing to be careful about when using lerp is that it might result in a lot of unnecessary, tiny calculations (see Zeno's paradox of motion). The paradox is that you can never move to a goal because it requires an infinite number of steps. Computers do have limits, so that's technically not possible, but it's usually a good idea to only lerp when the difference between the values is large enough to be noticed. So something like this. var dx = mouseX - circle.lastX; // Only lerp when the difference is greater than 0.01 // Could be any threshold, but something in the range of 0.01 to 1e-6 // should work fine for what you're doing if (Math.abs(dx) > 0.01) { circle.lastX += dx * 0.25; } else { circle.lastX = mouseX; } For more info about animating canvas with GSAP, here are some threads worth checking out.
  25. 6 points
    Diaco beat me to it Anyways, here's what I came up with: Edit: movement triggers when hovering. Edit2: Made the flow feel more natural. Added a slight rotation to see it from the side. If you want to see it from the top, just remove the rotation from the stage class.
  26. 6 points
    Hi Tasty, If you remove the ease on the stagger, you can clearly see why it's delayed: Using the 'visibility' property: Low duration stagger:
  27. 6 points
    Hi @geddski At first, for the Club GreenSock bonus plugins on Codepen; you can find the codepen safe versions here: https://codepen.io/GreenSock/pen/OPqpRJ And about your issue; pls try to wrap your spacing entities with a span tag. <span>&nbsp;&nbsp;.....</span> Splittext completely respects to <br> tags. btw, you can use "&emsp;" instead of "&nbsp;"
  28. 6 points
    Hi rgfx Your section's width is bigger than its child and content doesn't overflow, try to remove section's width in your CSS or set to smaller value
  29. 6 points
    Hi Rick May pls check this out :
  30. 6 points
    Hi @shaunhurley The callback system for Draggable works just like the one TweenLite/Max and TimelineLite/Max. If figuring out how to set the scope isn't obvious, then it's probably due to how your code is written. My guess is that you're doing something like this, which is what all the examples in the docs do. There is a way to set the callback scope to the target when you create draggables like that, but I'm not going to get into that because it requires more work. Draggable.create(".elements", { ... }); To set the callback scope to the target, you should be working at the element level, creating one draggable at a time. This may require you to use some sort of loop if you want to create more than one. var draggable = new Draggable(theElement, { throwProps: true, onThrowComplete: update onThrowCompleteScope: theElement }); And knowing how to bind a function can simplify how you define callbacks in GSAP, or any library for the matter. Consider the following. You want to use a scoped callback for different actions, and want to pass in a couple of parameters to that callback. Pretty messy, right? var animation = TweenLite.to(theElement, 1, { onUpdate: update, onUpdateParams: [100, 500], onUpdateScope: theElement, ... }); var draggable = new Draggable(theElement, { throwProps: true, onDrag: update, onDragParams: [100, 500], onDragScope: theElement, onThrowUpdate: update, onThrowUpdateParams: [100, 500], onThrowUpdateScope: theElement }); function update(min, max) { console.log("this", this); // => theElement console.log("min", min); // => 100 console.log("max", max); // => 500 } Instead of specifying each scope separately, you can use "callbackScope", but it's still kind of messy. We were only able to get rid of 1 line of code. var animation = TweenLite.to(theElement, 1, { onUpdate: update, onUpdateParams: [100, 500], callbackScope: theElement, ... }); var draggable = new Draggable(theElement, { throwProps: true, onDrag: update, onDragParams: [100, 500], onThrowUpdate: update, onThrowUpdateParams: [100, 500], callbackScope: theElement }); This is where creating a bound function might be useful. You can combine everything into a single, reusable function. The first parameter is the scope. Any additional parameters will be passed into the callback. var boundUpdate = update.bind(theElement, 100, 500); var animation = TweenLite.to(theElement, 1, { onUpdate: boundUpdate, ... }); var draggable = new Draggable(theElement, { throwProps: true, onDrag: boundUpdate, onThrowUpdate: boundUpdate }); Much, MUCH cleaner!
  31. 5 points
    You need to think about what the loop is doing. It's running a hit test on EVERY element, so adding a class will only remain if the last hit test you run is true. If you drag something over the first element, you'll see that your code works. The loop is running backwards, so the first element is the last one you hit test. To fix the problem, you need to stop running the loop on the first hit test that is true. You can stop a loop by using a break statement. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break
  32. 5 points
  33. 5 points
    That is so true. I've noticed that a lot of people think GSAP is only for HTML and SVG, even from long time users. That needs to change. Somewhere on my todo list is to make some tutorials showing how to use GSAP + canvas. It's hard enough trying to find a decent canvas tutorial, let alone one that uses GSAP. To get a regular polygon to start at 12 o'clock, you just need to swap the sin and cos calls, and negate the y value. // To start at 3 o'clock var x = centerX + radius * Math.cos(angle); var y = centerY + radius * Math.sin(angle); // To start at 12 o'clock var x = centerX + radius * Math.sin(angle); var y = centerY - radius * Math.cos(angle); And to draw your particles, canvas has a new feature called Path2D that will allow you to create and combine reusable paths, so you could use the same path for all your particles. Here's a quick fork of your last demo using Path2D with the corrected angles. The formula used for a regular polygon is based on a circle, so it seems that the center of a polygon should be the same as the circle that circumscribes it, but look at what happens when the polygons has an odd number of sides. It's not symmetrical going up and down, so the top is further away from the center than the bottom. That means the center needs to be moved down a little if you want to have it perfectly centered inside a container. So we need to calculate the bounds of the polygon, find the difference between the height of the circle and the polygon, and then offset it half of the difference. And to make the shape and your animations responsive, it will be easier if we calculate the points of a polygon with a radius of 1, and then scale those points based on some desired scale/radius. That's basically how an SVG works. Check out how everything is nicely centered and responsive in this demo. I'll incorporate that in another version of your demo, which I'll have to do later as I gotta run.
  34. 5 points
    @DD77 The below example is just quick and dirty but you will get the idea: This is how you can use hover (mouseenter and mouseleave) using a timeline instead of just a tween.
  35. 5 points
    Hi @Anya You need to save a reference to a timeline if you want to check if it's active.
  36. 5 points
    Actually, this might be easier. I just modified the closestPoint function from this d3 demo. https://bl.ocks.org/mbostock/8027637
  37. 5 points
    Most questions usually get a response within a couple of hours. Maybe longer on the weekends. What you're trying to do makes more sense after looking at that site. And it looks like they are also using GSAP to animate those particles. That's a pretty advanced animation, but the basic idea is that you animate a particle along a path, and rotate the particle around its position on the path while scaling it. Easier said than done if you've never worked with canvas before. The hardest thing to understand is probably transforms, which that animation uses extensively. Here's a very quick and dirty demo showing how that animation could work. And be sure to check out that thread I posted above for some tips on getting started with canvas and GSAP.
  38. 5 points
    A complicated shape where you can drag along the x and y axis would probably require finding the closest point on a curve. http://phrogz.net/svg/closest-point-on-bezier.html That's based on this SO answer. https://stackoverflow.com/a/44993719/2760155 Definitely not an easy task. For dragging along a single axis, this thread might be of help.
  39. 5 points
    Hello @alessio and Welcome to the GreenSock Forum! You can find more info on transform-origin and CSS transforms here: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms Happy Tweening
  40. 5 points
    And just an FYI if you ever want to know what GSAP has set as the x, y or any other transform related value you can log out myElement._gsTransform. You will get an object that has all of the properties shown below Object { force3D: "auto", perspective: 0, rotation: 0, rotationX: 0, rotationY: 0, scaleX: 1, scaleY: 1, scaleZ: 1, skewType: "compensated", skewX: 0, skewY: 0, svg: false, x: 100, xOffset: 0, xPercent: 0, y: 0, yOffset: 0, yPercent: 0, z: 0, zOrigin: 0 } open console to see values...
  41. 5 points
    Hi @hanslibuzli GSAP taps into the RAF ticker requestAnimationFrame() web API. But the scroll event is firing before the RAF is fired, since RAF is fired on every frame tick, whereas the scroll event is fired at a very high rate. The best way to optimize scroll performance is with RAF like your trying to do but also taking advantage of debouncing. But you might want to look into this article by Paul Lewis regarding this https://www.html5rocks.com/en/tutorials/speed/animations/ You might also want to look at throttling the scroll event. Happy Tweening!
  42. 5 points
    You and @Jonathan pretty much covered what I was going to post. Basically that SVG is downright crazy!!! I've never seen such a complicated SVG before. Graphically it doesn't look complicated, but it took Illustrator and Inkscape around 10 minutes to load it. What's weird is that you can draw it immediately to a canvas element without any problems or delays. 630kb is the file size. The size in memory will be MUCH higher than that. If your image is 3000 x 2500, and each pixel is 3 bytes... 3000 * 2500 * 3 => 22,500,000 => 22.5MB On a HiDPI display like a phone, your SVG would be even higher than that. If the device pixel ratio is 3, then the browser would be drawing your SVG at 9000 * 7500. 9000 * 7500 * 3 => 202,500,000 => 202.5MB!!! And now your phone is out of vram! You'll probably need to break your image up into smaller images, and only display what is visible with a little buffer around the edges. Pretty much the same thing that tile-based games do. https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps
  43. 5 points
    I believe the problem is actually caused by the fact that for <circle> elements, Apple makes the origin of the stroke at a completely different spot than all the other browsers. It has nothing to do with rotation or a bug in GSAP. It's just an annoying choice Apple made. You can resolve it by converting the <circle> to a <path> so that the coordinates are explicit about where to start. MorphSVGPlugin has a super convenient method for doing this, so all you'd need to do is add this line to the top of your JS: MorphSVGPlugin.convertToPath("#progress"); But I noticed you're not a Club GreenSock member, so you don't have access to MorphSVGPlugin. I ran the conversion for you and got this, which you can just swap in for your <circle> instead (thus you wouldn't need MorphSVGPlugin): <path class="st2" id="progress" d="M589,319 C589,468.1,468.1,589,319,589,169.9,589,49,468.1,49,319,49,169.9,169.9,49,319,49,468.1,49,589,169.9,589,319z"></path> Does that help?
  44. 5 points
    I see @OSUblake is about to respond so I'm sure he will have some great insight. As Jonathan said, that SVG is insanely complex. I saw 1500 classes defined and what looked like hundreds of gradients and paths. I tried pasting the raw html source of the svg into CodePen and my browser locked up and the fans went nuts (i suspect CodePen was choking trying to apply the syntax highlighting). I did a quick screen capture of the svg at around 1500 x 1500 and my busted up iPhone6 running iOS8 had no problem with the image of that size. Quick test using a png: https://s.codepen.io/GreenSock/debug/eyEWyw This is definitely appears to be a case of a complex SVG sucking too many resources to render and update. I wish I had better news for you.
  45. 5 points
    Hello @rgfx. In GSAP you can force an element that uses only matrix() or translate() to use matrix3d() or translate3d() if you add either a rotation, skew, or translateZ (z). So you will have to play with it and have your browser inspector open to view what the element is using. If your doing just a scale or translate (x or y), then just add a slight rotation of 0.01, which can give you an output of either matrix3d() or translate3d(). Happy Tweening
  46. 5 points
    Hello @Tasty Sites Here are 2 other ways of doing a typewriter effect in GSAP: This animates CSS width using steppedEase And this animates CSS opacity (autoAlpha) using steppedEase: Happy Tweening
  47. 5 points
    Great solution, Sahil! @vulture, Welcome to the forums. I had a bit of trouble assessing what you wanted your code to do. I'm sure you're just starting out with GSAP, no worries, there is a lot to explore. One of the great strengths of GSAP is its ability to group animations together in sequences called Timelines. Animations in a timeline do not have to follow a strict one-after-the-other pattern. They can overlap and even have gaps. You can even nest timelines in timelines. As you can see by Sahil's demo the 2 animations follow perfectly in sequence. No need for onComplete callbacks and setTimeout(). Also, if you want to set properties instantly (no animation) you can use the set() method. https://greensock.com/docs/TweenLite/static.set() I'm sure you will love timeline's once you get comfortable with them. Take a look at these articles / videos https://greensock.com/sequence-video https://greensock.com/position-parameter Good luck on your project. Happy Tweening!
  48. 5 points
  49. 5 points
    Not sure what happened to demo I posted, it was working while I was editing it. Anyway, you can do it like this and save yourself from all the calculation.
  50. 5 points