kreativzirkel last won the day on May 30 2017

kreativzirkel had the most liked content!


  • Content count

  • Joined

  • Last visited

  • Days Won


kreativzirkel last won the day on May 30 2017

kreativzirkel had the most liked content!

Community Reputation

42 Newbie

About kreativzirkel

  • Rank
    GSAP broke my jaw

Contact Methods

Profile Information

  • Gender
    Not Telling
  • Location

Recent Profile Visitors

964 profile views
  1. kreativzirkel

    GUI for GreenSock Unfortunately this tool produces CSS animations (eeewh, I know!), but looks promising in terms of user experience. Since this thread aged 6 more months I'd like to ask the Elders again, if there are any plans or considerations to either collaborating with existing GUI editors to produce GSAP timelines or maybe even make your very own one?
  2. kreativzirkel

    Graphical User Interface (GUI) for SVG Animations?

    Seriously, I'm not one of these lazy spammers! I used the forum search with both "GUI" and "Graphical User Interface" and got 0 results!
  3. Heyho guys, long time no read.. A seemingly never-ending hell-spiral of React, ES6, JSX, Webpack, and Wordpress new Gutenberg-editor are driving me insane... hate have neither time nor mental capacity to contribute here Anyways! My designers came up with "this mega crazy awesome new tool, you just have to check out, yoh!" It's a GUI producing svg animations. Looks quite promising; but unfortunately spits out filthy css animations (maybe they are good for css animations, but.. you know.. still css :D) It got me thinking: – Is there a GUI which produces GSAP timelines? – (since I'm quite sure there isn't) Why isn't there? – Have you guys considered making your own? – Or maybe collaborate with existing tools like svgator? René
  4. kreativzirkel

    Off-Topic: super weird Safari rendering bug

    Thank you very much!
  5. kreativzirkel

    Accessing repeat counter

    I am also interested in accessing a repeat-counter. Surely GSAP has to keep track and using one under the hood, right? My use case: var tween = TweenMax({}, 1, { repeat: 10 }) .eventCallback("onRepeat", function() { // how can I access the repeat count of the tween? var repeatCount = ??? if (repeatCount < 5) // do this else // do that inBothCases("doThis"); });
  6. kreativzirkel

    Off-Topic: super weird Safari rendering bug

    Sorry if I wasn't clear enough: TweenLite.ticker.fps(15) would set the FPS of ALL tweens to 15, right? But I wanna try out to set it lower solely on these 3 animations. Or could I do something like this: // my normal animations var tween =".foo", ...) var tl = new TimelineMax() ... // set fps only for the next animations TweenMax.ticker.fps(15) // or does this function affect the tweens above aswell? var slowerTl = new TimelineMax()... var anotherSlowTl = new TimleineMax() // how to reset it? TweenMax.ticker.fps(60); // Other normal animations var tween =".bar", ...) var tl = new TimelineMax() ... I better don't go that route if fps affects ALL my tweens
  7. kreativzirkel

    Off-Topic: super weird Safari rendering bug

    I suppose you can't set ticker.fps() only for a few tweens, and let the rest play it the normal FPS?
  8. kreativzirkel

    Off-Topic: super weird Safari rendering bug

    Thank you very much, Jack! In your statement you are mainly talking about the 3 hefty chpater intros with the mockups, I suppose? 1) Could performance alone cause the glitchy problem, which is still present in some places, the second chapter intro with the iPhone mockup, for instance? 2) Would it be possible to tell GSAP to lower the ticks for these three animations? Less fps would be better than this mess.. 3) How comes Chrome and Firefox make it work so smoothly? Are there any known "Don't Do"s with animations in Safari? Maybe some css property which is known to f*** things up? 4) How would force3D effect performance in this situation? So far the 3 mockups get matrix() and not matrix3d()
  9. kreativzirkel

    Off-Topic: super weird Safari rendering bug

    I found something! * { -webkit-backface-visibility: hidden; } seems to eliminate atleast most glitches, but not all? The page still lags horrendously. Again, only the /airberlin page is affected... Can you confirm this on the updated version? I've tested multiple apple devices, and all have still the glitches to some degree...
  10. kreativzirkel

    Off-Topic: super weird Safari rendering bug

    Thanks for your help! I do $(document).ready() before the whole thing starts. And the glitch seems to occur with normal text and background colors aswell. The setup for all pages is the same, so if you would be right about that, I guess the other pages would have the same issue, which they don't :'(
  11. kreativzirkel

    Truly responsive Animations

    I don't expect one tween it to adapt like magic. Defining multiple animations per breakpoint is exactly what I want, but all the code surrounding that is really expensive. That's why I am looking for an API. But I understand that you guys have other things with higher priority at the time. That being said, I'd like to hear more about that and how others deal with these problems. What I've come up with to tackle this is tweening css vars like `--progress` and let the css handle different layouts reacting to this `var(--progress)` But this approach gets you only so far.
  12. kreativzirkel

    Off-Topic: super weird Safari rendering bug

    Sorry to bother you with this. If you find this inappropriate, please forgive me and just delete the topic. I can't imagine the issue is related to GSAP.. but I can't imagine what else could cause this weird bug. What am I talking about? Please visit in Safari – You'll see what I mean... Issue occurs on the "work page"; the content isn't fully rendered... it looks super glitchy. When you highlight the page by marking text or pressing CMD+A everything in the viewport gets rendert correctly immediately. Scroll a bit further and the same issue applies to the rest. Does anyone have ever faced such an issue? I'm really grasping for straws here, guys: I'd appreciate the slightest idea on what could cause this. Thank you very much, René
  13. kreativzirkel

    Prevent GSAP from transforming my transforms into matrix()

    Weird; I totally read your post as "guys, IF you would make animations responsive, you had to do so much more than this and that, and that's not worth it, since people just don't resize their browsers" – Glad I misunderstood it Anyway; Pandora's Box has been opened, so let's continue this in separate thread.
  14. kreativzirkel

    Truly responsive Animations

    This discussion started in another thread and definitely deserves one for itself; you better read the last 4-5 posts in this thread: TL;DR: Complex animations with attention to detail would basically need to be recalculated completely, when the browser gets resized. Not only does the layout jump and px values must be recalculated, but as the distances on the screen change, durations, timings, offsets need to change aswell in order to create a similar affect than before. Certain html-elements may drop entirely on new breakpoints and therefore don't need to be tweened, leaving a timing hole in the chain. This is not an easy task and complicates things quite a lot (for me atleast–) Blake made a pen with a possible setup for recalculations on resize: Doing this work for 50+ animations screams "have fun maintaining this code" to me. A few questions: 1) Could you walk us briefly through the code, Blake? I can't quite follow the forEach loop through the media queries, and especially not the code in "onMediaChange()" 2) I treat most of my modules individually, meaning each module gets it's own breakpoints for what the situation demands. Basically "Code the first layout-step, resize the browser and look how long this works out nicely" – if that means we have 3 media-queries in the range of 1280 down to 1050, so be it. Is there any way GSAP / JS in general could react to the breakpoints declared in CSS or do I simply have to hardcode those same breakpoints in JS? You know what I'm about to ask, don'tya? :F 3) Is there any way to stuff the things Blake did there into a neat lil box, and let the developer access it like this for instance: var responsiveTween = TweenMax.responsive({ "(max-width: 601px)":, "(max-width: 801px)":, "(max-width: 1024px) AND (min-aspect-ratio: 16/9)": TweenMax.staggerFromTo(...), "fallback": }) Okay, .. while writing the code I realized this is not a pretty solution. But you see what I'm aiming at, right? A solution that doesn't require you to write helper functions yourself and fits nicely in the GSAP workflow / ecosystem. Let's get crazy for a moment: How about debouncing the resize event and then animate between these the two breakpoints to make a seamless transformation? I feel this would be insanely complicated and only work flawlessly in very few situations, so maybe forget about that ^^
  15. Thanks for this detailed description. Makes a lot of sense; slightly ashamed that I didn't realize this myself. Totally forgot about the possibility to use onUpdate in the vars object. Prefer .eventCallback by far– But now I'm glad this way exists Hell, I love GSAP.