Popular Content

Showing content with the highest reputation since 06/16/2018 in all areas

  1. 8 points
    The secret sauce... Wave === Sine.easeInOut
  2. 7 points
    If what you're looking for is to have the width of the container tween but have the children tween their `y` position stuck only to the Y axis (no movement on X following the parent's tween) there are a few things that can make this possible. Easiest would be to use a Timline and have the children tween up after the parent has completed (or nearly completed) its width tween. Next option would involve a few wrappers, an `overflow: hidden`, and a `position: absolute`... here is a CodePen illustrating both.
  3. 6 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. 6 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. 5 points
    Hi @radutrs, Something like this ... Happy landing ... Mikel
  6. 5 points
    Well, look who surfaced for air. We didn't even have to use the word canvas.
  7. 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
  8. 5 points
    About the same amount of code, but in 3d.
  9. 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.
  10. 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.
  11. 5 points
    Hi @Daanliberta, Welcome to the GreenSock Forums. Here is an example: Maybe it will help ... Happy tweening. Mikel
  12. 5 points
    Well... aren't you a big box of surprises!!!
  13. 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.
  14. 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)
  15. 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.
  16. 5 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!
  17. 5 points
    I think it's a good idea, helps developers and businesses looking for them. From a marketing perspective, it could also be beneficial to Greensock. A hub for hiring could generate more awareness and acceptance for the platform. I would make sure you have some sort of messaging attached saying something to the effect that Greensock provides it only as a convenience and doesn't endorse any participants or have any responsibility for transactions. Was this a suggestion the service should be monetized?
  18. 5 points
    If it were me, I'd probably not worry about any hover effects and just use a click to open and close the menu on all devices. The reason I say that is detecting touch is not 100% accurate and many touch screens have a mouse too. It's all a bit tricky and seems like more of a headache than it may be worth. I also don't think hover always means intent whereas a click or tap does. Of course, this is just my 2 cents worth. YMMV. In most cases it's best to use a timeline and simply play/reverse on click. Here's a demo that was an answer to another forum question, but shows a menu open and close on click. Others may jump in with their opinions too. Happy tweening.
  19. 5 points
    Actually, the problem just has to do with the nature of rotational/skew values; your math was assuming the horizontal movement would progress at the same rate as the rotational/skew values, but that isn't true. Here's a quick illustration: Notice that if you skew by another 30 degrees, the movement along the horizontal axis accelerates. The interpolation between values isn't linear. It's not a GSAP thing. What I'd probably do is create a separate tween that uses a modifier which sets the skewX based on whatever the "x" value. That'll lock them in perfect sync. Instead of creating 2 tweens on every mousemove event, you can just create one that changes the "progress()" of the "real" tween that does all the work. I think it's more efficient that way. Here's an adjusted demo: Does that help?
  20. 5 points
    I'm kind of confused by what you mean by "how do I run two different classnames at the same time". If the demo below is what you want, let me know if you need help understanding how it works
  21. 4 points
    Oh that is different than I was picturing. You said carousel so my mind went elsewhere. We had a similar question a few months ago. @Sahil has a nice solution in this thread. Happy tweening.
  22. 4 points
    Have you tried setting progress as in following demo? If your timeline doesn't change then you can just change the progress. If animation is simple you can use invalidate method. If invalidate isn't enough then you can keep track of progress, and reconstruct entire timeline and set the progress to it. Though avoid using heavy calculations for scroll based effects, it will start getting janky soon.
  23. 4 points
    You can do that using MorphSVGPlugin. It is part of club membership but on codepen you can use it for free to practice. Very easy if you are familiar with SVG. https://greensock.com/docs/Plugins/MorphSVGPlugin
  24. 4 points
    The best part of that article is the really cool SVG Wars: May the Morph Be With You demo.
  25. 4 points
    Hi, TimelineMax by itself is not going to work, because GSAP's core is not available. Add TweenLite before TimelineMax and it should work: <!DOCTYPE html> <html> <head> <title>TimelineMax test</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenLite.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TimelineMax.min.js"></script> </head> <body> <script> var tl = new TimelineMax({}); tl.to("body", .3, {backgroundColor:"blue"}); </script> </body> </html> Happy Tweening!!!
  • Newsletter

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

    Sign Up