Jump to content

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

kreativzirkel last won the day on May 30 2017

kreativzirkel had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by kreativzirkel

  1. Like in video games (like Zelda), I want to write text with a typewriter-esc effect. I want to create a feel of "the spacebar is pressed aswell" Unfortunately I cannot find an option to include white-space in the chars array. I considered using TextPlugin for this, but – I want a random factor in offset – and more control, for example: slowing down words that are highlighted in a span – and TextPlugin effectively writes the text and therefore longer words (in pixel look very often) start in one line and jump to another (not what I want) PS: Any suggestion for a more elegant tweening option? 0-duration-tweens dont work unless you store the timeline and .progress(0) after it's creation.
  2. Thanks for the replies. I fiddled around with an updated pen. Click to to toggle animation. Why Base64? The images are very tiny in size; so on poor internet the loading-bottleneck won't be the filesize, but the number of http-requests. In my early tests looking for the performance issue nothing changed when I went with referenced images. But I will test this again now. (I figured once the base64 is encoded by the browser it behaves exactly the same as an referenced image-source) As for the force3D: When I leave force3D on auto (strictly speaking: just don't set any myself) the performance is way way better, but the everything gets really blurry. a1) Why is it getting blurry, although auto chooses false under the hood, anyway? Blurryness doesn't matter while moving: I see what Carl means with the blurryness; it may not be an visual issue while the elements are moving, wiggling etc. But as soon as they come to a stop, which the background and dude do, the images are blurry and look ugly as hell. The pixelated look feels like "tried hard, failed harder". Plus, because perceived image of the fire-sprite practially doesn't move at all, the blurryness is a pain in the butt here aswell. Image scaling: When I understand Carls suggestion correctly: You would make the sprites and the background image larger, say stretch the look on a 1920 width image? The background is currently 256*5.337px, 4 times larger would be 1.024*21.348px and even larger would be 1.920*40.027,5px. The browser wouldn't need to scale that much, a2) but wouldn't it be much harder for the browser to move ultra large images? PNG or GIF: Our *.gif's are by default more than 4 times smaller. So I naturally lean towards gif, although the sizes are in such low ranges, that it doesn't really matter. I couldn't track a mentionable difference in performance, so far. Still I may be missing something here. a3) Do you think there is a performance difference in moving PNG or GIF? Totally new approach: As long as the result is visually pleasing, I'm can deal with fan's starting to go nuts over a "simple website animation". But on some devices I sometimes get noticeable frame-drops (very few actual lags/stutters) I would be aboslutely okay with a low framerate. It actually suites the look we chose very well. But when you start with a smooth (60fps I guess?) experience you notice the difference once the framerate drops. a4) Can I force GSAP / the browser / who ever to cap the animation at 30, 25 or 24 fps (Or maybe even lower)? "requestAnimationFrame() to the rescue questionmark"
  3. Nice approach Carl! You got me on the right road to achieve exactly what I'm looking for Tweening to 0 tweens the timelines playhead backwards. In this wild wiggle case it won't matter at all; but I'm curious how to achieve tl.pauseAfterJustThisRepeat() would work for other scenarios. How about this? tl.pause() // Exact duration the timeline would have needed to end the current repeat var duration = tl.duration() - tl.progress() * tl.duration(); TweenMax.to(tl, duration, { time: tl.duration(), ease: Power0.easeNone }) I know you guys don't recommend enhancing the TimelineMax.prototype object, so do you think this little function is worth considering to go into the main build? Let's call it tl.pauseAfterRepeat()
  4. CPU ca. 50% in Safari (9.1.3) and latest Chrome (58) on Mac OS X 10.11.6 El Capitan (fully blown up MacBook Pro Retina 15'' late 2013) When I now add a yPercent-tween of a very tall scenery image to simulate jetpack-dude flying up, it starts lagging significantly and my fan prepares to take of to the moon. Guessed reasons: – My (probably highly improvable) Sprite-object – stepped ease of a scaled up image with image-rendering: pixelated – tweening xPercent instead of x – sprite as <img/> instead of a background-solution – src="data-uri.." (Nope, tried classic image reference, same issue) – *.gif (Nope, *.png has same issue) – force3D: false (Seems to be it?) Comparing with other sprite-animations using GSAP I realized the probably familiar Santa Clause doesn't have this issue. CPU stays low. I forked the pen and and changed it to also using force3D: false, xPercent and an <img />-solution. Still no CPU highening. In my case removing force3D: false (it's default is true, right?) brought the CPU down (but not as low as the comparison). But I need to preserve the pixelated look and therefore keep .jetpack-dude sharp. Plus: Santa's CPU usage doesn't care about force3D So.. 1) Why does force3D: false infects the CPU usage so drastically? (no GPU acceleration I assume?) 2) What can I do to keep the pixelated look with Santas performance?
  5. Hell yeah, I knew it! I knew there was an easier way. Thank you sooo much, Carl. GSAP is worth way more than you guys charge. One more question: Can I tween y: "+=290" of .dude, while the wiggle tweens the same y? Or do I need an extra wrapper for this? My quick tests didn't work– Another question: Carl handled going back to default by hardcoding a tween y:0, x:0. There must be a way to do the following on click: "Finish this repeat, and then stop, but go on repeating once you play again" // Something like tl.pauseAfterJustThisRepeat(); (Background of these questions: at some point the .dude has to stop wiggling and slightly float, and then leave fly out of the screen, while wiggling)
  6. Thx, mikel. This comes closer to what I am looking for. Do you have any suggestions regarding Question 2) and 3)? And 4) Can you suggest an elegant way to pause these 2 tweenProperty()-functions?
  7. I have a pixelated jetpack-dude and want to create the illusion the he is flying. a huge background is animating from top to bottom. So the jetpack-dude needs to get shaken by the air left and right and up and down, like he struggles to stay keep track and can't control the rockets below. No rotation though; this ruins the pixel look. I only need a kinda randomized tween of x and y around his starting point and ideally keep going back to his starting point whenever the tween gets paused() Question: 1) I just can't come up with a convincing easing.. dunno why I'm struggling with this so badly oO 2) How can I express "go from y: 0 > y: 5 > y: -5 > y: 0, with a single tween? (I remember there was a similar issue in the past, but just couldn't find it anymore) Bonus: 3) The tween will get stopped by the user at some unknown point, and I need the dude to be at the exact position where he started. Is there something like "Pause tween after the repeat is finished?" I could add a tween.eventCallback("onRepeat", function() { tween.pause() }) but that will break the loop when the tween gets played again. Thanks!
  8. I figured Carl refers to a specific post by Blake and figured he just missed to include the link. Search won't tell me which one of Blakes 2,294 posts he meant – If I misunderstood Carls message, sorry for the bother.
  9. I guess you don't mean the post in the current thread. But I can't find a link. I would love to read Blakes post about normalize, lerp and clamp
  10. *gentle push* – Don't know if the questions require a new thread.
  11. Forum Bug? Sometimes the codepens appear to me, sometimes not. Never saw both at the same time in blakes topic (Safari 9.1.3 on Mac OS X El Capitan 10.11.6) Wow. Heavy answer; so much genius in so little code. My brain still can't connect this one dot that then spreads out to all the dots. I have to chew on this a little while longer in hope to see Matrix. (I guess?) I understand your basic lerp example, although I still wonder how you would make boundaries/caps. Lets say I want to change the progress of a timeline / tween regarding on the scroll position. "From 50 to 400px scrollTop go from progress 0 to 1" var toTween = TweenMax.to("...", 9203, { ... }).pause(); // duration is irrelevant in my case (as I understand it), since I want to change progress on scroll delta (delta right choice of word in this context? :D) requestAnimationFrame( scrolling ); function scrolling() { var st = $(window).scrollTop(); var scrollFrom = 50; var scrollTo = 400; var delta = (st - scrollFrom) / (scrollTo - scrollFrom); toTween.progress( delta ); // recursion requestAnimationFrame( scrolling ); } But scrollTop below 50 delta results in something like -0.14 etc. .progress(-0.14) is almost as Question #1: How would you cap delta (most conveniently)? Question #2: Is there a quicker way to control a tweens / timelines .progress() over a scroll-period? I love the effects you can create with skrollr (http://prinzhorn.github.io/skrollr/) but don't like to hardcode my animations inside the HTML. Plus: there is so much crazy possibilites with Timelines. Here is the scroll-demo (I will tween opacity aswell, but for the sake of seeing the problem right away I didn't include it in here)
  12. "from filter blur(20px)" I figured gsap can scan that there is a number in this string and manages to tween this one number, as long as it is only one. So I made a demo and tried it out. Variant 1: tween the element itself from filter: "blur(20px)" Variant 2: tween obj.val from 20 with custom function onUpdate. To my surprise Variant 1 worked after Variant 2 was initiated at least once. Meaning Variant 1 changed to "fromTo" filer: "blur(0px)" > "blur(20px)" works. So my initial assumption on gsaps capability to find an integer inside a string was right. My question now is: Why does GSAP need a from value? I mean: when there is no initial blur to go back to, why doesn't GSAP assume it should go to zero. That's the most logical assumption in my opinion, when there is no initial value. This would be a better behavior than waiting the tweens duration and then flash to zero anyway. I never applied a border-color, and yet the third button can tween from a red borderColor.
  13. EDIT: W00t? On clickhold longer than 1s both pens lag as hell and end in a freeze? Am I the only one? Is there a particular reason why you chose to use x on the .scroll-content? My guts say "go for scrollLeft on the .scroll-container" I desire 2 specific details: 1) If only clicked instead of click-hold the scroll should go tween exactly one card (faster then on click-hold) 2) When click-hold-scrolling, I want the scroll to stop immediately on mouseUp. I forked your codepen and changed the following: – tween scrollLeft on the .scroll-container – to tackle 2) kill the last started tween on mouseUp, which.. I honestly cannot tell if it worked
  14. How would you approach a continuous "+=" Tween to scroll the container? (The scrolling mechanism isn't at issue here. It is a simple overflow: scroll box, which scrolls perfectly on both mouse and touch devices) All I need is a starting point on how to tween something without an actual duration; Thanks!
  15. Different issue, same topic: Text is aligned on the right; is the text-plugin able to write it reversed? Or do I have to loop through with splitText myself in this case? "Hello" "o" "lo" "llo" ... and so on.
  16. I like Jonathans typewriter "hack" – No need for TextPlugin or SplitTextPlugin Worth noting, though: playing with the width like that only works with mono-spaced fonts. Really love Blakes contributions here. But I see why a GSAP parent wants to protect conformity in community talk. Plus: I fear you need Blakes mad-skillz to enhance existing gsap functions – If you don't know what you're doing there, things may break, right? Not so much if you enhance TweenMax with new functions (hoping the namespace won't collide with future versions) Jake, what exactly do you mean by helper functions in this context? Could you provide an example by showing how you would solve the thread-issue of CharsPerSec with one of these helper functions? PS: Sweeeet forum improvements 8)
  17. I was implementing my own typewriter-effect when I stumbled upon the TextPlugin. And I love it! Since it is used as a simple property in the vars-object you still have to set your own timing of the tween. But I will mostly need a kind of "characters per second" speed, therefore the duration is not always the same. I don't want to calculate that again and again everytime I use it. How would you approach this? My idea is to enhance GSAP with TimelineMax.prototype.typewriter( elem, charsPerSec, delimeter ) But before I go down that road I'd rather ask if this is a good idea Thanks!
  18. Seen in the codepen: As soo as I pass an array as element in a .stagger-Tween, the individual .box'es get ignored and all move as a whole. .staggerTo(".box", ... // each .box moves! Nice! .staggerTo([".box", ".box2"], ... // .box'es move as a whole // What to do?! Is there a neat GSAP syntax I do not know about or is the only solution to loop manually?
  19. Thank you, Carl! This works for me, although it would feel more intuitive, if my first CodePen would just work, where I .add() an anonymous function. I see that GSAP needs to run the function "so early" in order to get the duration and offset (and maybe even more I don't know about); Now I know better– Woop Woop! Having another function + delayedCall swirling around is not necessary in my case. I just did this: .to("#box-1", 2, { x: function() { return "+="+ $("#box-1").width(); }, width: 0 }) - Now lets say I want to make the same thing for more than 1 property. Why doesn't the following work? // Return the whole property object with a anonymous function // Doesn't work :'( .to("#box-1", 2, function() { // some calculations... var width = $("#box-1").width(); var someOtherCalculation = 0; // imagine fancy math here var bg = (some_fancy_if) ? "green" : "red"; return { x: width, width: someOtherCalculation, backgroundColor: bg } }) Fork: http://codepen.io/katerlouis/pen/Mmydqd
  20. Sorry, I have to push this again– I solved this now with hardcoding / saving the desired widths, but still am curious how I could dynamically calculate the widths and this exact point. I mean, there must be a way, right?
  21. I need many tweens of these kind chained, mostly regarding the same element. Nesting so many onCompletes doesn't seem right If I misunderstood you on this one, I'd be thankful if you could fork my pen.
  22. This doesn't work for me; I need to calculate the widths and heights that are applied at that exact moment. tl = new TimelineMax({ repeat: -1 }); tl .from("#box-1", 2, { width: 0 }) .to("#box-1", 2, { width: 400 }) // effect shrink from the left .add(function() { var width = $("#box-1").width(); console.log(width); return TweenMax.to("#box-1", 2, { x: "+="+width, width: 0 }); }()) // with the additional parentheses the timing of the .add() is no longer ignored // but the width calculation fails totally, seems to be 0? Why? .to("body", 2, { backgroundColor: "blue" }) ; The width inside the .add() is zero; which I just can't have :'( I understand that the ".from()" is set at the time the .add(function()) is run through; and nested timelines don't help here as it seems. Is .call() the solution? PS: I'm still curious why .add(function() {}()); works? (+ 2 parantheses)
  23. Okay, I am highly confused: 1) Why does parantheses AFTER an anonymous function make the problem disappear? 2) now I added those parantheses, but the calculations I want to make, get ignored (better said: probably calculated at some other time, which is not convenient for me) EDIT: it appears the anonymous function gets calculated before anything else, now?
  24. Sensing when the player is out of view is not the problem. I use jQuerys Waypoints for this. Thing is: as soon as you set it to fixed, it jumps: I don't want it to jump. This is not a problem for going down, since the player / and the button are out of view anyway. But when you go back, the now fixed button must animate to it's former position, which.. unfortunately, is getting scrolled. So adjusting the tweens destination while scrolling is impossible I think? I will look into the ScrollMagic thingy, although I'd rather not add yet another library bloating up my code just for one simple tween.
  25. I need to make some calculations for a Tween I want to add. But when I .add() it with a anonymous function returning the Tween, the following tween doesn't wait for it's turn. Like it doesn't know how long it's gonna take. "But Why!?" am I thinking. Dear Elders, help me out here please