cartimundi

Morning, exactly...this banner is good...but i want to put 3 different couches in 1 banner... and at the end our logo. When i succeed that, i finally have to make the same style into different sizes leaderboard: 970 x 90 square: 200 x 200 block: 336 x 280 block2: 300 x 250 Skyscraper: 120 x 600 Skyscraper width: 160 x 600 Half page: 300 x 600 maybe when you see this, you have an suggestion how i can do that best?

I used the burger boy, and made an version four our business...furniture.. What i would like is, 3 examples of couches...so enlarge the animation with 2 other pictures ( and prices ) Should i copy the items and put them below....? http://codepen.io/cartamundi/pen/BNqBBj

thanks! that looks good....and the code easy....( i hope )

Hello, ( again ) can someone help me with the first start. ( 1 canvas, with 1 block and 1 text ( to play with the transformations ) and from there building further.. ( before i did this in adobe edge together with html/greensock.. but now i want to do it direct in codepen ) I have tried the banner of jonathan... http://codepen.io/GreenSock/pen/lEiAv But i'm getting lost...at the middle... step by step i follow the html...till <div id="deviceHead">Desktop it's ok.... i understand the position, the input ( didn't looked at the animation yet..) but the next text for "laptop" i can't find in the html... the images of desktop and laptop are clear...but the next with mobile and laptop...?? i think to hard for me as a beginner... ---------------------------------------------------------- so maybe someone can help me with the very first steps... 1 canvas, with 1 block and 1 text ( to play with the transformations After that combining several text / images and timelines ---------------------------------------------------------- I hope someone can follow me...i understand the power of gsap...and am very enthusiastic to make banners for adwords..(for now we using static banners..;-( greet marcel

hello... back again ( i saw your messages..) but the sun was to hot....and no internet...so back in the office, and starting to make some banners... Thanks for your quick answers!

Hello...next week is our vacation, in the evening i want to do a little gsap. I want to learn making banners in gsap for using them in Adwords. Mine goal is such a banner as jonathan had made ( http://codepen.io/GreenSock/pen/lEiAv ) Is this possible to do this without the internet....we are standing on a camp site, and i'm not sure that we have wifi. When it is possible...maybe someone has some good tutorials or learning projects? I have already made some little banners, with using Adobe Edge, but the next step must be made in codepen, to get it as small as possible. thanks anyway

hello everyone, thanks a lot, i'm gonna watch all of it! The second step is making beter animations and the third step is without Edge, i think, it's making a skin around it, what causes some problems...directly in html/css/js should gives maybe less problems. thanks again everyone, i'm gonna jump in it...( and keep following gsap/and this forum)

Hello, i am enjoying my first steps in code. i'm making weekly (simple) banners for our website (seatsandsofas.nl /.be /.de ( by using plug-in for our wordpress site) Before i make them in adobe edge, with use of the timeline. My wish was quicker, smoother and less kb, the next step was, positioning in edge and the animate just by code in ja and gsap. But now i have Some little problems in wordpress and the plug-in edge suit. So, my Major question is, can i make them completely with ja and gsap. What is want (see the sites above) a 960x500 animation which is responsive. A background with vorming and going sofas with our weekly prices. Which can be import in a wordpress site. Will that be possible? Or has anyone has an Example? (Yesterday i've surfed the forum and codepen examples, but didn't found something like a banner, i found more completely sites or pages. What i did found, is how i can put images online, to use them with codepen and Many fantastisch animation, so i'm very enthousiastic to Gent on with gsap Grt marcel

maybe, a stupid question... should i be able to make the same animation without Adobe Edge? ( with "my first project" i've used Edge only for the positioning of the images... ) all of the rest was in code...so when i put my images online....(somewhere? dropbox maybe) and when i used the same code.... with only changing the path of the images...i must getting the same result or not? and that would be much easier to put on a website.. (Edge makes an .oam, there for we need a plug-in for wordpress to put our (.oam)animation in it.) Sounds like a win-win situation... Sorry when i sound as a dumb ass.... but these are my first steps in code-land

oke Carl, i understand it.... for now there isn't a problem.. maybe the experience to get it shorter... when i have the time, i will try to put it in Codepen...i see that program continuously appear in this forum, looks good. ( for now i'm more a software user than code-user ) but i want to learn it. Now i make the animation by putting an image at the right place...and the with the code let it move in or move out... for me it isn't clear for now, how to do that in code... But i give it a try, thanks a lot

oke thanks for your kindness... but the "restart" problem is solved...with this code below: and you reply'd with a better solution...(http://codepen.io/MAW/pen/emexdY) Many thanks...the gsap looks very good...hopefully i can put it in our wordpress site //create a repeating TimelineLite var masterTimeline = new TimelineLite({onComplete:function() { masterTimeline.restart(); }}); //add 3 timelines to masterTimeline in direct sequence masterTimeline.add(tl)

oke thanks, this is the Edge project http://ge.tt/3c4VU9A2/v/0

oke, can do...( you want the whole project? i'm working with adobe edge...and upgrade it with greensock in the code.. but i found some topic on your site, which work... under my code, this code: //create a repeating TimelineLite var masterTimeline = new TimelineLite({onComplete:function() { masterTimeline.restart(); }}); //add 3 timelines to masterTimeline in direct sequence masterTimeline.add(tl)

Hello, i'v made my first project by greensock The animation is much smoother than by Adobe Edge the only thing is miss or won't succeed with the restart, i've tried it with restart(); to.tl(); sum.play(0); it won't restart ;-( someone? (maybe someone sees also other things in my code, i think it's very simple but long) grt marcel // insert code to be run when the composition is fully loaded here var By0 = sym.$("By0"); var By1 = sym.$("By1"); var By2 = sym.$("By2"); var By3 = sym.$("By3"); var By4 = sym.$("By4"); var By5 = sym.$("By5"); var By6 = sym.$("By6"); var By7 = sym.$("By7"); var By8 = sym.$("By8"); var By9 = sym.$("By9"); var ByPK = sym.$("Bypuntkomma"); var kop = sym.$("seatskop"); var geelverloop = sym.$("geelverloop"); var premiere = sym.$("premiere"); var neon1 = sym.$("neon1"); var neon2 = sym.$("neon2"); var neon3 = sym.$("neon3"); var neon4 = sym.$("neon4"); var neon5 = sym.$("neon5"); var neon6 = sym.$("neon6"); var neon7 = sym.$("neon7"); var neon8 = sym.$("neon8"); var neon9 = sym.$("neon9"); var neon10 = sym.$("neon10"); var neon11 = sym.$("neon11"); var neon12 = sym.$("neon12"); var neon13 = sym.$("neon13"); var neon14 = sym.$("neon14"); var lamp1 = sym.$("lamp1"); var lamp2 = sym.$("lamp2"); var lamp3 = sym.$("lamp3"); var lamp4 = sym.$("lamp4"); var lamp5 = sym.$("lamp5"); var lamp6 = sym.$("lamp6"); var lamp7 = sym.$("lamp7"); var bank1z2 = sym.$("kennedy2gr"); var bank1z3 = sym.$("kennedy3fgr"); var chaisel1 = sym.$("brightonwit"); var bank2z2 = sym.$("brooke2rood"); var bank2z3 = sym.$("brooke3rood"); var hoek1 = sym.$("chicago-zand"); var prijsbank1 = sym.$("prijsbank1"); var prijsbank2 = sym.$("prijsbank2"); var prijschaisel1 = sym.$("prijschaisel1"); var prijshoek = sym.$("prijshoek"); var datum = sym.$("datum"); var afgeprijsd = sym.$("afgeprijsd"); var introductie = sym.$("introductie"); var tKennedy = sym.$("tKennedy"); var tChicago = sym.$("tChicago"); var tBrooke = sym.$("tBrooke"); var tBrighton = sym.$("tBrighton"); var ntl = new TimelineMax({repeat:-1}); var rntl = new TimelineMax({repeat:-1}); var tl = new TimelineLite(); var aanb = new TimelineLite(); //TweenMax.staggerFrom([neon1, neon7, neon10, neon2, neon13, neon6, neon3, neon12, neon8, neon5, neon4, neon9, neon11], 0.3, {opacity:0.05}, 0.5); //TweenMax.staggerTo([by0, By1, By2, By3, By4, By5, By6, By7, By8], 2.5, {rotation:360}, 0.5); //LAMPEN ntl.from(neon1, 0.5, {opacity:0.1, y:-10}) .from(neon8, 0.5, {opacity:0.1, y:-10}) .from(lamp1, 0.5, {opacity:1}) .from(neon13, 0.5, {opacity:0.1, y:-10}) .from(lamp7, 0.5, {opacity:1}) .from(neon10, 0.5, {opacity:0.1, y:-10}) .from(lamp3, 0.5, {opacity:1}) .from(neon5, 0.5, {opacity:0.1, y:-10}) .from(lamp4, 0.5, {opacity:1}) .from(neon2, 0.5, {opacity:0.1, y:-10}) .from(neon9, 0.5, {opacity:0.1, y:-10}) rntl.from(neon11, 1, {opacity:0.1, y:-10}) .from(neon4, 1, {opacity:0.1, y:-10}) .from(lamp2, 0.5, {opacity:1}) .from(neon12, 1, {opacity:0.1, y:-10}) .from(lamp5, 0.5, {opacity:1}) .from(neon3, 1, {opacity:0.1, y:-10}) .from(lamp6, 0.5, {opacity:1}) .from(neon7, 1, {opacity:0.1, y:-10}) .from(neon14, 1, {opacity:0.1, y:-10}) .from(neon6, 1, {opacity:0.1, y:-10}); //KOP tl.from(premiere, 2, {opacity:0, y:200, scale:0.2, ease:Bounce.easeOut}) .from(datum, 2, {opacity:0, y:100, scale:0.2, ease:Bounce.easeOut}, "-=2") .from(bank1z3, 0.5, {opacity: 0.5, x:960, ease:Back.easeOut}) .from(bank1z2, 0.5, {opacity: 0.5, x:960, ease:Back.easeOut}) .from(tKennedy, 0.5, {opacity: 0}, "-=0.5") .from(prijsbank1, 0.5, {scale: 0.5, rotation:360, opacity: 0.5, x:960, ease:Back.easeOut}) .to(bank1z3, 2, {opacity: 0.5, x:960, ease:Back.easeOut}, 6) .to(bank1z2, 2, {opacity: 0.5, x:960, ease:Back.easeOut}, 6) .to(tKennedy, 0.5, {opacity: 0},6) .to(prijsbank1, 0.5, {rotation:360, x:960, ease:Back.easeOut}, 6) .from(afgeprijsd, 1, {opacity:0, scale:0.01}, "-=2") .from(chaisel1, 0.5, {opacity: 0.5, x:960, ease:Back.easeOut}) .from(tBrighton, 0.5, {opacity: 0}, 8) .from(prijschaisel1, 0.5, {scale: 0.5, rotation:360, opacity: 0.5, x:960, ease:Back.easeOut}) .to(chaisel1, 2, {opacity: 0.5, x:960, ease:Back.easeOut}, 13) .to(tBrighton, 0.5, {opacity: 0}, 13) .to(prijschaisel1, 0.5, {rotation:360, x:960, ease:Back.easeOut}, 13) .to(afgeprijsd, 2, {opacity: 0, ease:Back.easeOut}, 14) .from(bank2z3, 0.5, {opacity: 0.5, x:960, ease:Back.easeOut}) .from(bank2z2, 0.5, {opacity: 0.5, x:960, ease:Back.easeOut}) .from(tBrooke, 0.5, {opacity: 0}, 16) .from(prijsbank2, 0.5, {scale: 0.5, rotation:360, opacity: 0.5, x:-960, y:-200, ease:Back.easeOut}) .to(bank2z3, 2, {opacity: 0.5, x:960, ease:Back.easeOut}, 20) .to(bank2z2, 2, {opacity: 0.5, x:960, ease:Back.easeOut}, 20) .to(tBrooke, 0.5, {opacity: 0}, 20) .to(prijsbank2, 0.5, {rotation:360, x:960, y:-200, ease:Back.easeOut}, 20) .from(introductie, 1, {opacity:0, scale:0.01}, "-=2") .from(hoek1, 0.5, {opacity: 0.5, x:960, ease:Back.easeOut}) .from(tChicago, 0.5, {opacity: 0}, 22) .from(prijshoek, 0.5, {scale: 0.5, rotation:360, opacity: 0.5, x:960, y:-500, ease:Back.easeOut}) .to(hoek1, 2, {opacity: 0.5, x:960, ease:Back.easeOut}, 28) .to(tChicago, 0.5, {opacity: 0}, 28) .to(prijshoek, 0.5, {rotation:360, x:960, y:-200, ease:Back.easeOut}, 28) .to(introductie, 2, {opacity: 0, ease:Back.easeOut}, 29) .to(datum, 2, {opacity: 0, ease:Back.easeOut}, 29,5) .to(premiere, 2, {opacity: 0, ease:Back.easeOut}, 30) tl.restart();

Looks amazing!! ;-( i'm just a beginner...and one day, i will get it, hopefully.. Is it possible to copy the .js into adobe Edge and fill the objects with an image? when i see the html, is empty and the css...is almost nothing... I've tried to copy it into edge...but without changes it won't work...maybe i've to adjust little things?

thanks, it works, (i also had forgotten the time...@^*$*^*@ ;-( ) i'm glad that i can go on with gsap.. One small thing, the file (.oam) made by Adobe Edge isn't small...it is even bigger than a normal Edge work-around... I've got images of 700kb and the .oam file is more then 1mb ( by Edge should it be less dan 1 mb) I hope i did something wrong (again) because , slow and heavy animations are the major things to build it in Gsap....

Super thanks, tomorrow first thing to do in the morning!

I'm working...or trying to work with GSAP in Adobe Edge.. And want to learn TimelineLite, i viewed the quick tip, which look very clear. But when i want to make the simple one...it won't work...with "" without "" insert tweenMax...also tweenlineLite..., different kind of object...sad but true...no action Does anybody know, what i'm doing wrong? grt, marcel // insert code to be run when the composition is fully loaded here var myWheel = sym.$("RoundRect"); var rect = sym.$("rect"); var tl = new timelineLite(); tl.to(rect, {x:750}) .to(myWheel, {x:750});