Leaderboard


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
    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!
  6. 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?
  7. 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.
  8. 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.
  9. 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.
  10. 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!
  11. 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
  12. 5 points
    Here's an article on stacking multiple images and using clip-path. (it uses CSS animations, but you can easily convert it to GSAP) https://tympanus.net/codrops/2017/12/21/css-glitch-effect/ Pixi has a glitch filter https://pixijs.io/pixi-filters/docs/PIXI.filters.GlitchFilter.html Happy tweening.
  13. 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.
  14. 5 points
    Wargaming is looking to hire an HTML5 Animator (Banners) to join the Interactive Media Team. In this role, you will create animated/interactive banners using HTML5 (JS, Canvas, Adobe Animate), resize and adapt them for various advertising platforms, and manage localization of resized/adjusted banners. The Interactive Media Team help bring new players to the Wargaming universe by delivering quality marketing digital assets: landing pages, promo web sites, animated and interactive web advertising, newsletters, and more. What you will do: — Create animated/interactive banners using HTML5 (JS, Canvas, Adobe Animate) — Resize and adapt banners according to technical specifications of different advertising platforms (Google AdWords, DoubleClick, Yandex, etc.) — Localize resized and adapted banners (30+ languages) using internal tools Requirements: — Experience creating banner ads for a variety of advertising platforms with different technical requirements — Skilled in creating complex animation, interactive features (both within the 150 kB limit) and realistic special effects (blowups, water, fire, dust) using HTML/JS/Canvas — Hands-on experience with Adobe Animate — Knowledge of browser specifics (especially IE10+) — At ease with 2D graphics (bitmap, vector); proficient in Adobe Photoshop and Adobe Illustrator — Experience working with GSAP library — Portfolio — Pre-Intermediate or higher level of English Desirable: — Experience creating games using HTML5 — Knowledge of WebGL 3D — UI/UX expertise — Experience working in the games industry — Knowledge of Russian Motivating video about why we cool Our portfolio Please, apply here
  15. 5 points
    Hi @radutrs, Something like this ... Happy landing ... Mikel
  16. 5 points
    Well, look who surfaced for air. We didn't even have to use the word canvas.
  17. 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
  18. 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!!!
  19. 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.
  20. 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.
  21. 5 points
    Hi @Daanliberta, Welcome to the GreenSock Forums. Here is an example: Maybe it will help ... Happy tweening. Mikel
  22. 5 points
    Well... aren't you a big box of surprises!!!
  23. 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.
  24. 5 points
    First of all, welcome to the forums, @mic1991! I think the problem has to do with variable scope. When you create a variable with the "var" keyword inside a function, it ONLY exists inside that function. Nothing outside of that function can see it (that's just a JavaScript thing...well, most languages...I just mean it has nothing to do with GSAP). This happened with your click_tl variable. So... function test() { var tl = new TimelineLite(); // ... } test(); console.log(tl); //undefined! "tl" was created inside the test() function as a local variable. If you need to reference that variable elsewhere, you should declare it in the parent scope (not inside the function), like: var tl; function test() { tl = new TimelineLite(); //... } test(); console.log(tl); //works! Does that help? If you declare your click_tl variable at the top of the document (not in the function), I believe you'll get what you were looking for. (unless I misunderstood your goal)
  25. 5 points
    Your parent element didn't have display and position property set. In most browsers you need to set them to make overflow hidden work. And renaming your tree class worked because it was setting position of tree to absolute.
  • Newsletter

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

    Sign Up