clf
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by clf
-
-
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.
-
Big thanks. I almost understand 1 and 2nd items, but can you explain why my first example ( where im creating a "new Timelines" on every click) works? Should i avoid such constructions and always create one instance of timeline for one animation sequence? In this example
See the Pen oLmGPb?editors=1111 by clf (@clf) on CodePen
i can't see any collisions, or memory leaks, or performance issues but the dark side i sense in code =) -
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.
-
Great! Thank you!
-
I created 2 pens, that approach to solve my problem. Mb somebody will be interested in
See the Pen WxPvWg by clf (@clf) on CodePen
urls inside html container, small JS codeSee the Pen EyAjWz by clf (@clf) on CodePen
urls inside css, JS code much bigger. Here divs are created dynamically, but html is cleanerI will be appreciated If it's possible to optimize my tweening code.
-
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.
-
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:
<input type="button" id="btn" value="Button"></input> #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 < 1s), (mouse in) , it also jumps to hover state, without smooth transition.
I saw a lot of examples where one image crossfading to another, but they always put one image at front and second at background, and change the opacity. I did the same thing in Flash using greensock - created 1 movie clip with 3 layers each of it contains 1 movie clip with a button state(normal,over,down). So probably solution is to create pseudo button in 1 div with 3 images, and change opacity on mouseIn\Out\Down event.
But is it possible to do without 3 elements for each state? Without constructions like:
<div> <img class="normal" src="..." /> <img class="over" src="..." /> <img class="down" src="..." /> </div>
I really don't understand how to do it with TweenMax. Please help =(
Blinking staggerFromTo
in GSAP
Posted
Thanks for the clarification.
It's definitely deffer to immediateRender. Here is an explanation of that situation.
I used legacy method, because had a break with coding, and did not focus on the beauty of the code in gsap3 🤪
And according to staggers. I want to animate each letter of <div> text that dynamically creating with injecting <span class="letter"> to innerHTML to achive the same result as animate.css do with "pulse animation". So for appearing every letter i have to use stagger. And the pulse each letter separately.
But i ran into one problem. If i do something like this
and at some moment i replace letters with new created, should i remove\clean every created "tween" for previous letters?
Because i feel that i have a memory leak. Or maybe GSAP understands that there is no object in a DOM and kills infinite tweens by itself?
Thanks