Jump to content

kreativzirkel last won the day on May 30 2017

kreativzirkel had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Posts 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.

    See the Pen EmJvqm by katerlouis (@katerlouis) on CodePen

  2. Thanks for the replies.

    I fiddled around with an updated pen. Click to to toggle animation.


    See the Pen oWVyom by katerlouis (@katerlouis) on CodePen


    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?


    // 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 })


    See the Pen QvoQxp by katerlouis (@katerlouis) on CodePen

    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




    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?


    See the Pen YVBMqe by katerlouis (@katerlouis) on CodePen


    See the Pen GmzzBo by katerlouis (@katerlouis) on CodePen

  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 .dudewhile 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



    (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)

    • Like 1
  6. 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()


    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)


    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.




    See the Pen gWqver by katerlouis (@katerlouis) on CodePen

  7. 20 minutes ago, mikel said:

    Looking for lerp links isn't that complicated: just use the search function.


    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.

  8. 7 hours ago, Carl said:

     and be sure to read this post where Blake talks all about normalize, lerp and clamp and there are a bunch of great videos to watch too.


    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 :)

  9. 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)


    See the Pen wdYYop by katerlouis (@katerlouis) on CodePen


  10. "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.


    See the Pen KmBjVz by katerlouis (@katerlouis) on CodePen

  11. 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 :o


    See the Pen XRBeRK by katerlouis (@katerlouis) on CodePen


  12. 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; 





  13. 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?





    "llo" ... and so on.

  14. 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)

    • Like 1
  15. 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 :o




  16. 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?

    See the Pen bWBZwa by katerlouis (@katerlouis) on CodePen

  17. 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 }


    See the Pen Mmydqd by katerlouis (@katerlouis) on CodePen

  18. 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 });
    	.from("#box-1", 2, { width: 0 })
    	.to("#box-1", 2, { width: 400 })
    	// effect shrink from the left
    	.add(function() {
    		var width = $("#box-1").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)

  19. 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)



    it appears the anonymous function gets calculated before anything else, now? 

  20. 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.