Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Leaderboard

Popular Content

Showing content with the highest reputation on 08/08/2019 in all areas

  1. The animation appears to work for me in IE11 check your console for errors. And make sure you're not running in compatability mode. https://stackoverflow.com/questions/25077612/jquery-not-working-with-ie-11 That's all I got.
    4 points
  2. Hey @sammyg, Waves are welcome guests here in the GreenSock Forum ... https://codepen.io/mikeK/pen/KORMKE Happy tweening ... Mikel
    4 points
  3. Hey sammyg, There are a couple different ways to do something like this. I'll list the ones I can think of: Put it in a container that has overflow:hidden. Then you can either use a background image and background-repeat along with a translation or make the wave symmetric and a translate of a portion of the wave's width (enough to make it match the next wave). Do the same basic technique but have it completely in SVG (check out this post or if you want something more complex this one).
    4 points
  4. Hi! How can I make a div go from 0 to 100% width, and also from the center? I don't want to scale the whole thing - I just want it to animate the width. Also just wanted to say that I am super happy with both the products and the support here is amazing! Thank you guys for such a good product and community
    3 points
  5. Hey @Jon Pierce. Welcome to the forums! By default, GSAP uses requestAnimationFrame which is standard in all browsers (except ancient ones, in which case GSAP falls back to setTimeout()). The whole point of requestAnimationFrame is to ensure that it's perfectly synchronized with screen refreshes. So unless the WebView in the Android app isn't using that (which would be very surprising to me), it should all be synced up nicely. Do you know if the device you're testing on supports requestAnimationFrame? Typically when there's jank, it has nothing to do with GSAP specifically because it's so highly optimized and updating its values accounts for a very small portion of the overall load - it's almost always related to graphics rendering in the browser. So, for example, if you're animating 100 SVG elements, GSAP might take up 0.5% of the overall CPU load to do its work, and 99.5% is the browser actually fabricating all the new pixels for the resolution-independent SVG elements, firing events, doing any document reflows, etc. You could certainly experiment with actually setting force3D:false just to see if it helps anything. Usually it's best to leave force3D:"auto" or true, but in some rare cases the browser may actually do better with it disabled (Chrome on the Mac currently has a bug that actually can decrease rendering performance with 3D layering enabled). Another thing you could experiment with is setting TweenLite.ticker.fps(30) or something to set it to a lower-than-normal value just to see if visually it helps you. I kinda doubt it will, but it's worth a shot.
    3 points
  6. @Antoniopf, you've got a lot going on with various 3rd party tools that could be the source of the problems. We know for sure that GSAP works great in IE11, so it's highly likely that there's some other conflict on that page that's not related to GSAP but it's too difficult to troubleshoot remotely on a live site with so many variables, other libraries, etc. If you can show us a reduced test case where GSAP (alone) isn't working in IE11, we'll jump on that immediately and offer solutions. We definitely want to make sure GSAP is bug-free.
    3 points
  7. How about this, @Donatello666? https://codepen.io/GreenSock/pen/c1e94141d09fc2aaf6f3ba93f68aed99?editors=0010 TweenMax.staggerTo(".box", 2, { stagger: 0.5, x:function(index, target) { return target.getAttribute("data-x"); } });
    3 points
  8. Hey @Antoniopf, ScrollMagic is not a GreenSock product nor is it officially supported here on the GreenSock website or forum. Maybe you can find help here: ScrollMagic/issues Kind regards Mikel
    3 points
  9. Hey @Donatello666, Welcome to the GreenSock Forum. Instead of defining a single value (like x:100, rotation:90), you can define an Array of values to cycle through. More info: Stagger effects with cycle https://codepen.io/mikeK/pen/qeoMZM Happy tweening ... Mikel
    3 points
  10. Here's what Blake said but in code https://codepen.io/GreenSock/pen/OKZzdN
    2 points
  11. If you want to animate width from the center, then you're going to have to move it the left at the same time, preferably using x instead of left. You would move it half the width you're animating.
    2 points
  12. Short answer: its container is being moved and changing width so it's hard for the browser to properly calculate the position of the element. I'd recommend placing it outside of the background that's animating.
    1 point
  13. Hey everyone! I was in a longterm (several years) contract role which recently ended. I haven't been job hunting or freelancing for a while, and I was just curious what the market has been like for other banner animators/developers lately? Are you still seeing a lot of demand for this type of work, or have you felt the need to branch out into other mediums? Banners are such a fun niche, but I'm debating whether it's too limiting (career-wise) to be too specialized in one thing. Just thought I'd see how the past couple of years have been treating everyone here... I'd love to hear your stories! (It's been a bit quiet in this forum now that the initial chaos of the 2015 flashpocalypse died down.)
    1 point
  14. Hi mikel, thanks for your solution. I already thought about that. The only point why i would not like to use this is: each of my DIVs has the values stored inside. To use your approach i first have to iterate through the DIVs and fill the array and then tween them and i would like to do this without this extra step. I thought: "OK, if GSAP iterates through my DIVs to tween them, i could get the tween values in the same step". But I will give it a try, its the best way so... THX a lot! ?
    1 point
  15. Hey @Antoniopf, Welcome to the GreenSock Forum. It would be a huge effort to study a complex web for problems. Therefore, the friendly request to show a reduced case in which problems are visible in a CodePen. Kind regards Mikel
    1 point
  16. Hey guys, just uploaded some Suncorp Bank work you can view on the link below. https://bradleylancaster.com/portfolio/suncorp-bank-digital-programmatic-advertising-html5/ Cheers, Brad
    1 point
  17. Hey @LeoZ, Just for fun - a simple version ... https://codepen.io/mikeK/pen/KOQjMw Happy tweening ... Mikel
    1 point
  18. Hey @sashaikevich, Here is a slightly different approach (NO scrollMagic) - quite magical ... https://codepen.io/mikeK/pen/BXdbjQ Happy scrolling ... Mikel
    1 point
  19. Hi, I just want to introduce Compress-Or-Die which is an online compression tool especially created for the creators of banners... so I hope for the most of you. It isn't a tool like tinyjpg or jpegmini that just allows to shrink existing JPGs a little bit. It's the one that creates your (also low quality) images from your original data and really squeezes out the last byte. And allows things like JPGs with transparency and "Selective quality" (as known from Adobe Fireworks) btw... Take a look at it here: http://compress-or-die.com/ In this context these articles could be interesting that explain a lot of the options you can set: http://compress-or-die.com/Understanding-JPG http://compress-or-die.com/Understanding-PNG I am the author of the tool and the article. So if you have questions, wishes or something else, just drop me a line. Thanks, Christoph
    1 point
  20. What makes you think animating something on hover would be hard? You can do some interesting stuff with SVG filters, but there's only a handful of them, and they can suffer visually due to aliasing issues. I made that ripple animation with SVG just to see how it would look, but it was originally done with PixiJS. If you're looking to bend, twist, and distort stuff for an animation, then you should definitely check out PixiJS. They have tons of filters that can do all sorts of craziness, and they're constantly adding new ones. I just noticed some new ones have been added over the past couple of weeks. ? AdjustmentFilter ? CRTFilter ? GlitchFilter ? ReflectionFilter ? KawaseBlurFilter ? RadialBlurFilter ? MotionBlurFilter ? OldFilmFilter Go through and play around with all the filters here. You should be able to find several filters that could be used for your project. http://pixijs.io/pixi-filters/tools/demo/ And to help out, GSAP has a plugin to make animating things in PixiJS much easier.
    1 point
  21. So you can imagine, it's Saturday night and there's another deadline looming on Monday. I'm just about to settle in to what I reckon is about 2 hours of work animating "a magical trail randomly jumping around the screen". I got some ideas so just need to crack on. Before I do I just check the "ease-visualizer" and low and behold I find "rough", which I'd forgotten about. Give it a go and that's kinda what I needed, 20 mins later I have finished the job. This keeps happening Jack you have thought of everything and now I don't have any work to do so can enjoy my Saturday evening. So inconsiderate, I mean there's nothing good on TV!! Realised I bought TweenMax 8 years ago, people thought I was mad spending that much money on a tween engine (for Flash). I've used TweenMax in every project I've worked on since buying it and can't imaging developing without it. So just a quick thanks and I'm off to get a beer.
    1 point
  22. HOLY CRAP!!! That transparent jpg trick is amazing. It reduced this image from 2.19MB to 363k. One note, I had to add a crossorigin="anonymous" attribute to get it to work with assets hosted on CodePen.
    1 point
  23. EDIT: Notice that a flicker may appear in some of these demos. This a hardware acceleration bug Chrome. You don't need any smoke and mirrors for this. You can create circular motion using Sine.easeInOut, and circular motion is a wave... Look what happens when you plot the x and y values separately. Beautiful waves! Here's how you can do that with SVG. I'm just animating a bunch of SVGPoints on a polyline that are set to slightly different progress values. The amplitude is the height of the wave. The frequency is the distance between waves. And the number of segments is how many points will be added to the polyline. You don't want too many as that can make your animation run slower. Just enough so it looks smooth. You can animate the amplitude and frequency by applying an ease to them. Every ease has a .getRatio() method, which you can use to get the easing value. So if you wanted to animate the amplitude, you could do something like this... point.y = amplitude / 2 * Power1.easeIn.getRatio(norm); To make things interesting, I wanted to test out the CustomEase tool that's going to be coming out soon. I came up with a simple ease that looks like a bell curve, so it starts and ends at 0. Here's how that looks when applied to the amplitude. You can also apply an ease to the frequency/progress value, and even change the shape of the wave. If you reverse your animations, the smooth wave connection gets flipped, creating a pretty interesting sawtooth wave. Related post with other rendering options...
    1 point
×