Popular Content

Showing content with the highest reputation since 06/22/2018 in Posts

  1. 8 points
    The secret sauce... Wave === Sine.easeInOut
  2. 7 points
    Looks like they're using canvas for that effect. @Sahil has a nice demo and tutorial about canvas mouse follow in this thread: You could make it happen with SVG too, but canvas would probably be a bit easier in this case. Good luck and happy tweening.
  3. 7 points
    The word React is like the Bat-Signal for @Rodrigo. If we need him, perhaps we just fire up the Rodrigo-React-Signal.
  4. 7 points
    Good news: Google pushed GSAP 2.0 to their CDN recently (for use with DoubleClick and AdWords ads): TweenMax (most popular): https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_2.0.1_min.js Everything else: https://s0.2mdn.net/ads/studio/cached_libs/timelinelite_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/timelinemax_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/tweenlite_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/scrolltoplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/cssplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/easelplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/raphaelplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/bezierplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/cssruleplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/roundpropsplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/modifiersplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/directionalrotationplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/pixiplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/colorpropsplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/textplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/attrplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/endarrayplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/easepack_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/draggable_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/jquery.gsap_2.0.1_min.js Notice they removed the MD5 hashes that made the old 1.18.0 links so cumbersome. Yay Google! Codepen also updated their "Quick Add" menu to point to 2.0.1. If you get news of other ad networks that have similar news to share, feel free to post here. Enjoy!
  5. 6 points
    The progress() method is available for tweens too. https://greensock.com/docs/TweenMax/progress() If you have a bunch of loose tweens, I'd recommend a timeline for easier control, but that's just my two cents worth. Happy tweening.
  6. 6 points
    Welcome! This forum is being provided as a free service to connect talented GSAP animators with those looking to hire them. Please read this entire post before participating. When Posting a Job: Describe the project's technical requirements and provide links to similar examples and/or storyboards (if available). List the start and end dates of the project (or at least a rough timeline). Provide an estimated compensation range. The more detailed you are in describing your needs, the better your odds of success. If you omit the budget, there's a high risk that qualified candidates will assume it isn’t worth their time. Remember that talented GSAP experts are typically in high demand. We encourage candidates to post public replies to show they're interested, but further coordination should be handled privately either through the forum’s private message system or email. It's probably best not to post your email address in a public forum. Once a candidate is found, please update the post to let others know that the job is no longer available. Freelancers Feel free to post your availability in this forum proactively. Include links to your own website, portfolio, CodePen profile, etc. so that people can get a feel for your style and skill level. It’s a great idea (though not necessary) to post a price range for each example as well. Please represent your skills accurately and include proper attribution for work that’s not yours. One of the keys to a successful working relationship is managing expectations (both sides)! Always under-promise and over-deliver. Pricing a project We generally recommend agreeing to an overall project price and timeline ahead of time rather than billing a flat hourly rate. Some developers work twice as fast as others, so an hourly rate isn’t an accurate gauge of overall cost. But for open-ended projects, we understand that hourly rates might be the best fit. Additional notes We are starting this service on a trial basis. Freelancers are NOT employees of GreenSock. Anyone on the Internet can post here. GreenSock is not liable for anything that happens before, after, or during the life of your project. Please don’t contact us for arbitration help. It’s fine if you want to simply report abuse. If we receive complaints about your conduct (employers or developers), you may be banned from posting here. Again, we make no promises to investigate each and every claim or get into "he said, she said" back-and-forth, so it's in your best interest to keep things positive and exceed expectations. Make us proud. GreenSock does not research or endorse any of the parties posting here. Please let us know if you have any suggestions for making this service even better. Happy tweening!
  7. 5 points
    It looks like this is the 3rd time you've posted a version of this question about your canvas project. In your most recent post (which you've now deleted), Jack gave you this answer: We're more than happy to help with GSAP related problems, but these general JS and canvas questions should be posted on a more general forum. Perhaps you could try Stack Overflow.
  8. 5 points
    Performance optimization is a pretty huge topic, so it's very difficult to know exactly what's causing the problems on your particular page. In general, the biggest problem tends to be the browser's graphics rendering, so make sure you're affecting the smallest number of pixels possible, that the bounding box for those changes is as small as possible, and that you're not animating things that could affect document flow (like top/left, margin, etc.) If you still need some help, feel free to post a link or a reduced test case so we can see what's going on. Happy tweening!
  9. 5 points
    @DjKarimi thanks for advocating for GSAP among your peers. I hope your enthusiasm rubs off on them While I'd admit that the particular code chunk you quoted from anime is indeed nice and concise, there are some tradeoffs performance-wise with implementing things that way (for any engine) which is why we didn't do that with GSAP. But it's entirely possible to get almost exactly the same concise code chunk with GSAP using a single helper function as I demonstrate here: Here's the helper function : function multiTo(target, duration, vars) { var tl = new TimelineMax(vars), copy = {}, reserved = {delay:1, onComplete:1, onCompleteParams:1, onCompleteScope:1, useFrames:1, onUpdate:1, onUpdateParams:1, onUpdateScope:1, onStart:1, onStartParams:1, onStartScope:1, onReverseComplete:1, onReverseCompleteParams:1, onReverseCompleteScope:1, onRepeat:1, onRepeatParams:1, onRepeatScope:1, yoyo:1, repeat:1, repeatDelay:1, data:1, paused:1, reversed:1, callbackScope:1, id:1, yoyoEase:1}, val, i, p, d, v; //create a copy of the vars object that doesn't have any of the values that are reserved for the timeline for (p in vars) { if (!reserved[p]) { copy[p] = vars[p]; } } for (p in copy) { val = copy[p]; if (val.push && val.length) { d = duration / val.length; for (i = 0; i < val.length; i++) { v = {ease:copy.ease}; v[p] = val[i]; tl.to(target, d, v, d * i); } delete copy[p]; } } tl.to(target, duration, copy, 0); return tl; } And here's how the GSAP call would look: var morphing = multiTo('#morphing .polymorph', 2, { attr: [ { points: '70 41 118.574 59.369 111.145 132.631 60.855 84.631 20.426 60.369' }, { points: '70 6 119.574 60.369 100.145 117.631 39.855 117.631 55.426 68.369' }, { points: '70 57 136.574 54.369 89.145 100.631 28.855 132.631 38.426 64.369' }, { points: '70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369' } ], ease: Power1.easeOut, repeat:-1 }); Basically it just interprets an array of values as if you want them equally spaced inside the timeline. Also note that like most other engines, anime suffers from time leakage in loops, meaning that it uses a simplistic "when the animation is done, start the time over again" which isn't precise for the overall time. It's not a true loop. GSAP implements logic internally to avoid the leaking. Here's a demo comparing the two: Open the console and watch how the gap grows larger and larger in anime between the actual time and the animation's time. There will always be some amount of lag, up to one tick (typically less than 17ms), but anime keeps growing the gap on every iteration. It's noticeable if you watch the animations and see how they start off synchronized and then the drift after a while. GSAP remains true to the actual time, but anime falls behind. Anyway, is this what you were looking for?
  10. 5 points
    Hi @smallio Your mask timeline breaks after the first click because its already been played. You can solve that by playing from the beginning of the timeline. maskTL.play(0) Hopefully that helps. Happy tweening.
  11. 5 points
    Hi @tomKnox That is the expected behavior with all the staggers going to the same location. You could add a .to() tween to the loop and target paths[0], paths[1] etc..., but I think this is good case for function based values. More info: https://greensock.com/function-based Happy tweening.
  12. 5 points
    Hi Plastois, Welcome to the GreenSock forums. Glad to see that you are doing so well with GSAP! I want to commend you on providing such an excellent demo that so clearly illustrated the issue you were facing. Its such a big help! You wouldn't be believe how many there are that don't make the effort. Great job! You already did the hard work of dynamically figuring out the start time and durations based on the positions of your labels. The good news is you can use these values in a single tween without creating a new timeline as long as you add that tween AFTER you have put your other animations in. In the code below I'm using your dynamic values for the duration and position parameter tl.from(".pink", labelTimeEND - labelTimeSTART, {scaleX: 0.001, ease:Linear.easeNone}, labelTimeSTART) I gave the tween a Linear ease just so that its easier to see that it ends exactly when it should. ---- As for your second question 2) I set delay equal to "labelTimeSTART" time but it start before previous animation ends. Why? It seems that the delay that you set on the timeline "appears" to be ignored when you dynamically changed the duration of tl2 var tl2 = new TimelineLite({ delay: labelTimeSTART //4.1 }); tl2 .from(".pink", 10, {scaleX: 0.001}) .duration( labelTimeEND - labelTimeSTART ); in your example if you remove the duration() line the delay works fine. I will look to see if this is a bug, or just a side-effect due to necessary logic in the engine. Thanks again for the awesome demo, and welcome aboard! Let us know if you need any more help with this.
  13. 5 points
    Just to add a little more clarity, when a property has a CSS transition applied, ANY change to that property will be delayed by the browser and gradually applied according to the duration you set on the CSS transition. So let's say you've got a 1-second CSS transition applied on an element and then you do a GSAP opacity tween from 0-1 with a duration of 0.5 seconds. Well, GSAP sets the value on every tick (60 times per second) and every single time, the browser says "oh, I'm not gonna show that right away...since there's a CSS transition applied, I'm gonna take a whole second to gradually make that change that GSAP just applied." So your 0.5-second GSAP tween looks weird and takes a lot longer (1.5 seconds in this case) because the CSS transitions are getting in the way. I hope that helps explain what was going on under the hood and why it's generally not a good idea to mix JS animations with CSS ones. Happy tweening!
  14. 5 points
    Hi @jiggles78 , Welcome to the GreenSock Forum. Your idea is great. To use this slider code, you could do it like this (only a quick approach!): The wonderfull construct of @OSUblake, each Slide triggers a separate animation, is also feasible. Happy tweening ... Mikel
  15. 5 points
    Here's the thread about that pen... This is bascially all that tween is doing. It doesn't last long enough to actually animate anything. wave[0].setAttribute("d", drawPath(drawPoints(factor * settings.speed))); It really doesn't matter if you could touch the tween, pausing and resuming would make the animation jump because it's using the amount of actual time that has elapsed for the factor. var factor = totalTime*Math.PI; If you want, here's my waves demo from that thread with play and pause functionality.
  16. 5 points
    Hi @iamjkdn , Welcome to the GreenSock Forums. Wavify is a graphically elegant solution. If you want to act with just one Timeline and create some individual waves via SVGs, this could be an alternative solution: Happy tweening and waving ... Mikel
  17. 5 points
    Hi @radutrs, Something like this ... Happy landing ... Mikel
  18. 5 points
    Well, look who surfaced for air. We didn't even have to use the word canvas.
  19. 5 points
    Use an object or Map if you want to store stuff by name. var map = new Map(); var obj = {}; for(var i = 0; i < 10; i++){ var tl = new TimelineMax(); obj["slide" + i] = tl; map.set("slide" + i, tl); } console.log(obj.slide3 === map.get("slide3")) // true
  20. 5 points
    Hi Gilbert and welcome to the GreenSock forums. First try to avoid string refs, they are deprecated since React 15.x. Use the ref callback instead: https://reactjs.org/docs/refs-and-the-dom.html In the constructor create an empty array to add the elements as you call the render title method: // this is inside the component's class constructor(){ super(); // just an empty array, we'll use the ref callback to add the DOM elements this.titles = []; // the rest of your constructor code here } Then, IMHO I don't see the need for two methods to render each title, you can run all your logic in just one and use the ref callback to add the element to the array, like that you'll have a predictable way to add your elements to the timeline. renderTitle(e) { const ATitle = titles[e.component]; return( <div className="box" key={e.component} ref={e => this.titles.push(e)} > <ATitle size={e.size} text1={e.title} text2={e.subTitle} open="false" style={{ position: "absolute", x: " +e.x+" , y: " +e.x+", "fill": "orange" }} onComplete={this.handleComplete} /> </div> ) } The key is the ref callback which has the DOM node as the argument, then the DOM node is added to the titles array. Then you can access the titles array and create your timeline: componentDidMount(){ const { tl, titles } = this; titles.forEach( (e,i) => { tl.to( this.refs[e.component], 1, {x: e.size, y: e.size/3 , scale: 0.5, opacity: 0.5}, .5 * i ); }); tl.reverse(); } This is a better and more actual approach to write your app. Now to the sequencing part of your app. I'm a bit puzzled, because react-titles does creates either a GSAP instance or uses react-motion for the animations. If you want to control those animations, you'll have to fork the repo and create an API that exposes some way to do what you need, because react-titles starts as soon as the component is mounted. For the initial position, what I saw in the repo is that the code uses fromTo instances, which create an immediate render, which sets the initial position of the elements being animated, so no matter what you do react-title will enforce those initial values passed in the props of the component's instance. Such is the nature of re-usable React components, you have to work with whatever the creator of the component is giving you. Also keep in mind that the open prop passed to the component is a boolean and you're passing a string "false". Try using a boolean instead: <ATitle size={e.size} text1={e.title} text2={e.subTitle} open={false} style={{ position: "absolute", x: " +e.x+" , y: " +e.x+", "fill": "orange" }} onComplete={this.handleComplete} /> Another option is hack into the code of react-titles and create a way to control the animations. Honestly if I was you, I'd take the animations being created by react-titles and bake my own solution for the particular needs of the project. The GSAP code in react-titles is good and there are no issues there and unfortunately we can't spend a lot of time figuring out how GSAP based tools work and how they're used. I saw that you started an issue in the repo, hopefully the creator(s) of the tool can help you more than I can and they can add a way to keep the tweens paused when mounting and give more control over them, as well as creating more complex sequences. Happy Tweening!!!
  21. 5 points
    About the same amount of code, but in 3d.
  22. 5 points
    Yup, like Dipscom mentioned, you already have 1 row, so building another would just require using a loop. My suggestion would be to create a buildRow() function that adds a new row of balls to the dom. Call that function a bunch of times for more rows. I would also create a new timeline to animate each row. I did a rough implementation of this setup in the demo below. Each row uses the same animation parameters. you will most likely have to do considerable calculations to make each row animate differently if you want to replicate the effect in the Three.js demo you have been referencing in multiple threads. Unfortunately that isn't the type of thing I have the time, or perhaps even the ability, to do for you.
  23. 5 points
    Ohhhh Science! I likes science! If you're not on a horrendous deadline I'd be happy to help you work your way around what you need to do to accomplish this if you'd want to. No strings attached, just for the fun of it. The only caveat is that it would be on a drip-drip basis as I'm still a bit overwhelmed with other stuff that needs doing. Ping me a private message if you fancy.
  24. 5 points
    Hi @Daanliberta, Welcome to the GreenSock Forums. Here is an example: Maybe it will help ... Happy tweening. Mikel
  25. 5 points
    Hi @HHCC IT Department It's a little tough to troubleshoot without a demo, but I wonder if you might need to adjust the autoKillThreshold. Your question reminded me of this similar thread which may help. Happy tweening.
  • Newsletter

    Want to keep up to date with all our latest news and information?

    Sign Up