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. For my sprites I do the following:


    // my own sprite object, don't bother this one
    // all you need to know is, that .set() selects a frame
    var mySprite = new Sprite(...); 
    TweenMax.fromTo({}, 1, { frame: 1 }, { frame: 10, roundProps: "frame" })
    	.eventCallback("onUpdate", function() {


    This works nicely :D, since "this" in a TweenMax's onUpdate returns the tween.


    If I want to do the same inside a timeline, "this" refers to the timeline, and not the current tween. 


    var tl = new TimlineMax()
    	.to(".someStuff", 1, ...)
    	.to({}, 1, { frame: 1 }, { frame: 10, roundProps: "frame" })
    		.eventCallback("onUpdate", function() {
              	// not working :'(
              	// "this" refres to the timeline, not the current ".to" tween



    So the actual question is:

    How can I access the tweened values in the second scenario? Maybe you could shed more light into how and why it works this way.




    (I know there are other ways to handle Sprites; steppedEase etc. – but this actually doesn't influence my question.)


  2. 2 hours ago, Visual-Q said:

    I'm not familiar with Vue but I can see where you're going.


    I only used Vue in the pen to make it more of a habit. Ignore Vue in this case– what you were illustrating isn't what I'm going for :)

    I really just wanted to avoid the proxy-object- or css-var- or or or route :D


    37 minutes ago, Visual-Q said:

    If transforms are causing you difficulties though what about adjusting your css and positioning your object absolutely and animating top, left values instead of transforms. If they animated as percentage values they would be relative to the parent and responsive.


    The elements are already positioned absolutely (fixed to be more precise) – my experiences with tweening top/right/bottom/left haven't been too good. Maybe have a look at the actual feature I'm having issues with, the two laptops- and phonemockup; it's pretty complex: http://dumbo.design/airberlin  (please don't open in Safari.. I'm currently having the weirdest bug ever in Safari, insanely glitched in every aspect... I mean.. literally glitched)


    1 hour ago, GreenSock said:

    You may think it's silly that GSAP doesn't just slap the string onto the transform but there's a ton that goes into the proper management of transforms that most people never even realize, especially because GSAP makes it "just work".


    I don't think that. I think it's awesome. And I understand that these things are necessary. I was just hoping that there is some kind of a "switch" that disables all this fancy cool stuff for this one Tween. 



    Now I know what I'm asking is impossible and can move on

    responsiveness in general is still a topic you'll hear me whine about 8)



    If your thinking now: "Dude.. you could've just did either of all the solutions at hand and would've saved way more time than trying to dig for the 'cleanest' solution" – Besides that's just the way I'm wired, I really enjoy this digging; learning the little details, caveats, gotchas, hickups; figuring out what's going on under the hood; getting more puzzle pieces to see the whole picture– The more I truly understand, the more tools I have to solve trickier stuff.

    • Like 1
  3. Okay, I got it now, too–


    The positive stuff that GSAP does for transforms unfortunately makes things more complicated in my case :)

    I'm gonna stay persistent with my question 8) :


    is there a way to tell GSAP to do the same with the "transform" property as it would do any other generic property?


    This pen shows GSAP handles the string (at least the string I want to use) perfectly: 


    (I used roundProps only for visual convenience; the actual tween wouldn't get rounded, of course)

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


  4. @Visual-Q
    Your solution would probably work, but also would require recalculation if the elements ratio changes. This isn't rare when looking at responsive images with art direction. Keeping those scenarios synchronized in JS and CSS is easy to forget. As much as I love GSAP; when it comes to changing stuff by breakpoints, CSS is reigning king of the hill for me. 


    Since I feel confident to use custom css properties (css vars) in live projects, I quite often end up tweening a `--progress` for instance, and let css react to that value. But the whole responsive animation thing is something for another thread 8)


    The main question remains: Is there a way to tell GSAP to leave the string as is and only tween the numbers? 


  5. I didn't get it to work immediately with CMD+S in Chrome or Firefox, so how about you guys add it into the offline docs for other users aswell?


    75% of my doc-time goes into the ease visualizer for the correct syntax

    (Chr chrm, what's the status here, anyways? ;))


  6. I came up with a way to tween a centered, fixed element out of view without "dead pixels". So when the animation starts you can immediately see it.


    var tl = TweenMax.fromTo(".box", 2, 
    	{ transform: "translateY(50vh) translateY(50%)" },
    	{ transform: "translateY(-50vh) translateY(-50%)" }


    For some context: http://dumbo.design/airberlin – scroll to the first "chapter intro" > the laptop mockup (Wanted to show you guys the site when it's truly finished, argh) – 75% percent of the time it works as intended. But sometimes the elements don't scroll out of view anymore, in neither direction. It feels like the `translateY(50%)` is being dropped / ignored or something.


    Honestly, .. I am kinda afraid by the matrix(), since I cannot decipher what is happening. 

    I feel like the bug wouldn't occur when I could force GSAP to keep the transform-string as is and only animate the numbers inside it. Or at least I would know that the issue is coming from somewhere else.


    I played around with `force3D: false`, which didn't prevent matrix()




    just realized: the tween in the pen also seems to ignore the second `translateY`


    Could you guys shed light into the matter for me? I really am confused on how GSAP handles transforms.




    If you want to see the bug; apparently it happens more on smaller (mobile) viewports than on desktop. I couldn't reproduce it in Mac OS X latest Chrome so far.

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

  7. On 27.4.2018 at 5:13 PM, OSUblake said:

    TIL you can animate innerHTML. Makes sense, just never thought about it.


    I.. practically.. taught.. BLAKE (!) something? :OOO 

    Where's my award? I'm freeing up the whole wall for that certificate :D


    Jokes aside: 

    TIL that RoundProps is done with the modifiers Plugin 8)

    Both of your solutions work – but you know me by now: My suggestion would be way more comfortable for users (in my opinion at least :D). 


    Even if you are a blake-esc GSAPper, coming up with a solution for specific number of decimals is distracting you from the main goal.

    This is (arguably) an unnecessary detour. I'm all for "help the user concentrate on what they want to do, not on the how"


    My use case doesn't seem farfetched to me.


    So who do I have to get on his nerves until this gets implemented?


    • Haha 1
  8. To my knowledge you can only have perfectly round numbers with the RoudPropsPlugin.


    It would be great if you could pass an object, where you can tell GSAP how many decimals you want to round to.


    What do you think?


    TweenMax.to(".numberCountUp", 1, { x: 0, y: 0, innerHTML: 0 }, { x: 200, y: 200, innerHTML: $(".numberCountUp").text(), roundProps: [
    		{ prop: "innerHtml", decimals: 2 },
      		{ prop: "x", decimals: 0 },
      		"y" // shortcut if you wanna have no decimals at all, which is the normal behaviour


    • Like 1
  9. On 18.3.2018 at 6:16 PM, OSUblake said:

    Trying to do an overscroll effect would involve modifying the native scroll behavior.


    I explicitly don't want the page to change it's scroll behavior, because I need to play another timeline at a certain scroll position (bottom of the page). In order to communicate visually that something is gonna happen in a few more scroll-pixels, I only want to visually tease as if the scroll would be getting harder.


    Maybe the live example makes it more clear. At the bottom, where the jump-module gets animated in, we feel like it's too sudden and unexpected, which is why- .. I can just repeat myself :D:D



    Please note: this is still more or less a beta; I wanted to show you guys when it's finished and polished. 

  10. Speedy Gonblakez– Insane!


    I'm excited to go through your links, thank you very much!


    Nice solution with draggable, unfortunately it has to be without clicking, just scrolling-style.

    It looks like hammer.js is also focused on clickdrag-related solution :'(



    EDIT: I also don't see how pointer-events can help me here, since the pointer isn't doing anything when you use the trackpad to perform scroll. Maybe there is a misunderstanding: I need a "swipe-like-detection" on trackpads, where the user scrolls with two fingers like he would normally do. Since I am in an environment where all panels are positioned fixed top left with width and height 100%, there is no actual scrolling happening.


  11. Love the input of this community so much, that I dare to make a completely non-gsap-related thread. Feel free to delete it, if this may be inappropriate. 


    I have to do a lot of "Snap-Scroll-esc" things; meaning: full width & full height panels, that listen to "swipes". Like fullPage.js or OnePage Scroll for instance. Of course, the animations we use are way more sophisticated. So all I need are the gestures for trackpads. I tried to extract them out of the code.. but.. failed horribly.


    I then found lethargy.js, which is used by smartscroll but can luckily be used independently. 


    When you look at these solutions and use them with a trackpad, you notice that there is a rather heavy timeout until your swipe is recognized again. 

    As you can see in this Demo, you have to use some sort of throttling or debouncing to fire only one event per user-input. This throttle/debounce timeout is part of a tricky split with lethargy's sensitivity (the green line in the demo, as I understand it) – if the line is too low, you need a very long timeout to prevent false positives; if it is too high, you risk getting false negatives.  


    It appears this doesn't pose a problem on touch devices. For these I use Ben Majors jquery.touch-events, which works beautifully.


    I fiddled with the three lethargy-parameters the best I could, and haven't accomplished robust results under 650ms delays, which is way too high for my taste. All the fancy animations lose in value, when the user doesn't feel in control and is confused / figuring out when he can and cannot interact with the page.


    Much text for a simple question:

    How do you guys handle trackpad swipe events; have you found a way to fire multiple "correct events" without timeouts?

  12. Like I said; in my particular case I found a work around – No time to test it in depth; but it looks promising :)


    This was more of a general question; curiosity paired with the urge to help GSAP evolve. You guys can't see all usecases; so I just asked :)


    I still hope it will be implemented though 8)

  13. 16 hours ago, GreenSock said:

    I didn't quite follow why you'd need 5 extra functions elsewhere - could you explain? It should be pretty simple to use scaleX/scaleY instead of scale but I might be missing something obvious.


    I don't see a convenient way to make a function that serves all 5 cases properly, because the logic per element differs; some more, some less–


    This constant scrolling between the timeline and the functions is really confusing– you know me by now :D – I like to stay as close as possible to the timeline


    I have something like this:

    var tl = new TimelineMax()
    	.from(".elem1", 1, { scale: 0, xPercent: 100, modifiers: {
        		scaleX: elem1Scale,
    	    	scaleY: elem1Scale,
    	      	xPercent: function(value, target) {
        	    	// some logic
            	  	return newValue;
    	.from(".elem2", 1, { scale: 0, xPercent: 100, modifiers: {
        		scaleX: elem2Scale,
    	    	scaleY: elem2Scale,
    	      	xPercent: function(value, target) {
        	    	// some logic
            	  	return newValue;
    	.from(".elem3", 1, { scale: 0, xPercent: 100, modifiers: {
        		scaleX: elem3Scale,
    	    	scaleY: elem3Scale,
    	      	xPercent: function(value, target) {
        	    	// some logic
            	  	return newValue;
    	.from(".elem4", 1, { scale: 0, xPercent: 100, modifiers: {
        		scaleX: elem4Scale,
    	    	scaleY: elem4Scale,
    	      	xPercent: function(value, target) {
        	    	// some logic
            	  	return newValue;
    	.from(".elem5", 1, { scale: 0, xPercent: 100, modifiers: {
        		scaleX: elem5Scale,
    	    	scaleY: elem5Scale,
    	      	xPercent: function(value, target) {
        	    	// some logic
            	  	return newValue;
    var elem1Scale = function(value, target) {
     	// some logic
        return newValue;
    var elem2Scale = function(value, target) {
     	// some logic
        return newValue;
    var elem3Scale = function(value, target) {
     	// some logic
        return newValue;
    var elem4Scale = function(value, target) {
     	// some logic
        return newValue;
    var elem5Scale = function(value, target) {
     	// some logic
        return newValue;


  14. TweenMax.to(".lots-of-elements img", 1, { x: 50, modifiers: {
    	x: function(value, target) {
    	// I would like to add some logic depending on the index of the element
          	// just like function-based values can, but there is no paremeter :'(
          	// luckily, in my case, I can do this:
          	var index = $(target).index();
          		// some logic
          		... var newVlaue ...
          		return newValue;


    I would like to add some logic depending on the index of the element, just like functions can do–

    But modifiers plugin doesn't have a paremter for that :'(


    You could work around this by finding the index some other way, maybe with jQuery's .index()

    But that may not always be possible and when you use a something like this, the work around fails:


    var elements = [
      ".stage h1",
      ".slider .slide span"
    TweenMax.to(elements, 1, { x: 50, modifiers: {
      x: function(value, target) {
       	// howww to get the index?! 


    Is there a reason that there is no index param? And would that be worth to add? I say yes 8)


    modifiers: {
      x: function(value, target, index) {
     	// some logiiic
        return newValue;




  15. On 3.11.2015 at 4:05 PM, Jonathan said:

    What i was suggesting is to disable the video controls and then animate the progress that is linked to the video tag as it plays.


    I am still confused, Jonathan–

    I don't see how you can link the <progress>-tag to the <video>-tag

    Did I miss the demo where one of you guys did this exact technique?


    For binding the duration of a video to scroll, I use this so far.


    var $video = $("video");
    var video = $video[0];
    var scene = undefined; // preparing scene var
    // I had problems with loadedmetadata event
    $video.on("canplay", function() {
    	// cancel if scene already exists
      	// (Don't ask me how, but this scene got created multiple times without this cancel)
    	if (typeof scene === "object") return;
    	var duration = video.duration;
    	var tl = TweenMax.to(video, duration, { currentTime: duration, ease: Power0.easeNone });
    	scene = new ScrollMagic.Scene({
    		triggerElement: "video",
    		triggerHook: .5,
    		duration: "50%" 


    Bad performance on Android Chrome though.. a few frames, even if I scroll super slowly.

    What's why I want to go to try the <progress> route–

  16. I know, I know, – you guys are veeery protective when it comes to code-size.

    But this is a plugin, which is optional anyways ;)


    How much would it cost to add scale and skew to the modifierplugin, and do the scaleX and scaleY thingy internally? I mean, when the code-size protected TweenMax does provide this shortcut, why doesn't ModifiersPlugin?

    Using it like it works on y is way more convenient.


    In my case I need to do this on 5 tweens inside a rather complex (at least for me) timeline. Placing five extra functions somewhere else wouldn't be so pretty :( – 

    • Like 1
  17. Oh, okay–


    I will suggest to mention things like these in the DOCS– Plugin docs aren't that long, anyway. 


    That behavior is pretty unexpected for low-medium skilled GSAP users; 

    Wouldn't that be the same for rotation? Isn't rotation technically is placeholder for rotationZ? Yet modifier works on rotation alone.

  18. On 12.3.2018 at 11:53 AM, Sahil said:

    You can use modifiers plugin to calculate values before applying them so your tween will continue playing on resize as if nothing happened.


    This sounds promising; I look into that.

    How is the impact on performance with this technique? My instinct says it's rather heavy. I need to change a lot of tweens on resize–

  19. It's werid,

    .. whatever I do, I can't get modifier to impact the scale property–


    The same principle is working on y.


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


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




    The docs state, you can define a "modifier" function for almost any property 

    It would suprise me if scale isn't one of them. 


    And how do I know which are part and which arent?







    PS: Thank you for the demo @Sahil ;)

    • Like 1

    On 8.3.2018 at 6:32 AM, OSUblake said:

    ScrollMagic is good for one thing, and one thing only, triggering animations based on a scroll position. It is not ideal for anything that involves animating scroll behavior because then it would be working against its own logic.


    On 8.3.2018 at 7:13 PM, OSUblake said:

    The only problem is that you really can't use ScrollMagic because it will use the incorrect scroll value. That's why I was saying ScrollMagic isn't good for animating scroll behavior. It reads the current scroll value much like the ScrollToPlugin's autoKill feature detects scrolling.


    Sorry, I don't understand what you're trying to say here. By "triggering animations based on scroll position" you mean .play() and .reverse() at one specific scroll position. 


    And by "animating scroll behavior" you mean faking the overscroll effect, for instance, and NOT tweening a timelines progress over scroll position A to scroll position B?


    Aaaand I don't see why ScrollMagic would work against it's own logic. I don't animate the element that is specified as the "triggerElement" –

  21. The tween I want to "responsivize" / react to resize is part of a big timeline with labels I tween to etc. pp.


    Wouldn't invalidating completely reset the tl? I need the progress to stay at label xy or maybe even keep playing while resizing? 


    And it is more of a general question when these function-based values update. Because if they don't I don't see the huge advantage here.