hobiew

Hey! The project has been put on hold for a while but I recently started completing it. And wanted to share my progress with you guys. http://codepen.io/anon/pen/VPgBQX (Artwork is property of Spielerei.) Will also update once the website is live, sometime next week. As you can probably see there are still performance issues. Most noticably with FireFox and when the charger of some laptops are unplugged. If you guys have any tips to increase performance I'd be glad to hear of them. Greetings, Hobie Thanks again for all the help in the past, and for the amazing library!

Allright thanks again for the replys i'll look into it tomorrow. I already found a way around the DOM issue. Yes I will definately try to optimize it as much as possible. Cheers

Allright progress has been made... http://hobiewetzels.nl/gsap/indexJohan.html The lag smoothing did seem to work, but also brought some problems with it. (when I unplugged my charger it comepletely stopped). Also the effect was so minimal I decided to leave it out for now. Gonna save the choppiness reduction for later (might switch to png's if its get worse). My client doesnt mind if it's a bit choppy since it's also 8-bit style. Also thanks for the code for the grid really put some things in perspective and made it alot easier. (Have still alot too learn haha). At the moment i'm playing with the interaction and would like to check if an svg object has been clicked or not. And execute different code based on this. var plateau1 = $(".plateau1"); var object = $(".object"); for (var i = 0; i < object.length; i++) { object[i].clicked = "no"; } console.log(object[1].clicked); //returns "no" $( plateau1 ).click(function() { var thisPlateau = $(this).find(".object"); console.log(thisPlateau); //returns the element .object of the clicked plateau1 in which it states clicked : "no" console.log(thisPlateau.clicked); //return undifined if (thisPlateau.clicked == "no"){ TweenMax.to(thisPlateau, 0, {autoAlpha: 0}); thisPlateau.clicked = "yes"; }; if(thisPlateau.clicked = "yes") { TweenMax.to(thisPlateau, 0, {autoAlpha: 1}); thisPlateau.clicked = "no"; } }); This should be really basic JavaScript but I'm clearly missing something obvious. Also I read its different to acces DOM svg then it is to acces DOM html. Maybe this causes this problem? How ever other interactions with click and accesing the svg DOM works fine. Is this something your library handels? Any idea why thisPlateau.clicked returns undefined? Also how would I go about adding these TweenMax's to a timeline so I can change the TimeScale dynamicly while the animation is executing. function DiagonalGreen(){ var rows = 2; var cols = 6; var tiles1 = $(".plateau1"); var flat1 = $(".flat1"); var space = tiles1[1].getBBox().height * 1.5; var spaceY = tiles1[1].getBBox().height * 3; TweenLite.set(tiles1, { xPercent: 150, yPercent: -20 }); TweenLite.set(flat1, { xPercent: 150, yPercent: -15 }) for (var i = 0, y = 0; y < rows; y++) { for (var x = 0; x < cols; x++, i++) { var p1 = toIso({ x: 0, y: y * spaceY }); var p2 = toIso({ x: cols * space, y: y * spaceY }); TweenMax.fromTo(tiles1[i], 20, { //add this animation to a timeline x: p2.x, y: p2.y }, { x: p1.x, y: p1.y, repeat: -1, delay: -x * 20 / cols }).timeScale(2); } } }; Thanks in advance!

Amazing!! Thanks so much. That fixed my problem. Is there any way, to reduce the choppiness of the animation? I've used other animation but only noticed this while translating things. I still would like to use SVG but I read that switching to PNG's might fix it. Applied your fix and my current progress on the project incase you were curios! http://codepen.io/anon/pen/bBBwZb Will be working on this next week again. Early weekend for me haha Thanks again for taking the time to reply.

Hi, yes I forgot to add the ModifierPlugin. Here is a new pen I made also using the set. http://codepen.io/anon/pen/bBBwZb It kinda works but also kinda not. If I edit the values from the set to get them to allign more correctly it breaks. Or if I want the objects to move more diagonal and edit the +y and +x values It also starts doing weird things. How do these values with the set the +y and the module interact with eachother. Maybe I should use an If statement, to check if they leave the field on the Y or X axis? Sorry if this sounds like ramblin im still trying to wrap my head around the problem. For now I want them to increase the set Y (to 220) so they allign better but if I do this. The stream of objects get all messed up. Another thought I had is that my Start point (which is currently located outside the SVG Viewbox see: https://i.imgur.com/jHho27W.png) is wrong and I should calculate this more so it matches the X and Y offset of the items and the direction its heading. This should be the final design: https://i.imgur.com/Z22ynJo.png A big part of the animation is the diagonal seemless loop. Sorry if I made any error spellings. I should check if the problem is in my starting point/number of objects/design first. edit: TL;DR Cause the above text might not make alot of sense. I suspect I should edit my design to match the code instead of the other way around first to rule out mistakes you guys couldn't possibly fix. Although I would appreciate it if you could explain the different values (set y,x/to y,x/module y,x) and how they are interacting with eachother. Cheers

Hey there! The modifier plugin seemed to do exactly what I wanted. So I tried the code from the video to replicate the effect, but it didn't gave me the seemless loop I was hoping for. Here is my Pen: http://codepen.io/anon/pen/oYYxmr Could it be that I'm using SVG Objects with a set Coordinate? Any tips on how I would make a seemless loop out of these objects. Thanks in advance. - Hobie edit: With some trial and error and a closer look at your codePen I come to this state: http://codepen.io/anon/pen/bBBwZb I dont think it quiet works how i want it to work. I either want it to check if the object left the screen on the X axis or the Y axis. If so then I want to start from its start point in the top of the screen.

Thanks for the replys, very appreciated. I will try these suggestions out next week. Loving the library so far, will also post my progress of the current project im working on. Quick and detailed responses, not something you find everywhere! Cheers.

Thanks for the fast reply! It comes close to what I want. When the first ghost leaves the "scene" I want it to spawn again. Currently it waits until all the ghosts have dissapeared but It should be a continues loop with ghosts. Do you think this is possible. I have to go for now but will check on this tomorrow. Will also provide some code I have written then to make it a bit more clear. Cheers

Hey! I'm wondering if it possible to give an Object a certrain speed. Say it keeps moving 50px per second to the right. TweenMax.to(obj, infiteTime, {speed:50}); Eventually I want my element to reposition itself to the left side of the screen. Once it reaches the right side of the screen. To create a pac-man like effect. (like in old games..Where once you leave the screen on one side you spawn on the other). This way I can create an infinite cycle of clouds for example. Any idea if this is possible or how I would go about this? I tried calculating the distance the object has to travel to reach the end of the screen, but this doesn't give the effect I want. Since it just speeds up or slows down the object to reach it in-time. P.S. English is not my first language, sorry if I made any mistakes. Cheers from the Netherlands Hobie