Robert Wildling

Hi, dear GSAP community, I am learning my way through this and that, and next up is, what is called "state management". There are frameworks like Redux, martyjs, mobxjs etcetc. So far it seems to be a technology that is used for handling big amounts of shared data (and keeping them synchronized). Being totally new to this topic, it might be too early to ask a question here, but nevertheless I thought I'll give it a try: Can state managers also be used to handle "animation logic" in an application? Is it the "right" way to go or am I starting to think in a totally wrong way? So far, I haven't found any tutorials that deal with state management for "animation logic". The reason why I ask is this: I keep bumping into the situation, where a specific type of animation logic problem occurs. Namely, when navigating to different pages. Let's say there is a "home page", an "about", a "contact" and a "blog" page with respective menu buttons. When being on the "home " page, clicking "about" initiates an animation that handles the transition to the "about" page. But when I am on the "contact" page and click the "about" button there to get to the "about" page, a different kind of animation should handle the page transition (simply because things are different now: the top menu is narrowed down yet, the logo is probably smaller and hides a specific text section...). This is not so much a problem, when the visitor starts at the "home" page. But I am very confused, when it comes to handling a situation, where somebody directly enters the website at the "about" page. Or when somebody sends a link to the "blog" posts (or maybe even a specific blog entry) to a friend via email, who then clicks the link. How can I then handle my application's "animation state" - so-to-say (in lack of a better word). Any tips or hints are most appreciated!

@Carl Thanks for your response!!! Always very helpful to get the assistance from a pro! Meanwhile, I externalized DOM elements that are needed more than once, into another small object, and it turns out that this structure helps a lot with other, previously not seen situation. @OSUblake Thank you for your help! I am familiar with Angular and, since recently, VueJS. They are great, but they are there to handle business logic. What I try to find is a way to handle "animation" logic. What I constantly encounter is that, upon loading a website, the DOM should be (not must) analysed first for all those elements that need to be handled by GSAP, in case I want to build consistent animation-rich UI. (Because, from what I learned, it is a speed optimisation, when I save the result of a "document.querySelection()" to a variable, so it can be accessed later in a faster manner, because the DOM doesn't need to be parsed again. It seems to be a bit like a "cache"... is that a very wrong understanding?). Another thing I keep encountering is, that, depending on what has to be done in such an "app", there will always be some functions that exist in an anonymous name space, like this: (function(){...})();, which is a bit troublesome ( at least in my mind), because they need to call their own document.querySelector(), even though it might have already be done at some other place. Therefore, I thought it might be a good idea to build an object, which holds all those DOM elements necessary for GSAP in its own global namespace, so each an every function throughout the application has/can access it. Adding all the parameters that are needed for an animation only seemed to be a logical next step. Such an object also helps to manage some other things like booleans, e.g. "isActive: true", a value that can be accessed from anywhere. I'd like to see it as a kind of $root object, but only for animation-related things. Also, when it comes to responsiveness, some things like an object's "multiple" parameters (e.g. "topic: { params: { mobile: { [...] }, tablet: { [...] }, desktop: { [...] }}}) can be (re)assigned with an "assignParamsOnBreakpoint" or "reassignOnBreakpointChange" (for those, who like to resize the browser window) function, which I do with Harvey.js and turns out to work very nicely. Of course, I have my doubts, if that is the proper way, so I wonder, if there is any information available on how to manage large animation projects. Just yesterday, I tried a new approach with data-attributes: all those elements that eventually will have a role within GSAP, get an attribute assigned like this: data-gsap="topic-button", data-gsap="logo" data-gsap-params="{fadeIn: {}, fadeOut: {}}". At the moment I like this approach, since it allows me to define a "params" object on a DOM element, which I cannot do as easily with e.g. OOCSS: "gsap gsap-logo gsap-logo--fade-in". 'gsap-logo--fade-in' is a class that, at some point, must be removed/replaced (unless, in this case, GSAP's reverse() function is used...). With data-attributes, i just yould assign 2 param attr: "data-gsap--fade-in="{ [...] }" and "data-gsap--fade-out="{ [...] }". Some more thoughts: The consistent naming scheme (data-gsap) would probably help a lot to write a simple function that assigns all the found information to a SETTINGS object. Just adding data-gsap attributes would automatically "make something work" without adding extra JS code... (well, sort of at least... not at this point...) That said, I – currently – like my SETTINGS object, since it, "by chance", more or less, turns out to be useful within other scenarios, like assigning eventListeners to clickable objects, which is not GSAP-related thingy by itself, but leads to call a function that initiates a TweenMax or a TimelineMax. Is that all very confusing, what I just tried to explain and is going on in my mind? Or totally the wrong way? Or is it in general a usable solution, but could need some optimisation? Any opinions would be greatly appreciated! Thanks a lot!

Thank you, Jonathan and Carl, for your help! Could you nevertheless help me understanding how a self reference works within a object? The "onCompleteParams" also need a config that is saved as "initialPosition: {[..some params...]}" within that object, and I would need that config in the onComplete function, as well. ``` SETTINGS = { intro { topics. { singer: { btnTxt: { el: '.c-topic--singer', // <-- thanks for that hint!!! params: { initialPositon: { ... }, activePosition: { ... onComplete: resetTxt, onCompleteParams: [ SETTINGS.intro.topics.singer.btn.params.initialPosition // <-- *1) ] } }, }, },} ``` *1) Here, I would like to re-assign the initialPosition params... SETTINGS is build up on page call, there is no separate function like buildSetting, which assigns values to all the keys. But I have a guts feeling that this needs to be done... Or do you know of any way to refer to the value of another key within the object? Thanks a lot!

This might not really be a GSAP specific problem, but more a Javascript related one, nevertheless I would like to ask here for help, it that is ok. (The CodePen unfortunately throughs an error, and I do not see the reason why...) I like to save DOM elements to a SETTINGS object like this: ``` var SETTINGS = SETTINGS = { intro: { topics: { singer: { btn: { el: document.querySelector('.c-topic--singer'), params: { right: "5%", onComplete: resetTxt, onCompleteParams: [ SETTINGS.intro.topics.singer.btn.el ] }, }, }, }, }, } ``` The TweenMax then looks like this: ``` TweenMax.to( SETTINGS.intro.topics.singer.btn.el, 2, SETTINGS.intro.topics.singer.btn.params ); ``` The idea is, that the animated element (a button) is set to another position as soon as it is finished. Therefore I'd like to set a self reference in the SETTINGS object in order not to call document.querySelector twice. But that doesn't work as I hoped, and reading up on google I find posts that use a function for callback parameters, but in cases where there is not array needed. So I tried something like this: ``` onCompleteParams: function() { var arr = push(this.intro.topics.singer.btnTxt.el); return arr; } ``` But no success... I am not a JS pro by any means, so I am pretty sure, there is something fundamental I do not grasp about JS objects and self referencing. Maybe somebody of you finds a moment to explain, how I could use such a self reference within an array? And maybe also, if it is in general a good idea to build up such a SETTINGS object, anyway? Or would there be better approaches for SPAs? Thanks in advance! Best, Robert

Thank you so much for pointing that out! Very helpful! I did another pen with some "counter clockwise" animation: the parent div contains a child div with an image. That image is skewed counter clockwise in order to appear "correct" all the time. That also means that during the "unskewing" animation, the image is "unskewed" counter-clockwise. During that animation, the image disappears in Chrome, but not in FF. (And, actually, the codepen looks even better that in "real life", where the image is really totally hidden during animation; on codepen it is at least sometimes visible...) Any idea what I am doing wrong here? Adapted CodePen: https://codepen.io/rowild/pen/bgbaeV

Hi and prosit 2017! I was wondering why GSAP produces different skew-results than CSS? (See CodePen: http://codepen.io/rowild/pen/bgbaeV) I'd like to think to understand the mathematical implementations underneath it, which, in my opinion, would be keeping the sides the same length. But CSS does not adhere to that rule when told to draw 100vh. Is there a way to achieve the similar result with GSAP? Thanks!

Thank you, Dipscom, for your response! I will work through it. For now I was just wondering, what you mean by "only Firefox"... caniuse shows me this: http://caniuse.com/#search=filter And actually, the drop-shadow on the SG does work, it just is not animated (yet)... I am also confused about setting anything on the SVG. I thought using CSS Filters doesn't require any settings on the SVG anymore...

Hi there, (I open a new ticket. The original question was here: http://greensock.com/forums/topic/15056-help-getting-started-creating-a-jalousie-effect/ but that topic is already answered and my question probably won't be seen anymore.) The CodePen shows some variation of a jalousie effect, that Shaun posted as an example in the forum post mentioned above. Playing around with that (mostly adapting it to vw and vh), it happened at one point that there was a "running shadow" introduced. It happens very subtle after the second animation is coming to its end: the slices are fading out, and just a tiny little bit later the slice flashes up for a moment again in a very, very bight grey. Hope you can see that. I was wondering, why this "running shadow" effect is happening? Thanks for any hints!

Any ideas as to why there is that "walking shadow"?

After Reading through some topics in the forum and on codepen, I try to do a "filter:drop-shadow(...)" animation on a CSS filter that is supposed to take effect on the SVG, using the onupdate() and TweenMax.set() methods. Unfortunately unsuccessfully so far. The included codepen shows the basic animation: 1. first an animation over opacity and scale, then 2. the "onUpdate -> set" animation, which is, where the magic should happen. There are 2 debug helper functions that throw out some values to the console. And they seem to proof that the values for the shadow distance and the color opacity ( in var logoFilterAmount) are calculated correctly over the course of the animation, but the final result (using getComputedStyle to check) shows strange numbers that I can't explain to myself how they were created. Any insight here would be most welcome! Thank you!

@Jonathan Thank you for your tip! I updated the pen, and it works. Could you please help me understand two more things: 1. Why is this particular solution not solvable with TweenMax, but only TimelineMax (at it seems to me, anyway)? 2. There is a "walking shadow" before and after the animation of the slices. No matter whether opacity or autoalpha is used. I cannot explain myself where this could come from (the div-slice is st to transparent...)... Thank you!

(Since I expanded on your example, I take the liberty, not to open a new post, but continue here.) First of all: thank you, Shaun, for your script!!! What an insight for me!!! I played around a little bit with it, trying to adapt it to vw and vh, and encounter this strange irregularity that, once there are more than 10 slices, a "time cut" or "time jump" (or whatever it should be called) on the 11th slice happens, meaning that its animation starts earlier as expected. Here is my pen: http://codepen.io/rowild/pen/eBQLVR I can't explain myself, why this is happening. Do you have an idea? Or anybody else? Thanks in advance!

Stupid me! I feel ashamed... Thanks for kicking my b*tt!

I read through as much as I can find here and test with your pens by copying ma path to your example (https://greensock.com/docs/#/HTML5/GSAP/Plugins/DrawSVGPlugin/, and there my path works!), but I cannot find my own problem with this animation. The circle path fades in, but the animation is doing nothing... I am still very new to SVG and also to GSAP, but I did read all the docs already... but I am still in the dark somehow... any hint would be most welcome! Thank you in advance! Best regards, Robert

Thank you so much, Carl, for taking the time to provide such an excellent, detailed answer! It is as if a light was turned on in my head I'll get to work now, looking forward to explore new possibilities! Thanks to all of you!

Thank you for your response, Jonathan! I am confused, though, about some things.And it seems I didn't explain well enough, what I wanted to achieve. Please let me try again. But first - the CSS prefixing: Since I usually have a gulp-workflow and stylesheets are read earlier than javascripts, I thought all the prefixes are available, anyway. No need to make GSAP do more work than necessary. Or am I thinking wrong here? Is it better for GSAP itself to set the values? Then - the index... again: How can I find out, what value it transfers? I still have no idea how I can change it or use it. It should hold the scale value, right? The scale-value-to-be according to the modifiers' docs, right? But, unlike the rotation-example given, I cannot log the "content" of index... The idea is that the circles start out at scale(0.3) (or so, will be set by CSS), and then should individually scale to their own values. So the first circle should scale from 0.3->2, the second: 0.3 -> 1.5, the third: 0.3 -> 1 (The higher the index of the circle is, the less it should expand...) Using a function-based value seemed the way to go. But I am still stuck... Anymore hints? Thank you!

GSAP 1.19 ships with the ability to work with function-based values as the youtube tutorial explains (see below). There are to attributes: index and target. Whereas "target" is clear and can be logged out to the console, I have still no idea, how index is supposed to be used. In the codepen I try to get a numeric value from the length of the div containers involved. But without success. I'd be most grateful, if somebody could explain me how to think about that "index" value. And maybe show me even a way, how to assign an decreasing scale value to those div (which eventually shall become water ripples... again...) Thanks! Robert

Thank you so much, PointC! You helped me a lot!!!

In CSS, it is possible to use various percentage values in the @keyframes object to imitate a "pause included" effect. The pen shows a breathing effect that has a pause at the end. It can be read like: 1s: breath in 2s: breath out 3s-4s: don't breath then repeat again. In order to imitate that effect in GSAP, I play around with yoyo and repeatDelay, but unfortunately the repeatDelay is called after each and every tween, whereas it would be desireable to place it after and only after the yoyo repetition. (Question: would that make sense to implement a "after yoyo" flag in the repeatDelay attr, like: repeatDelay: [2s, true]?) How would you do that at Greensock? Any help would be most welcome - thanks! Robert