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. Insane how quick you guys are. Thank you very much.


    Would you say it's generally better to store the Tweens in variables to keep track of them?

    I thought a Tween deletes itself anyway after finishing (without repeat etc.)


    Now I'm curious; Blake: how would you approach the situation when there was an mouseover animation aswell? 

  2. I just can't come up with a way to cancel the tween and / or make it back to default onComplete. (clearProps didn't help..)


    The codepen ist just a simplified example. I will have a more complex animation on mouse out. 

    Goal is: canceling the mouseOut tween when the mouse enters before the tween has finished.


    I'm eager to see how the elders do it.


    The pen should say it all ...





    PS: I bet Blake will be the fastest to answer. :>

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

  3. I'm lazy; 

    I don't want to write and fiddle out nice easings for baby tasks.


    Does anybody know a single file, that unites the heroes of all animations, to call upon more easily?

    My target is to quickly draw attention to an element and convey meaning in its animation; may it be to communicate an error, enforce to click, tap the shoulder cuz success.


    Usually these animations get back to the default state at the end of the tween.


    I imagine something like:

    GBounce(".elem"); // dont tweak anything at all!
    GWiggle(".elem", 2); // if you want some timing!
    GSpinningJesus(".elem", 3, Power3.easeInOut); // ease yourself if you don't trust the heroes.. Pff.

    I hope such a library with usual suspects exists :)

  4. In an ideal world, what you should really do is to check your code and where things are being initialised and how long they take. Then, you look into spreading the initialisations along the life of your app. Making use of idle moments to load/initiate secondary elements.



    How do you do that?

    I still debug with console.log() :x – Never took the time to look into the timeline thing or the step-by-step debugging. Any prominent tutorials you can recommend on this? (Of course I will google myself, but if you guys already know one famous article on the level of CSS-Tricks' Flexbox CheatSheet, tell me :D)

  5. Uff, I assumed it's gonna be tricky; but that many gotchas, eyeyey.


    But since I am tweening the generic object and build the string myself I haven't had any problems.

    So far I didn't need the ColorPropsPlugin aswell. TweenMax package seems strong enough with colors.



    Thanks guys!




    PS: I still didn't fully internalize how to play around with playing / pausing timelines or when best to create. Not a question for this thread, but maybe you have some quick links on this matter. Is it better to create a timeline early on, pause it on creation and then play it when needed or just create when needed? If you create it early you get maybe unwanted sets of .from() – 

  6. It's crazy. This method is so insanely powerful! Now that we generate the string by ourselves we can use hex or even string colors again, because it now is a simple color tween which GSAP handles super duper well!


    I kinda see and maybe softly understand why you reverse() at the end of the timeline. 

    But just to be sure: Could you explain why you used resverse() there and why exaclty .reversed(), which is just a setter / getter, also acts as a .play()? Or has the timeline never stopped playing?

  7. I used the same values for the circle; only difference is I didn't provide a radius for the circle.

    You can see the working example in the initial codepen, when you use the commented lines.

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


    Maybe we find a lil bug here? circle working and ellipse not? What do the other Elders say?


    What do you say to my BONUS-request? :)

  8. Yes I remember this post. But..


    Hmpf; .. but why is the circle example working without converting the colors (in the tween) to RGB-functions? The browser also reports rgb-values when using circle.


    Quickhitter: How would you convert hex-colors to rgb-colors with JS? Can GSAP do it?



    here's a special one: How would you realize tweening lets say the width value quicker / different than the y value? I think something similar to your circle-drawing with canvas. Is it possible to tween different variables and then update these variables with an overlaying time-tween? 

  9. Thank you very much for this detailed explanation!


    I think it I'm too late for this project, though :D


    Still, this is a very interesting topic and seems to be a huge weakness of mine.



    Are there famous topics regarding this subject in the forums already? Or do you know any other "best practices in javascript animation architecture with GSAP"? 

  10. It's still not working... and I don't understand why!


    Like you explained the two gradients are formatted exactly the same an dI'm only tweening the ellipses width and y value here.


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



    it seems ellipse is causing the problems here. None of your examples featured ellipse.

    I got my pen to work using circle, which unfortunately is not an option for me. 

  11. It is activated one time by a swipe or by pressing arrow up / down. Not dynamically by dragging as far as one can.

    All I'm looking for is a correct CustomEasing


    So far I have this easing and am not quite satisfied

    ease: CustomEase.create("custom", "M0,0,C0.01,0.592,0.272,1,0.5,1,0.5,0.616,0.632,0.012,1,0")

    (updated CodePen aswell)




  12. The forest of information regarding this is hard to travel through. 

    What I'm trying to do probably won't be possible. So I hope to get some channeled and compressed insights about animating gradients and the backgrounds.


    I basically want to create a somewhat "sunrise-experience" and therefore need to go ..

    // from here
    radial-gradient(ellipse at bottom, #ffed00 21%, #ffe808 42%, #ffdb1d 68%, #ffce32 100%); // 4 stops
    // to here
    radial-gradient(ellipse 200% 100% at center 73%, #FFED00 0%, #FFED00 1%, #36a9e1 40%, #003a63 100%); // 3 stops + 1 "faked stop"


    But so far all I got was flashes after the desired duration, instead of an animation. (even with the exact same ellipsis and stops no animating results)


    Important: animating the middle point of the radial-gradient would be really great; so I wouldn't have to fiddle with absolutely positioned height: 200% pseudo elements. Woooh!



    So what are GSAP capabilities with radial-gradients? Is the ColorPropsPlugin the answer to my prayers?

    Thank you, dear Elders!






    BONUS: Any ideas how to animate from a linear- to a radial-gradient?

    A workaround would be a suuuuper wide radial-gradient animating narrower. Would that be possible?

    See the Pen YZLXYE by ka...ouis (@ka...ouis) on CodePen

  13. Hi guys,


    you all know the overscroll-rubberband-style effect of Safari, when you try to scroll over the pages boundaries. I want to imitate that with a simple Tween.

    But I can't figure out the correct easing, so it feels exactly like it.


    Hope the easing experts can replicate a correct easing.








    PS: I'll catch up with the rest of the forum soon; I first needed vacation from this project :D

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

  14. This FOUC-prevention definitely needs to only happen if JS is actually available. 

    Call me conservative or paranoia; but blocking visibility doesn't feel right. On my next project I wanted to dig deep into perceived performance, lazy loading techniques, skeleton wireframes etc.; My memory says relying on JS for a first paint is evil! :D

  15. Wooooh, exactly this effect, not triggered with a second click, but exactly when the screen is filled, or maybe a little bit earlier. But that shouldn't be a problem, I guess. I will look into this–


    This advanced javascript mixed with canvas (never used before) mixed with GSAP (still not second nature to me) is really challanging.


    I figured out the this. thing inside the drawRipple() myself, but have never seen the bind function before. I will need to look into this a bit more.

  16. Thanks for this insight.


    I understand that GSAP has no idea about the CSS percentage. (which is a bummer for my problem 2)

    As seen in this pen (

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

    ), like you suggested animating to x: 0 and then back to xPercent: 114 works.

    Nice revelation for me, that x isn't relative to wherever GSAP begins, but x recognizes and takes the css translate into account.

    But why doesn't xPercent do a thing?


    Do as much with GSAP as possible

    I am always sceptic setting things with javascript. Repaints / flashes need to be reduced to a minimum and javascript gets executed later, leaving a window where the output might not be set to 114% when done with JS alone, right?


    As for Problem 2 it almost hurts that you don't trust me to make the bridge from a "+" to a "-" ;)

    I don't like this solution, because you would have to change 2 values; in a long and a complex timeline things get messy and the second value is easy to forget. That's why I hoped for something like "just reset it like x would never have been set, but animate back to it" – 


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

    the flash after the x: 200px tween reveals that GSAP does know where it all started. 



    I'm looking for some kind of animated clearProps in a separate tween :D




    PS: Finding out about those things is not easy; I don't want to flood the forum with these questions, but I can't find the resources where things like this are explained. Is this just my missing google-skill or does no such thing exist?

  17. Hi folks,


    I simply do not understand the relationship between GSAPs x-property and CSSs translate().

    It appears to me that x just doesn't care what translate is doing; like GSAP looks where the element is on first x:-call, and from then on on calculates its matrices. 


    Problem 1:

    Seen in this CodePen I prepare an element to be off the viewport with CSS translate(114%) and want to animate it back to translate(0) with GSAP without hardcoding


    Problem 2:

    is there something similar to

    tl.to(".el", 1, { x: "+=20" });
    tl.to(".el", 1, { x: "reset what GSAP has done, but animate it" })



    Dear Elders, please strike my forhead with enough light to fully comprehend this matter.





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

  18. The Chris comment was 100% irony– That's me lightening the mood after I don't provide a CodePen example (repeatedly).


    Uff, didn't think about the "outside" term :D


    By "outside" I mean, that whenever needed another function can access the timeline object.


    Another problem I'm facing is resetting.

    I have a timeline which sets a class via .set(".el", { className: "+= someclass" });

    When I reset this timeline via .pause().seek(0) the class `someclass` is still assigned to the element.

    I am really really confused right now.. 



    What I've done now to tackle my other issues:

    I made the class `Panel`, which gets a anonymous function containing the initializtation timeline and returns the timeline object. 

    Panel = function( param ) {
    	var initFunction = param;
    	var initTl;
    	var initPlayed = false;
    	this.init = function() {
    		if (initPlayed) { d("init anim already played"); return; }
    		initTl = initFunction();
    		initPlayed = true;
    	this.reset = function() {
    		initTl.pause(0, true).seek(0);

    But at first I planned to do it as followed, in order to have the timeline already calculated

    Panel = function ( param ) {
        var initTl = param().pause();
    // and then do
    anim = {};
    anim["panel-product"] = new Panel(function() {
        var tl = new TimelineMax();
        return tl;

    But then I realized that all the .set()s and .from()s etc. get already applied (of course they do..) when Panel() calls the timelinefunction and pauses the timeline, which I can't have, since people may use the arrow keys for hard-cut-transitions. 



    I am muddling up so many things in my head right now O.O

  19. Hello guys,

    I need some ideas on a good architecture for a panel-based onepager.


    I have 13 full width & height panels. 

    Each panel has an "initialization" timeline (which also handles outro animations of the previous one, if needed)

    Each panel can have multiple "agile" timelines (repeat: -1) to make the panels come alive (flying birds, blinking eyes, slightly morphing river or smoke, with lots of randomness)


    An initialization animation must only happen once per panel. Meaning: When you traverse back to the top and then go down again, there should not be initialization animations. Only hard cuts. Reason: user traverses faster.


    When one panel is visible the agile animations of all others should pause (not reset). 

    The agile animations should should always play on, no matter if this is "the second view of this panel".



    For switching panels I have a function called `activatePanel()` which gets the index of the desired `section.panel`. 

    activatePanel() then looks if an function `anim[ <ID OF section.panel:eq> ]` exists and then executes it.



    The faced challanges I can't find a convenient solution for are:

    1. storing the timelines in a clever way so there are available to use .pause(), .seek() etc. "from the outside"

    2. (kinda resulting out of issue 1.) pausing all the agile animation timelines of the inactive panels



    I know you have a deal with Chris Coyier; but this problem is just based on the whole project. 

    So I kindly ask you to visit http://beta.richmodis.de/  (navigate with swiping to get animations or with arrow keys up and down to skip animations)


    I understand if you can't / won't / don't want to look over the whole project.

    In that case I'd appreciate some tips on architecture for a project structured like mine.




    Thanks for your help and understanding in advance,

    I am overworked :o







    I also need to keep track that `activatePanel()` gets blocked until a running init animation is finished. I got most of these things done somehow, but it feels very klonky, is definitely not well-aranged etc.–