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 fr 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 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 de en de en it en fr en hu en lt en fr en en 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
clf started following Blinking staggerFromTo August 27
clf posted a topic in GSAP
Hello. Sorry for my dumb question, but why does that code leads to blink the logo at the start moment gsap.timeline() .staggerFromTo(logo, 3, {x:300, opacity:0,}, { x: 0, opacity: 1}) .staggerFromTo(logo, 3, {x:0, opacity:1}, {x:-300, opacity:0 }); but that doesn't gsap.timeline() .staggerFromTo(logo, 3, {x:300, opacity:0}, { x: 0, opacity: 1}) .staggerTo(logo, 3, {x:-300, opacity:0}) #logo has default opacity:0 in css Its' better to see start blink directly in codepen, because in window below that does't happen on rerun Thanks for any advice.
Avoid creating timelines on click
clf replied to clf's topic in GSAP
Avoid creating timelines on click
clf posted a topic in GSAP
Hello again. I'v got another stupid question and very ashamed to ask it. I want to create animation exactly like in my attached codepen, but without creating new timeline at every click. I tried something like this var TL1 = new TimelineLite({paused:true}); TL1 .to($("#box"), 2, {y: 200,ease: Bounce.easeOut}) .call(function (newText) {$("#box").text(newText);},["Up"], this, 0.2); var TL2 = new TimelineLite({paused:true}); TL2 .to($("#box"), 2, {y: 0,ease: Cubic.easeInOut}) .call(function (newText) {$("#box").text(newText);},["Down"], this, 0.5); and then $("#box") .click(function () { $(this).toggleClass("register"); if ($(this).hasClass("register")) { TL1.restart(); } else { TL2.restart(); } }); but it didn't work. Of course in that situation the animation begins from the start of timeline 1 or 2, so if i click on the box before the timeline ends it's jumps to the beginning. How can i avoid creating timelines on every click event? Thanks.
clf replied to clf's topic in GSAP
clf replied to clf's topic in GSAP
I created 2 pens, that approach to solve my problem. Mb somebody will be interested in http://codepen.io/clf/pen/WxPvWg urls inside html container, small JS code http://codepen.io/clf/pen/EyAjWz urls inside css, JS code much bigger. Here divs are created dynamically, but html is cleaner I will be appreciated If it's possible to optimize my tweening code.
clf replied to clf's topic in GSAP
Thanks for reply. Thoes gradients i use for example,of course it's very simple create them with css.But what if a button is a complex image, that is difficult to dublicate through css. Just look at for example. In my opinion author placed 4 buttons in the corners with 2 states. When he clicked on one, the led is changing from blue to red but without smooth transition. As i understand from you post, the only way is to put images inside the element, and then change the opacity.
clf posted a topic in GSAP
Hello, sorry for my english. I'm stupid noob with gsap and with animation in generally. I want to animate 3 button states, that i'v made in photoshop. I don't want to dublicate those background effects in css, i just want to use 3 different images. For example:    #btn{ background: url(http://storage5.static.itmages.ru/i/16/0811/h_1470942213_5377916_851bff8844.png); width: 197px; height: 78px; border: none; position: relative; transition: background 1s; font-size: 18px; color: white; } #btn:hover{ background: url(http://storage5.static.itmages.ru/i/16/0811/h_1470942213_3098246_d0e3709dbf.png); } #btn:active{ background: url(http://storage5.static.itmages.ru/i/16/0811/h_1470942213_8181429_4fa4a7ed9c.png); } In this case when i move mouse out of the button before animation ends, it returns to normal state with a jump. And when - (mouseIn for >=1 sec), (mouseOut for           I really don't understand how to do it with TweenMax. Please help =(
“After searching around the web for alternatives, I found GreenSock to be the most performant.”
“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.”
“+1 to GreenSock. It’s just one of the deepest and most reliable javascript libraries I’ve ever used”
“GSAP should be the default when it comes to Javascript animations. It should literally be part of the next Javascript update.”
“Spent today converting an animation to pure CSS, and then into GSAP. GreenSock was an order of magnitude easier. Love it.”
“GSAP, the rolls-royce of JS animation frameworks. Still going strong!”
“Truly, you folks on this forum are the nicest, least judgmental, helpful people I've ever encountered.”
“@greensock is just pure awesomeness. What more can be said?”
“GSAP was a revelation for me to be compared with the introduction of jQuery.”
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.