Acccent

Hi Jonathan, I did check xPercent (and yPercent , but in my case onl y x matters) but couldn't get it to work. To be clear, for my needs I would indeed need to combine x and xPercent in an single tween; however the value of x is dynamic and changes depending on the window or device width. Unless I'm mistaken, using checks like matchMedia or EnquireJS would allow me to define the right value on page load, but then if the user resizes their window the Timeline doesn't update its parameters... (as for applying the transforms in CSS, got it, I'll change that in my code – thanks)

Hey! since I've asked a couple questions I thought I'd give one of the snippets I finished working on, which actually works So I know the new cycle feature allows HSL color manipulation, however that makes for suboptimal cycles through the whole color spectrum. I'm basing my info on this: http://basecase.org/env/on-rainbows — Basically, when using a purely hue-based cycle, you get spikes in luminosity that highlight certain colors and make others look washed out. So I implemented a 'better' cycle! You can find the result here: http://codepen.io/Accent/pen/XmeYZJ Here's what it does: it assigns a random initial value to each element (let's call it the color index); this index is used to generate an RGB coloran approximation of the golden ratio is used to ensure that the initial colors are as spread out around the hue spectrum as possible the initial color index of each element is stored in an array we then cycle through all of the elements to increase their index by 2 * Math.PI / 36 (= 10 degrees) then animate all of the colors towards a new RGB color, generated from the color index we just increased I initially thought I could do that using only a TimelineMax, but had no success with it; you can find the attempt there: http://codepen.io/Accent/pen/avLLXm (Seems like it won't work because the values are cached, so each time the animation loops it starts from the initial color index instead of the newly increased one. If anyone has an idea to make that one work, go for it!) Cheers

I wasn't sure this was directly linked to the problem I am having, and I made a new thread to avoid cluttering this one in case our issues were different, but you might want to check the new thread anyway in case it helps: http://greensock.com/forums/topic/12631-make-responsive-transforms-with-media-query-dependent-values-or-workaround/

Hi again This time I'm having trouble with sliding panes, whose 'open' position depends on media queries. Have a look at the pen: http://codepen.io/Accent/pen/BowwZx (thanks @Diaco who had a pen I forked to make this quickly) Basically, I have a red 'panel'; when it's open, it has an x transform that makes it rest to the right of the window, but it's not fully hidden. It still has a visible part, which is dependent on the width of a child 'box'. When you click on the button to close the panel, it slides all the way to the left, with the box still visible. The problem is, the width of that box is responsive, and below a certain screen width it becomes smaller (in the pen, that is simulated with a button for convenience). When the width the screen (and the box) changes, the panel animation is no longer correct. Using invalidate() doesn't work either, or at least I couldn't get it to work. I also couldn't manage to get xPercent to work. How would you solve this? (Note: I'm sure I could get it to work by applying several left and right values to various elements, in various media queries, but I'm sure there must be an elegant way?)

Alright I think I understand why it behaved the way it did. My cycling timeline was something like: fadecycle .staggerTo([$a, $b, $c], 2.1, { opacity: 0 }, 10) .staggerTo([$b, $c, $a], 3, { opacity: 1 }, 10, 0.6); And I assumed the order in which I passed the elements would make it understand how I wanted it to behave, that is: t 00.0 ..... $a fade out t 00.6 ..... $b fade in t 10.0 ..... $b fade out t 10.6 ..... $c fade in t 20.0 ..... $c fade out t 20.6 ..... $a fade in But apparently the order isn't recognised well? and the timeline ended up looking more like t 00.0 ..... $a fade out t 00.6 ..... $a fade in t 10.0 ..... $c fade out t 10.6 ..... $b fade in etc I fixed it by simply writing a more explicit timeline. I tried to use staggerFromTo + SlowMo easing, but couldn't get to a transition that was quite perfectly like the one I'd tuned (which I had spent time on to make look just right). There's as many lines as the equivalent thing in Velocity.js now oh well At least it works. And the cycle feature mentioned in your link, Diaco, looks very promising, so I'll have a look at that tomorrow. Thanks!

I (very quickly) made a small graph to explain the values used. (turns out my maths were slightly wrong, but changing them didn't fix anything.) edit: ah, using staggerFromTo might help indeed, I'm checking it out. Thanks

Hi all, so, like my title says, I'm trying to move from Velocity.js to GSAP — the ultimate goal is to be able to properly animate (and rotate) SVG in all browsers, with consistent results. However, before I do that, I have to change all of my existing code to GSAP's syntax, which, I must admit, isn't suuuper intuitve (imo!). I have to say I was super impressed by the ability to basically reduce what was 7-10 lines with Velocity, to just 2 or 3 in GSAP. Anyway, the first of the problems I'm facing is this: I have a set of divs which sequentially appear (they are all absolutely positioned in the same place, one of them has opacity: 1 while the others have 0, then it fades out while the second one fades in, etc.) I don't know if it's a hard problem to solve, maybe there's something obvious that I'm missing, but after spending hours on it I am honestly becoming quite frustrated, especially since it worked before and GSAP was meant to make things easier elsewhere, not complicate this (I'm only blaming myself, I'm convinced the framework is super powerful.) What I'm doing is: I have a TimelineLite that makes a bunch of divs appear, among which the first of the 'cycling' divs. Then it calls a TimelineMax that's meant to cycle the divs infinitely, with repeat: -1. I spent a lot of time before realising that Timelines start as soon as you create them by default and thought it might be at the root of the problem, but setting paused: true didn't help. I'm using .staggerTo() and there probably is something wrong with my code somewhere, but I can't pinpoint it. Here is the codepen: http://codepen.io/Accent/pen/RWZXvo (you have to wait for a bit to see that it glitches after it loops) I'd love some help! --- I also have another question which I might as well ask here too (to avoid cluttering the forums), even though I haven't struggled with it too much yet so I might find the solution by myself later. Say I have x elements; I give them all a generate background-color by iterating through them with jQuery's each(). Now, is it possible to create a named TweenMax that will animate all of the background-colors, so that they cycle through the whole color spectrum at the same pace? (If the first question is solved and this becomes the main subject of the thread, I'll edit and post a different pen)