Leaderboard

Hello @wcomp and welcome to the GreenSock Forum! It looks like this is happening due to something in your SVG Markup. I could only see this in Chrome, but not in Firefox on Windows 10. I took your SVG code and pasted it inside a free online SVG Optimizer Clean Up tool. https://jakearchibald.github.io/svgomg/ I made sure i toggled off Clean Id's so it kept your ID attributes on your <g> tags inside your SVG. So now when testing in a webkit browser you do not see the border shenanigans after animating. The border was being caused by some coordinates that were causing an overflow of your path. But that online tool cleans it up now You can see in this below codepen that it no longer has that red border on the outside parts of the SVG. Does that help? SVG resources: - https://greensock.com/svg-tips Happy Tweening!

Hi and welcome to the GreenSock forums, Yes, svg elements can follow an SVG path with the help of the MorphSVG plugin. Please see if this helps: https://greensock.com/path-animation Feel free to fork the demos and add your own svg code.

Just update to the latest GSAP and it's fixed. You're using an old version, that's all. The core problem had to do with the fact that your SVG had some elements with a transform="rotate(...)" and that's the one attribute-driven transform command that old versions of GSAP couldn't parse (and those were very rarely used). Since then, however, we figured out a way to parse it inexpensively. Happy tweening!

Hi and welcome to the GreenSock forums, Thanks for the demo. Please try var mummudRepeat = new TimelineMax({repeat:-1}) var mummud=$('#mummud > g path'),mummudArray=mummud.toArray(); mummudArray.sort(function() {return 0.4-Math.random()}); mummudRepeat.staggerTo(mummudArray, 0.2, {opacity:0, repeat:1, yoyo:true}, 0.4) by repeating each staggered tween with yoyo:true each dod will fade out and then fade back in.

It's best not to mix CSS animations with GSAP as a fight for control can result from that mix. When you use the Morph and Bezier plugins to have an element follow a path, you can quickly set the element to its starting position by using .progress(1).progress(0) before you start the animation. When you're ready to add the amazing MorphSVG plugin (& many more) to your JS arsenal, be sure to check out Club GreenSock. https://greensock.com/club Happy tweening.

Yes! That does help. Thanks a bunch. I'm glad I know about that SVG Optimizer Clean Up Tool now. I'm using Inkscape and even when I save as an "Optimized SVG" there seems to be a lot of transforms going on that I don't yet fully understand. I figured the issue had something to do with the SVG code but that tool cleaned it right up. Thanks again!

Thank you so much it was just a silly mistake. anyway Thank you so much for your help. Happy tweening!

Howdy @Friebel. Sorry, I'm totally unfamiliar with all that stuff. I wish I could help more, but perhaps someone else will chime in. If you've got any GSAP-specific questions, we'd be happy to address those. Cheers!

WebKit developer will probably fix this issue, here is the related bug report: https://bugs.webkit.org/show_bug.cgi?id=192582

Hi @anand2019, Here are some suggestions: autoRotate. Or maybe this scenario corresponds to your ideas: However, as Jack already mentioned, an example with your scenario - even if it is stuck - will help to help you. Best regards Mikel

Hi @OSUblake, Your bezier idea is great. So I tried this ... As always - a pleasure! Best regards Mikel

For what it's worth on this months old thread: when running webpack-dev-server uglifyjs will never fire. At least not in development mode. Minifying only happens on a production build. The problem you were having might be the same I had months ago too on Webpack with GSAP. In the end I just used Babel on the node_modules gsap folder too so it got transpiled to ES5 when loading modules in the es6 code from 'gsap/all'. Since then no more problems like this. So if you still have this problem it could help you too.

Honestly that sounds more like a Flash Player bug, especially because: It works fine everywhere else except that one environment you mentioned The GSAP tools have been in wide circulation for years and years, but nobody else has reported a similar problem. I wonder if the problem has more to do with the complexity of animating the sheer number of characters that are split apart. I don't see anything that could be causing a memory leak in GreenSock's code. If you see evidence to the contrary, I'd be curious to see it.

We really try to keep these forums focused on GSAP-specific questions. As far as that goes, you can easily delay any animation by setting a delay value. Kinda like: TweenMax.to(window, 1, {scrollTo:500, delay:0.5});

I'm not sure I follow your question - are you asking how to use GSAP to scroll a page, but delay it for a short time?

Unless I'm missing something, I don't think it will do that. I just calculate it myself. Using the next control point will point it in the right direction. let bez = MorphSVGPlugin.pathDataToBezier(path); let rotation = Math.atan2(bez[1].y - bez[0].y, bez[1].x - bez[0].x) + "_rad"; TweenMax.set(plane,{x: bez[0].x, y: bez[0].y, rotation });

Great demo Shaun! Love it! Here's your guide to not using jQuery... http://youmightnotneedjquery.com For element visibility, you can use element.getBoundingClientRect(). It returns the coordinates of the element relative to the screen, even if it's transformed. var rect = myElement.getBoundingClientRect(); var vh = window.innerHeight; if (rect.top >= 0 && rect.bottom <= vh) { // Fully visible } if (rect.top + rect.height >= 0 && rect.bottom - rect.height <= vh) { // Partially visible } Listening for "touchmove" and "scroll" events should fix the iOS problem. You need to be careful about how you do scroll events as they can be a performance killer. I would recommend using TweenLite.ticker to run the scroll event updates as it will throttle the calls. Checking the visibility on 600 elements. http://codepen.io/osublake/pen/0d4742d2200d028ed42297cb874af2b5?editors=0010