en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en en en en en en fr en en en en en en en en en en en fa en en en en en en fi hbs_lat en en en en en en en en en de es en en en en en en sv en en en en en en en sv en si en en en en en en si en en en en en en en en en en en en en en en en en en en en en en fi en nb en fi en en en en en en en fi en nb en fi en en en en en en en fi en nb en fi en en en en en en en fi en nb en fi en en en en en en en sv en en en en en en en en en en en en en en en en en en fr it nb en fr it en en en en en en en fr it nb en fr it en en en en en en en sv es en nb en es en en nl en en en en en es en nb en es en en nl en en en en en es en nb en es en en nl en en fr en en ca en en en en en ca en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en nb en en en en ru en en sv en en en en en en es en pl en pl en en en de en en en it en fr en en en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
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.
Loop not working as expected
Lasercode posted a topic in Banner Animation
Lasercode replied to megaman's topic in GSAP
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)
Is there something like Timeline.wait(2)?
Lasercode replied to Lasercode's topic in GSAP
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!
Hey Carl, I see.. While writing a longer text to explain the necessities, 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.
Is there something like Timeline.wait(2)?
Lasercode replied to Lasercode's topic in GSAP
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 didn't find a sticky/pinned feature request thread, so could you pass this issue or shall I open a new thread? Cheers
Is there something like Timeline.wait(2)?
Lasercode posted a topic in GSAP
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.
CustomEase is not defined - But I imported TweenMax AND EasePack
Lasercode replied to Lasercode's topic in GSAP
Ah... damn. I misread that one sentence. Filthy Kraut not has good englisch sometimes Mea culpa. All clear and working now. Thanks Carl.
CustomEase is not defined - But I imported TweenMax AND EasePack
Lasercode replied to Lasercode's topic in GSAP
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 didn't. 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
CustomEase is not defined - But I imported TweenMax AND EasePack
Lasercode posted a topic in GSAP
Hey folks, check out the codepen with open console. Any hints what's wrong? Thanks
Lasercode replied to Lasercode's topic in GSAP
Facepalm... Thanks bro. Never would have thought about this..
Lasercode posted a topic in GSAP
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.
Importing Timeline/TweenLite, but it's not working
Lasercode replied to Lasercode's topic in GSAP
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.
Importing Timeline/TweenLite, but it's not working
Lasercode replied to Lasercode's topic in GSAP
Hey. Ok, that works. But what about the TimelineMax version? I still can't get it to run without importing TweenMax. Any clues? http://codepen.io/anon/pen/RWqBOE -> console error
Importing Timeline/TweenLite, but it's not working
Lasercode posted a topic in GSAP
Hey there, I am pretty sure, someone asked this before and it's explained somewhere. I just don't find it. In the provided codepen, please check the JS imports. It's only TweenLite. Why doesn't it work like this? I tried importing TimelineMax only, too, then added a var tl = new TimelineMax(); Nope... How can I make good use of the smaller libs? Thanks guys, Laser
Why does this ColorProps example not work?
Lasercode replied to Lasercode's topic in GSAP
Why does this ColorProps example not work?
Lasercode posted a topic in GSAP
Hello. I don't get it. It seems so easy but see yourself in the code(pen).. var clr = { pink: 'rgb(0, 0, 0)' }; TweenMax.to(clr, 5, { colorProps:{ pink:'rgb(255,255,255)' }, onUpdate:function(){ console.log(clr.pink); $('body').css('background', clr.pink); } }); Thank you for help. Laser
Stagger Timeline and reverse on event
Lasercode replied to Lasercode's topic in GSAP
I take Carl's solution, because I dont need that jquery array flip then. And @Carl, that KITT comment of yours....haha, I need to be fuzzier in future. Thanks a lot everybody!
Stagger Timeline and reverse on event
Lasercode replied to Lasercode's topic in GSAP
*push* Is there any way to realise this with TweenMax internal stuff and without setting booleans and write bad code?
Stagger Timeline and reverse on event
Lasercode replied to Lasercode's topic in GSAP
Cool idea. Nice plugin. You just had one mistake in your script, because when you set dots.reverse() a second time in the same timeline, it naturally RE-flips the array. So with only one it did the trick, nearly! But then I need to flip it again. So: no flip on original animation, then flip at every animation..hmm... Updated codepen here: http://codepen.io/anon/pen/tJHDu The mistake happens, when you roll out of a button and over the same button again. Brain -> knot.
Stagger Timeline and reverse on event
Lasercode replied to Lasercode's topic in GSAP
Thanks at first.. Codepen here: http://codepen.io/anon/pen/tJHDu On hovering 'btn two', I'd like to reverse the thing from 'btn one'. I hope, you understand me.
Stagger Timeline and reverse on event
Lasercode posted a topic in GSAP
Hi, I thought this is gonna be easy, but I dont get it working. I got several   elements in a row that I put into an array called dots. And I got two hover areas (first and last list item). Those dots are initially being animated like this: var dots = $('.lights li').not(':first').not(':last'); var dotsTL = new TimelineMax({ repeat:-1 }); dotsTL.add( TweenMax.staggerTo( dots, 0.3, {scale:0.1}, 0.05)); dotsTL.add( TweenMax.staggerTo( dots, 0.2, {scale:1}, 0.1)); Now on 'mouseenter' over a hover area, I'd like to reverse the timeline - but I want to let it run infinitely until the user rolls over the other hover area and then again reverse it (to normal so to say). But if I use 'reverse()' then I only get as many animation run-throughs as there are being played 'forwards' and then it stops. It's kind of a Knight Rider K.I.T.T. animation that can be reversed on hovering over one of its head lights How can I achieve this? Thanks a lot!
Lasercode replied to Lasercode's topic in GSAP
Hi Jonatron That is very nice of you. Unfortunately I can't just extract the HTML/CSS stuff, as this project is rather large, worked with compass and grunt, many dependencies (and different SCSS files), and I am just the guy for the animations and interactions. So I am very sorry not to be able to provide the needed codepen. Additionally I am under extreme time pressure, which makes it finally impossible. I didn't get the chrome stuff you talked about (after activating the flag), seems interesting though.. I will check out the CSS hints of yours and definetely get back in touch if I get any results. *marked unsolved again*
Page 1 of 2
“Go and browse through FWA or Awwwards, then view source of anything you see that has cool animation and you will be surprised how widely GSAP is used.”
“GSAP is just miles and miles ahead of any animation library out there. Great work!”
“I'm always left with my mind blown by the way in which you guys quickly identify the solution and provide answers.”
“I really need to commit to using GSAP more in my daily work & demos. I love pushing native CSS animation as far as I can but every time I use GSAP I’m just blown away. Keep up the great work!”
“I've never worked with a product that has such fantastic and enthusiastic support. GreenSock is incredible in its own right, but the team behind it is really what makes it shine.”
“Performance has been of paramount importance for GreenSock, so there is always peace of mind for us, developers.”
“I was astonished by the speed and versatility of animating with GSAP.”
“GreenSock is the best thing that happened to SVG animations since SVG animations.”
“The GreenSock animation platform is one of the most useful sets of tools in existence when it comes to web animation.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.