Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Lasercode last won the day on November 21 2012

Lasercode had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Lasercode last won the day on November 21 2012

Lasercode had the most liked content!

Community Reputation

13 Newbie

1 Follower

About Lasercode

  • Rank
    Advanced Member
  • Birthday 02/08/1980

Profile Information

  • Gender
  • Location
    Cologne, Germany
  • Interests
    Electronic music production, SoundFX, movies, realworld-multimedia-integration, the real mother nature, and how to grow up without getting old.

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. As always great help!!! I think most problems really come from wrong usage of mine. I will change the things you mentioned and will get back, if any error persists. Thanks a ton.
  2. Hi guys, this is how i normally created my loops in my banners before gsap3: // ... tl.addCallback(function(){ if(loopCount < 3){ loopCount++; // fade out elements }else{ tl.pause(); } }); Now, that addCallback is not present anymore I use "call()", but the ad does not loop correctly, but only two times. Is "call" not being processed in every loop of the timeline? This would be my whole timeline. Also notice the "tl.to({}, 0.1, {});" in the end, which is needed to avoid a flickering when looping. This was not the case in gsap2 as well. var loopCount = 0; var tl = new TimelineMax({paused:true, repeat:-1}); tl.timeScale(1.2); //fr1 tl.from('#logo', 1, {scale:1.2, opacity: 0 }); tl.to({}, 2, {}); tl.from('.line, .line2', 0.2, { opacity: 0 }); tl.to('.cls-1', 1.2, { 'stroke-width': 102 }); //fr2 tl.from('#bg-blue', 3, {opacity: 0}, 'kaas') tl.from('#stuk1', 0.2, {opacity: 0}, 'kaas'); tl.from('#shop', 0.5, {y: 50, opacity: 0, ease:Back.easeOut},'kaas'); tl.from('#stuk1_shade', 0.2, {opacity: 0}, 'kaas'); tl.from('#stuk2r', 1.3, {x: -72, opacity: 0, ease:Power4.easeOut}, 'kaas'); tl.from('#stuk2l', 1.3, {x: 72, opacity: 0, ease:Power4.easeOut}, 'kaas'); tl.from('#stuk3r', 1.5, {x: -121, opacity: 0, ease:Power4.easeOut}, 'kaas'); tl.from('#stuk3l', 1.5, {x: 121, opacity: 0, ease:Power4.easeOut}, 'kaas'); tl.from('#stoerer', 0.5, {scale: 0.5, opacity: 0, ease:Back.easeOut}, 'kaas+=1.2'); tl.to({}, 1, {}); tl.to('#stoerer', 0.2, {scale: 0.95, yoyo: true, repeat: 3}); tl.to({}, 2, {}); // loop tl.call(function(){ if(loopCount <= 5){ loopCount++; tl.set('.cls-1', { 'stroke-width': 14 }); tl.set('.line, .line2, #logo', { opacity: 0 }); tl.to('#frame2', 0.5, {opacity: 0}); }else{ tl.pause(); } }); tl.to({}, 0.1, {}); What am I doing wrong? Thanks!
  3. Hey, thanks for the fix. Smart ass comment: I noticed that your initial gradient flips once you hover. Not that important, I admit . But if you wanna fix that too, the error is that you use "to top" in your colorize function, but then use the top param first, and then the bottom one. If you switch them, it's fine and dandy: function colorize(element) { //apply the colors to the element TweenLite.set(element, {backgroundImage:"-webkit-linear-gradient(top," + colors.bottom + ", " + colors.top + ")",background:"linear-gradient(to top," + colors.bottom + ", " + colors.top + ")"}); } (Even less imporant: I am a humble member since '12, but thanks for welcoming me )
  4. Hey, I know this is an old thread, but I came here once before and noticed that Jonathan's linear gradient example is not working for me. The radial one is ok. (Chrome)
  5. Hey there, Title says it. I know I read it somewhere some day... But I cant find what I search, so sorry to open a potential duplicate thread :/ Let's say I got a for loop creating 80 elements, as particles. Now I want them all to have the same starting point, but different end positions/speeds via Math.random() or so. After the "explosion", I would like to move the particles again for some pixels in Z direction, after a break. So: I like to have an explosion, then particles slow down and freeze, then animate again randomly, freeze again, and repeat - always with random positions. Could someone tell be the best dynamic approach with GSAP? I dont know how to handle this right.. And sorry that I can't provide a codepen, it would just be chaos Thanks!
  6. Hey PointC. You got me right Perfect! I marked Carl's answer as the solving one, as it was the right answer to my initial question. However, you helped me a looot! Cheers!
  7. Hey Carl, I see.. While writing a longer text to explain the neccessities, I realized that my way of organizing the timeline is probably just wrong. I am more of a creative than a coder and I got used to use ONE timeline, where I use the position param mainly for keyframe names to define animation "blocks" and add delays inside those blocks (like "start+=0.5" or "state2-=0.3" etc). The "wait" would then make things easier to divide into animations and pauses, if you get my thought. My creative mind makes a difference between times where stuff happens and where nothing happens. And it's way better to read a "wait" in the tween chains. But okay. I can really use blakes prototype function then. If I get things right, the main fault of mine is, that my "blocks" of animations (like former movie clips in Flash) should probably be split into different timeline objects, but I got a question here, just to understand how to do things right: Can I chain timeline objects, and can I make use of the position params in the same manner like in Tweens? Like having tl1 and tl2 being TimelineMax objects and then just chaining them easily to get one whole animation with a break of X seconds in between them? It's not easy to explain for me, so please ask, if something sounds weird. Thanks so much.
  8. Thanks mate. I would strongly recommend adding this to the lib to be honest. It seems like a very small effort for a very high user convenience, and I even used wait functions in flash already. It definitely is something very very common in programming animations. Especially in banner animations. I didnt find a sticky/pinned feature request thread, so could you pass this issue or shall I open a new thread? Cheers
  9. Hey there, if I want a pause of 2 seconds between Tweens in a Timeline, I got used to write tl.to({}, 2, {}); But it feels just not right and I wonder if there is something like tl.wait(2). First I thought "addPause" is what I need, but I believe it wasn't. This must be an everyday issue I assume, so I think I am just dumb and or blind. Thanks for some input.
  10. Ah... damn. I misread that one sentence. Filthy Kraut not has good englisch sometimes Mea culpa. All clear and working now. Thanks Carl.
  11. Thanks for the quick reply. I used custom ease before though, and I knew that I don't need the EasePack. I wanted to try it in addition to see if it changes something, which it didnt. If I remember and got you right, all I need to do is to use the tweenmax import link (for example the one from the download page)? https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js Because that's not working too (locally tested - not in codepen) I also downloaded the bundle now and imported your tweenmax lib locally. No success. Still "CustomEase is not defined".. Could you have a further look please as I think I did not make a mistake.. I think Additionally.. Maybe it's a good idea to add a quick note about it here? http://greensock.com/ease-visualizer Thanks
  12. Hey folks, check out the codepen with open console. Any hints what's wrong? Thanks
  13. Facepalm... Thanks bro. Never would have thought about this..
  14. Hey folks. I got a rather simple problem. Please check out the code pen. Run it and then comment out the JS and comment in the CSS. What do I do wrong? Thanks.
  15. I had some problems with the file you did not mention (TweenMax) and did not know how to get those other smaller libs to work. Now I do. Question solved. Thank you all.