IndikatorDesign

I just wanna give you an update and perhaps it is useful for other people recognizing heavy performance issues. So at first, it's absolutely no problem to use the SVG's added by ajax while scrolling with ScrollMagic and jQuery.Lazy. There is no canvas solution needed, it performs well, also on Safari. It was possible for me to locate the problem. I had put a css-saturation filter on the SVG's like you can see here: svg { -webkit-filter: saturate(70%); filter: saturate(70%); } You can use "will-change: filter;" to get better performance results, but I decided to remove it completely. And now everything works fine on all browsers. Thanks for your efforts!

Hey Jack, it's fine, I understand what you mean. Thanks for your effort ! Best regards, Bruno

Thanks for your fast response, but it seems not to be the problem. I deactivated the complete lazy object. So the available and rendered code starts at: var PageAnimations = function( $opt ) { this.init( $opt ); } As you can see, the images are no longer lazy loaded and there are no svg's applied and there is no drawing. But it still works the same on Safari. I have also disable minifying and cahing and enabled the debug mode..

Hi Guys, has anyone ever experienced a "hanging experience" in Safari on MacOS before? I've done some animations with GSAP (TimelineMax, drawSVG) in combination with ScrollMagic and it works great everywhere, with one exception - Safari on macOS. The strange thing is, that it works pretty well in Safari on iOS. Do you know of actions with which Safari has principally problem and which one should omit? But why does it work great everywhere else? Thank you and best regards, Bruno

Please take a look at the behavior of the animation from Carl. It looks very linear by showing and hiding the text with the SplitText plugin. My animation works with different speeds for showing and hiding the text, by using different timelines (but has also more code).. 1. Is this also possible with the SplitText plugin? ( You don't need to rebuild, but it would be nice to know how it works when it is possible.. ) 2. Is it possible to use the TextPlugin to fade the text out as you can see it in my animation (deleting or overriding from right to left) or is it just possible to fade in and override from left to right? 3. If you look as GSAP-Pro on my code, what do you think? What would you do better?

Ah.. Yes.. Now it works.. Thanks! It is possible with the Split plugin to make a difference in speed by "typing" and "deleting" the text. Please take a look in my demo. When deleting, the animation is faster than writing. And for the "function" in the end, it looks as if you would write it with the hand without such a linear behavior. For me it's looks pretty realistic..

Hello Carl, thanks for the feedback! I have to admit that this is less complicated than my solution looks. I could solve it on this way for me. On my website it works very well, I do not know why it does not write the text inside the codepen. There is no error thrown and I think that I have installed all scripts..

Hello guys, does anyone know a way how to reverse the textanimation using the textPlugin or SplitText in conjunction with "TimelineMax"? Wanna write some text with the textPlugin and a blinking cursor on the right and this works pretty well. But after I added the text, I wanna remove it beginning from the end, so that it looks like you're erasing the text and with the same delay until writing the text. Can't find something like a reverse-direction (feature request) for the textPlugin.. I know how to split the text-chars in divs, but I really have no idea how I can remove the last divs one after the other using "TimelineMax". (It's my first project with gsap. With jQuery and a setInterval it would be pretty simple to solve the problem, but I have no idea how it is possible to combine this solution with the "TimelineMax". Someone with an idea? Thank you and best regards, Bruno