isseto

First off thanks everyone for contributing answers! To Blake, I was having issues importing SVGs into PaperJS and then selecting paths within the imported SVG to animate. I thought that by avoiding having all the SVG elements in the HTML, and rather having PaperJS import them from SVG files would save on performance. But once imported, I was having difficulty extracting the paths to animate later on. It would work for HTML embedded SVGs though. Have you had experience with this case in particular? But thanks for the Codepen! I'll take a closer look at the code. I have since been looking into PixiJS.

Hi everyone! I'm planning on making a Christmas project which would require many elements being animated on a fullscreen illustration. So imagine 100-200+ little animations moving repeatedly on a fullscreen page, along with music running. You could think of Google's SantaTracker as an example - Website and Github. I dabbled with canvas for a bit, but animating proved to be a lot more complex than with simple SVG and Greensock. and attempted to bring in SVGs in Paper.JS as well, to merge the gap between SVGs and canvas, but I kept running into difficulty exporting SVG paths to be animated. --> If you have experience with SVG in Paper.JS, I'd love to hear about your experiences! I didn't really like canvas to start with anyway... (I'm just not familiar with it enough). So I'm thinking of sticking to pure inline SVG and Greensock animation, since I like the simplicity yet high quality vector aspect of them. The issue is I have kept hearing of SVG performance issues due to the DOM (where canvas performs much better in comparison). I have done tests with heavier illustrations imported from Illustrator, where 100+ elements are animated and looped; other than using a lot CPU, performance on desktops/laptops seemed fine (macbooks and such); there was a bit of lag on mobile devices, but subtle enough to be able to get away with it. I tried a Nexus 6P which is probably a good phone though... I ran tests on several websites (with Google's PageSpeed's tool notably). It scored between 50-60%, which isn't ideal. Since I am new to development, and know little about performance testing, I wanted to ask the Greensock community your thoughts on what I should maybe look out for and for best practices. Or if you have any advice on how to go about this. I have though of importing static components as PNGs or JPEGs instead of SVG, would that help with the performance or would it do the opposite? Think background elements for example. I have thought of using the <use> tag to duplicate existing SVG code to lighten inline SVG-load. But I have read that doing that actually is detrimental to performance. Has anyone had that experience? Looking forward to hearing your thoughts. Thanks!!

Hey again Jonathan! Wow can't believe I hadn't thought of that! It makes so much sense. Thanks so much! Here is the final Codepen if you're curious I used the staggered yoyo on the grass, clouds and trees. You're awesome.

Hi Jonathan ( <-- I don't know how to tag your name in the forum!) Thank you so much for your thorough reply!! :D I took the time to watch the videos and read through everything -- thank you, it has helped clear up a lot of confusion. The 3 examples were quite helpful. Thank you for cleaning up my code too! However, I think I still have the same original problem. I changed the Codepen to the .staggerFromTo example you had suggested, and increased the values so as to see the animation better. This is what I have now: var tlgrass = new TimelineMax({ repeat: -1, yoyo: true }); tlgrass.staggerFromTo(grass, 2.5, { transformOrigin:"0% 100%", skewX:"25deg" }, { skewX:"-25deg" }, 0.3); The stagger effect works indeed, each animation is delayed by 0.3 seconds. However, my problem is that they stop and wait for each grass object to loop through, before repeating (or yoyo-ing in this case) back. What I am looking for is for the grass elements to swing left and right continuously without stopping (skewX to the right, skewX to the left, skewX to the right, etc...). And right now each grass element skews to the right, then stops and waits for all the others to skew the same, before going back to the left. Is there a way to have them continuously loop without pausing? Thanks again!!! Link to Codepen.

Hello there! I had a quick question about the stagger effect. I have a timeline of animations ("tlgrass") applied on a same class (".grass"), and I am looking to delay each .grass element by a few seconds in a staggered effect. So each .grass element would go off delayed by x seconds each, but they have the same animation effects applied. I am not sure how to go about doing this. Is it possible to nest a timeline under a TweenMax.staggerTo function? Or maybe by passing a function? var grass = document.getElementsByClassName("grass"); var tlgrass = new TimelineMax({ repeat: -1, }); // This is the animation I would like all the grass objects to do tlgrass.to(grass, .8, { transformOrigin:"0% 100%", skewX:"10deg"}) .to(grass, .5, {skewX:"0deg", ease: "linear"}) .to(grass, .8, {skewX:"-12deg"}) .to(grass, 1.5, {skewX:"0deg",}) Thanks in advance!

Nevermind - realised I was using ids and not classes.

Hi everyone! I am working on a project that requires animating a lot of elements on the page. I am trying to use SVG instead of Canvas, and thought of using <g> and <use> tags to keep the SVG code lightweight. Basically, I am trying to copy paste the svg element and its animation, but placing it in a different position. However, I can't seem to animate the <use> tag (see attached Codepen). I tried adding an id="redCircle" to it too, but javascript doesn't seem to pick it up and won't animate it. Any help?