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

    18 months later.


    I totally agree the Elders shoudln't "waste their time" with Dash docset.

    Maybe a fellow gsap-user is willing to do this? It appears Dash welcomes user-contributed docsets.



    Dippin' ma toe into them waters, I quickly realized I'm not capable of doing it. 


    Maayyyybe? :>

  2. Old topic, but I thought I'd share my lil' enhancement, which helps me quite a lot!



    Question: Whats the best way to find out if clearProps is already set? I cant get it to work.

    `targets[f].vars.css.clearProps produces an error`
    `TypeError: undefined is not an object (evaluating 'n[e].vars.css.clearProps')`


    // EDIT!
    // Don't copy yet!
    // I still need to find out how to check if clearProps is already set
    TimelineMax.prototype.clearProps = function( props, overwrite ) {
    	// which props? (default is "all")
    	var props = typeof props !== "undefined" ? props : "all";
    	// overwrite existing clearProps? (default: true)
    	var overwrite = typeof overwrite !== "undefined" ? overwrite : true;
    	var targets = this.getChildren();
    	if (targets.length > 0) {
    		// only onComplete clearProps
    		this.eventCallback("onComplete", function() {
    			for (var f = 0; f < targets.length; f++) {
                  	// targets[f].vars.css.clearProps produces an error
                  	// TypeError: undefined is not an object (evaluating 'n[e].vars.css.clearProps')
    				if (targets[f]....... CLEARPROPS??? ......) continue;
    				TweenMax.set(targets[f].target, { clearProps: props });
    	return this;


    Used like this:

    var tl = new TimelineMax()
    		.to(".top-bar", 1, { x: 50 })
    		.to(".bottom-bar", 1, { x: 100 })
    		.from(".bam", 1, { scale: 2009239 })
    		.staggerTo(".things", 15, { rotation: "+=2" })
    		.set(".bla", { display: "none" })
    		// ...
    		// too lazy to write ,  clearProps: "all" aaaall the time?




    var tl = new TimelineMax()
    		.to(".top-bar", 1, { opacity: 0, x: 50 })
    		.to(".bottom-bar", 1, { opacity: 0, x: 100 })
    		.from(".bam", 1, { opacity: 0, x: 200, scale: 2009239, clearProps: "x" }) // only need x to clear 
    		.clearProps("opacity", false) // only clear opacity and don't overwrite existing clearProps!  


  3. Interesting that GSAP looks at a at object-properties that are functions to find out if it's a setter / getter;

    That opens up a new huge window for me– I suggest promote this behavior a bit more on the main-page etc. (or did I just miss this? Can't remember explicit mentioning in the Docs or anywhere else)

  4. Damn, you guys are too fast..

    I was just editing / updating my initial post.


    I found out about that myself by desperate trial and error..

    but I don't understand why this magic works.


    "anyTween.timeScale" in the console returns source code of a function. 

    Inspecting a tween in console reveals the same. 


    So GSAP tweening it's own getter/setter is just some magic exception for GSAPs own functions? 

    Or can this be applied to other getter/setter aswell?
    I figured GSAP only tweens object properties (not functions). 

    • Like 1
  5. I have a constant rotation, repeat: -1

    I want to make the rotation faster, so I tween the ._timeScale.


    Please shed some light on these (atleast to me) unexpected behaviours

    1) Tweening _timeScale results in a playback?!

    2) What is ._timeScale, anyway?


    Tweening rotate.timeScale() only works with "generic object+ onUpdate"-approach. 

    Tweening _timeScale allows the convenience to tween the tween itself, right



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

  6. Thanks @Carl! Very interesting; clipped this snippet right into Evernote 8)


    I looked at the examples already @mikel, thanks :)

    Or do you want to point my nose on something particular?


    (grrr– how do you guys make user names subtly clickable in the green style? :D)

  7. I use barba.js and only change loaded to true when the respective promise gets fulfilled. First time using promises; strange at first, but I guess I'll get the hang of it and start to see the advantages.

    • Like 2
  8. Naaaah, that feels like an overkill just to save myself from remembering to update a variable :D 

    What do you think about the loop inside a timeline approach? Are there any caveats I may run into that I don't see yet?

    • Like 1
  9. And how do I tell .call() that the scope is the current timeline without repeating the timeline var-name again? That's what I'm trying to avoid. I know myself; at some point I rename this timeline and surely forget about the references inside .call() etc. ;)


    The following doesn't work aswell :F

    (grr, this damn thing with these thises ..)


    .call(funciton() {
    	this.play("loop"); // this doesn't work!
    }, [], this)


  10. Found a convenient solution myself. Eager to know what you think about it (solution 4 in the pen)


    loaded = false;
    	.from("#box", 1, { x: -50, opacity: 0 })
    	.to("#box", 1, { rotation: 360 })
    	.call(function() {
    		if (!loaded) tl.play("loop")
    	.to("#box", 1, { x: 50, opacity: 0 })


    Now I can resolve the promise easily when this timeline triggers it's onComplete. Nice!


    Another question still, (we don't want this thread to be for nothing, want we?):

    tl.play("loop") inside the call; why isn't this.play("loop") working? 

    What does "this" refer to in a .call() if not the timeline itself?!

    • Like 2
  11. (missed you guys :o – some personal issues prevent me from snooping around here .. but I'll be back!)


    Requirement #1: 

    The load-animation may never end right in the middle. Infinite Repeats (repeat: -1) doesn't work for me; So I go the onComplete-way, which checks if the loader needs to go another round or not; if yes, then: tween.play(0). Nice!


    Requirement #2: 

    I need a smooth entry / build up of the looper elements, and a sweet exit. 

    I now wonder if this is possible with a single timeline.


    The pen should make clear what I'm trying to do.

    Since the answer to "loopable middle of a timeline" will highly likely be "No!", follow up question:

    How do you guys tackle this? I'm always looking for the most robust and compressed way. PJAX navigation is crazy enough on it's own for me. 




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

  12. Do you guys have a function in the forums where people can add their vote or how do you imagine other people requesting the feature?



    I have another, mind boggling, question for you guys, that I really struggle with in general, when it comes to GSAP.

    I don't even know how to put it best in order for you to understand, because I think once you've seen the Matrix (not literally :D) this is a very trivial question.


    When you .add() functions to a timeline that return a tween or timeline, things in this function get done immediately, which in my case is not what I want.

    Still, I need to add the function this way, because the timing of the rest of the timeline should take the duration of this new included timeline into account. And I don't know another way to do this than use .add()


    So how would you guys approach adding multiple write-text-sequences in the same container?


    PS: Look at the write-function, I added some sweet regExp to add pauses bookcode style 8)

    Hello! [pause=.5] This is a nice Hat you have there!


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


  13. Damn, gotta chew on this a while longer;

    pretty advanced JS for me.


    Do I understand correctly, that this jumping 20 forward, 10 back, only works with conditions smaller as / larger as (< / >)?


    So a condition "when x is exactly 90" will not work with this function, but "when x is larger than 90" effectively gives the time when x is exactly 90? 


    This solution is way better than mine.

    Only drawback is that I now have to control the Tweens / Timelines / whatever I do with the xOver90time– My solution was tied to the playback of main timeline and automatically reacts to .pause(), .timeScale etc. by nature. 


    Do you see any way to tie your method to the main timeline?

  14. I have a timeline.

    I want to set something at some point.

    I want the .set() to be a part of the timeline so on reverse or new playback the status goes back to default.


    This works, when I put a .set() on it's own inside the timeline. But when I want to .add() it, the .set() gets executed right away.

    When I .add() a .to(), it doesn't get executed right away. 


    Hopefully you got what I mean; the CodePen should clear it up.


    Why doesn't the yellow box behave like the green one?


    [EDIT: I just don't get it; when you execute the yellow box again after the first go through, it behaves like green.. I need yellow to always do it!]


    Reason why I don't use .set() on the main timeline in the first place:

    I have a function that dynamically calculates the values of the .set() and then returns the tween

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

  15. No joke, just read Craigs story for the first time.

    Funny how we describe so many things almost identically. 

    Funny how I now feel stupid now effectively repeating what he already said. :[ 

    I didn't crib, Mommy! 

    • Like 1
  16. I would tell my pre-GSAP, .. wait.. I will, when you guys implement timetraveling in GSAP 3000!


    I will tell him:

    You stupid prick! Stop wasting your time on weighing transitions over @keyframes, you already know this will never satisfy you, no matter how many tutorials of awesome css-animation systems you read; auto-facebook-block everyone that gives you Edge Animate code; just ignore that it feels like tween is word you need to study to understand and watch this 90 second video.


    But seriously, "marketing wise" you guys definitely went in the right direction with the recent page updates.


    What I personally would focus the most on:



    Bust a 10 second live code example in everyones faces. Spreading the part of the 90second video, that just codes and plays with the timeline. The good readability and therefore maintainability of TimelineMax is the most impressive and therefore biggest reason to jump into the pool. I see why the 90sec vid has to do "all browsers!" "no bugs!" "awesome sh**!"; but honestly: when I watch it I still think in the back of my head "yeah okay, everybody promises that, come to the point, lady" – 


    You integrate super impressive examples everywhere in the page. They intimidated me. They absolutely don't feel like "this is super easy", and well, these examples just aren't easy. They are relatively easy compared to other methods; still not easy, though. But it is possible to get there. The code of these animations is not a claustrophobic, complicated, sensitive, dark glowing web, that is super hard to unravel. It is more of a brick-by-brick situation. Not much backtracking/back and forth, mostly straight forward, linear, step by step; *out of expressions*.


    My suggestion would be to feature simplified code making these examples and tie them closer together; the page should more create a feeling of "Hoh? That's it? I could do this;" for newcomers. 

    After all, the way I see it, you don't sell results, you sell a uniquely powerful, intuitive and maintainable way of getting there.



    Second biggest strength of GSAP is this very forum, the community. I don't know how you guys did it, but getting an answer to a question, quite often a very urgent one, happens insanely quick on this platform. No matter how "dumb" or "trivial" the question seems, I have not experienced anything but very good will to help get the result I want. No bending of the intent to fit into a solution; no trolling or poison like "dude, again the force3D question? Use the search, for Jake's sake!" – There's a vibe of calm acceptance of different skill-levels and a each-one-teach-one mentality here. 

    On top of all that the answers are compact AND understandable, 90% on-dead-center solutions. Pure quality.


    I don't know how to communicate this to the outside world, but I'm assured if people would know that this is way different from an "usual forum experience"; that you get encouraged to ask your question and you will get hugged, padded and helped; that you can learn very quickly by just browsing and reading the threads; that you can teach even Blake a thing; than we have people streaming in like Web-Woodstock.


    "Join Web-Woodstock, get high on awesome sh**!"



    PS: "Uninitiated", I like 8) – How about Unkindled? Or Muggle!

    • Like 3
  17. There is this big, big tree.

    Uuuuh, that's high. I always wanted to climb it. Can I?

    First touch. The peeling is thick, and itchy, but warm and inspiring confidence.

    I lay my arms around it, starting to rub up.

    Hmm? Aaha– Okay– That's how– Nice! 

    It's working. That's all I wanted. No need to leave this robust stem.

    But wait. What's that? There's a branch! And another? I'm curious–

    The more I climb this tree –body pressed tight onto it– the fear of these little branches slowly fades. 

    I finally, gently step on one. Sometimes they crackle, but never break!

    My tight grip loosens up; Cheeks stop scratching as I lift my head–

    Oh boy! So many branches. And look how high I am!

    Wait what? There's a bird! And anoter one? 

    I start talking to the birds. More birds.

    I felt like a king just walking the branches.

    The birds taught me how to jump on them!

    And soon I'll fly. Soon.



    I have never experienced anything similar. 

    Such an easy entrance, .. well .. once you accept the word Tween as a thingy describing an animation ;)

    One can work with GSAP without knowing anything more but .to, .set,  and .from.

    Easy to learn, hard to master.

    You decide how far you go. 


    When you are part of this special breed of developers/designers, be careful!

    Because GSAP will suck you in, won't let loose and change the way you see and work the web.


    That's what I love most.

    Thank you guys for that.






    4 hour research until 1:30am in my freetime, and still burning so much inside that I had to write this.

    That's how awesome GSAP is.

    • Like 9

    13 minutes ago, OSUblake said:


    And yes, I would have to agree that there should be an option to have the whitespace wrapped in a div. I can definitely see how it could be useful.


    That's what I wanted to hear! :D

    Carl, Jack, let's do this! I'd like to contribute in any way I can and you guys see fit :>


    It's time for me to get productive instead of whining :D



    PS 2Blake:

    still curious what an object as target does ( .set({} ... )

  19. The jetpack-dude again.


    I tween the background layers from yPercent 0 to yPercent 100.

    At exactly yPercent 65 I need to change the dudes helmet to a space helmet.

    Reason I don't hardcode the offset: the duration and easing of the background-tween will depend on the user input. (How many clicks in 10 seconds) – Finding a formula to calculate when the background will hit 65 yPercent; naaah :D



    So far I'm doing it like this:


    background.eventCallback("onUpdate", function() {
    	if ($(".background")[0]._gsTransform.yPercent >= 65) helmet.frame(2);


    This solution works. But I don't know how this effects performance. Feels like an overkill.

    Plus: You guys spoiled me with the power of timelines; When the master timeline now begins from 0, I have to change back his helmet manually. It would be super cool, if this "when yPercent hits 65, do this"-thing could be part of the timeline. 


    	.fromTo(".background", 20, { yPercent: 0 }, { yPercent: 100, hook: {
    		yPercent: 65, 
    		call: function() { ... } 
    // or
    	.fromTo(".background", 20, { yPercent: 0 }, { yPercent: 100, hook: {
    		yPercent: 65, 
    		over: function() { ... },
    		under: function() { ... }
    // or
    	.fromTo(".background", 20, { yPercent: 0 }, { yPercent: 100 })
    	.hook(".background", yPercent, 65, function() {
      		// change his helmet
    // or as offset parameter?
    	.fromTo(".background", 20, { yPercent: 0 }, { yPercent: 100 })
    	.to(".something", 1, { background: "red" }, "yPercent==65") // bool, so it is not a label :X


    What do you think about a Hook-Plugin?

    And I wonder how you guys would tackle this with the current toolset. :) 

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

  20. As usual, your magic brings up questions in my head. :D 


    1. tl.set({ }, { } .. – what's this first object? 

    2. Why did you kick the offset variable? It would make the empty .set() obsolete.

    3. Or does the empty .set() bring benefits I don't know about?

    4. Why does forEach know about whiteSpace? Or: Why do the words know about whitespace? They don't know what comes after, do they? Would be great if you could explain this part of the code in detail.

    Edit: whiteSpace is just the index-count. The if is there to prevent a Pause before the first word, right?


    This works now :) Thanks for that.

    But, as always with me, I'm thinking of reducing this extra effort and wonder why SplitText doesn't support an option to include white-space in the split.chars array? 


    *Glimpsing to Carl and Jack, thinking: It's a plugin! Size cannot be such a heavy argument here 8)*

  21. Yeah, you are probably right; Canvas seems very interesting. 

    But this project came in (like always, I guess?) pretty last-minutie. Never used canvas before, nor have I stumbled upon it more than 10 times in my path as a developer. For this project it would have been way too risky for me; But you are right– on the next project, maybe one where the animation part isn't the core-experience, I will dive into it :)