Acccent

Hey @struthyBhoy, you should try defining your timeline outside of the hover() function, and then using jQuery's .mouseenter() and .mouseleave() instead of hover(). In those event handlers you can then play() or reverse() your timeline

here's the updated codepen gave me quite a headache figuring out the maths to make it cycle at a fixed interval haha. http://codepen.io/Acccent/pen/ZQggPW

Haha! I can't believe it was that easy! I thought kill() also rewinded back timelines to their initial position. I had to do another thing on top of that, which is storing the timelines I created in an external array, like so: var loops = []; function setupfade() { $fadecycle.each(function(i){ /* other var declarations... */ if ( typeof loops[i] != 'undefined' ) { var p = loops[i].time(); loops[i].pause(0).kill(); } loops[i] = new TimelineMax({ repeat:-1, repeatDelay:interval - delay }); /* working with loops[i] */ }); } I'll update the codepen with my final code a bit later, in case anyone's interested in using the same slider

Hi kleeman, As far as I can tell this is a pretty simple issue so I can give you an answer right away, but in the future try to provide a link to a demo on codepen to make it easier to see what you're having trouble with Now, regarding your problem, there are probably many ways to do it but what I would suggest trying is this: function stopWheels() { TweenMax.to(tl, 2, {timeScale:0, ease:Power1.easeOut}); } What that does is tween the timeScale property of your timeline tl, so that it reaches 0 after 2 seconds. You can change that duration as well as the easing as you would for any other tween. edit: oh, PointC beat me to it I tried using the forum's "I'll answer this" feature but it didn't work.

Hey everyone, I'm having a bit of an issue that probably is partially, but not entirely, related to GreenSock... I figured you guys would be kind enough to lend me a hand I'm making a slider, with elements fading in and out in a sequence. I want the height of the parent to change depending on the height of the child that's currently visible. Problem is, the height of the children depends on the window's width, so I need to do something to recalculate everything on resize. First of all, the slider itself: TweenMax.set(el, { height:h }); // set the height of the parent to the height of its last child (useful for looping) els.each(function(){ var xh = $(this).outerHeight(); // get the height of the child that we're about to display if ( h < xh ) { // if the child is taller: first make the parent grow, then make it appear if( delay == 0 ) { delay = 0.3; } loop.fromTo(el, 0.3, { height:h }, { height:xh, ease:Power1.easeInOut, immediateRender:false }, delay - 0.3) .to($(this), 0.4, { autoAlpha:1, ease:Linear.easeNone }, delay); } else { // if the child is smaller: make it appear and then make the parent shrink loop.to($(this), 0.4, { autoAlpha:1, ease:Linear.easeNone }, delay) .fromTo(el, 0.3, { height:h }, { height:xh, ease:Power1.easeInOut, immediateRender:false }, delay + 0.4); } h = xh; // store the new height delay += 3; // offset the position for the next child loop.to($(this), 0.4, { autoAlpha:0, ease:Linear.easeNone }, delay); // add the current child's fade out }); This works as I want it to. (I don't use staggerTo because this gives me more control; I've simplified it for this example, there's some added tweaks normally, but nothing relevant for this topic.) That code is executed on each element that has the .slider class, in the codepen there's just one but it's enough to illustrate the issue. Now, what I want is to re-execute it all whenever the window's resized, so that the heights can be recalculated, so here's what I did: if ( typeof loop != 'undefined' ) { // check if the current object already has a loop timeline defined var p = loop.time(); // store the timeline's position loop.kill(); } loop = new TimelineMax({ repeat:-1 }); /* * Timeline code shown above goes here * */ if ( p ) { loop.time(p); } // restore the new timeline to the position it was had before I killed it The problem is loop is always undefined. So what happens is, a new timeline is created whenever you resize the window... and it creates a lot of weird behaviours. You can see it in the codepen. I'm pretty sure the problem here is one of scoping, but that's a concept I'm not super good with Can anyone have a look and nudge me in the right direction? (Also, if you see something that feels wrong and should be done differently, feel free to let me know!) edit: linked codepen is the fixed version!

Actually, I went back to this because I realised I'd made a couple mistakes! First of all, the initial translation and rotation do need to have the same duration and easing, but the rotation doesn't need to be 360° at all. It actually needs to be equal to 360 * x / ( d * π ), with x = the translation and d = the coin's diameter. In this case: 360 * 200 / ( 50 * π ) ≈ 458.37, so let's use 450 because it's 5 * 90 which is convenient. So you know that after the initial movement, the coin will be right at the edge of the hole, and rotated by 90°. Now you need to change the transform origin but if you do that, you need to adjust its position as well! If you don't, the rotation will be applied using the new origin as a reference. So you need to 'slide back' the coin to where it was before changing its transform origin. Then you apply the 90° rotation that makes the coin go over the edge, and then once again you need to change the transform origin, so again you must translate the coin so that this change is invisible. After that you just need to have the coin finish rotating and slide towards the bottom of the whole. I've updated the codepen, here's the link again: http://codepen.io/Acccent/pen/QyRwqN edit: here's one where it falls in the second hole, for fun: http://codepen.io/Acccent/pen/qbGbXK

Oh, alright. I was afraid I was missing something! Glad you worked it out

Hi there a couple of things to note: the initial translation and rotation must have the same duration and ease, and the rotation must be 360°, if you want to give the impression that the coin rolls on the ground instead of sliding (movements are synchronised) that movement probably looks best with easeIn, and then all the subsequent tweens must be linear because the movement is already at full speed; the only value you should tweak is the duration other than that, it's pretty straightforward: you can make the coin rotate by 90° around the point that touches the ground (that's what you did) after that rotation, I found it easier to set the new rotation and position values at the same time as the new transform origin that way you can approach the remaining "drop" as a whole different thing Here's a demo I made, you can tweak it however you want: http://codepen.io/Acccent/pen/QyRwqN

Can you clarify what was wrong with your initial codepen though, apart from the different values? As fas as I know, svgOrigin does the same thing as transformOrigin, except it takes the whole SVG as a reference instead of the individual element. So, using transformOrigin, you could use the group's positioning.

Hi @celli I don't really see the problem! the anchor point – I assume you mean the transform origin basically – changes as expected on my end. Here's a version of your codepen with the values slightly tweaked so the legs move properly: http://codepen.io/Acccent/pen/KVLKGP edit: nice little leprechaun btw

It's fairly easy You just need to add /*r.a+nd*/o\m (s-la)/s*h+e.s [a&nd] s?t,a^\rs} into your sentence. (What do you mean, that's not how it works)

Yup, that did it! I had to change .menu-item to just li. (I was already selecting an ID as the parent.) Thanks a lot @Jonathan! I definitely wouldn't have found this by myself.

I was wondering if anyone could help me with this? Since I have a codepen that works perfectly in Chrome and FF but not IE, I assume it's a bug somewhere, maybe with IE itself... but I'm not sure how to fix it

Well, I know this is off-topic... but after playing The Witness for two weeks, Carl's demo made me do a double take haha

Hey @adamburkevpa, I'm not sure I understand the issue. If the codepen works as intended... what's wrong? Could you describe again what you're trying to do please? Also, did you have a look at the new SVG Gotchas thread? There's quite a bit of advice about masks there

Hi @spacewindow! How about something like this? http://codepen.io/Acccent/pen/GoPpKL You could achieve the same effect by manipulating the background-position of an element. Let me know if that works for you edit: I tweaked it so it looks like the topmost point stays in the same position. This involves some fiddling and calculating but I'm sure you'll figure it out!

Well, the thing about the double colon is just a side remark, my actual code doesn't use them. I just found out about that while writing the codepan, haha. I stealth-edited my previous post while you were writing yours I think, sorry! Please have a look at this: http://codepen.io/Acccent/pen/zrMzee It works in Chrome and FF, but not in IE11...

Sorry for not posting the codepen, I was trying to narrow down the potential sources... Here's an update version that works in Chrome and FF, but not IE: http://codepen.io/Acccent/pen/zrMzee (same link as in the first post) Also, it's worth mentioning that if you use ::after as you're meant to (I think), it doesn't work in Chrome either. You have to use :after both in the css and with GreenSock. edit: it seems the :last-child is the culprit...? In the pen, I added tests for .box:last-child, .box > a:after, .box:last-child > a and .box:last-child > a:after and the first of those fails in IE. But then again your codepen works, @Jonathan? I'm confused :s

Hey again, well, I thought this was solved, and indeed it was... in Firefox and Chrome. Good ol' IE11 isn't having any of it. The codepen does work in IE, though, so I'm wondering what's wrong here. The CSS rule I'm targetting is this: #menu-main-menu > .menu-item:nth-last-child(2) Do you see any reason why that wouldn't work? The styles are properly applied to the elements... maybe the CSS is loaded after the JS...?

Hi @Diaco Thanks for the fix, but... I don't really get it? How am I supposed to order my CSS rules in a production context with thousands of lines? (I don't mean to say it's impossible, I just don't understand how I would need to do it.) As for using CSSPlugin instead of CSSRulePlugin, I updated the pen to better represent the responsive design I have in mind – as you can see, the final shape isn't supposed to be the same size if the window is <1000px wide, and if I use the CSSPlugin GreenSock caches the values on first load and then uses those regardless of the window size (while, if only the CSS rule is changed, I can make it work with CSS media queries.) edit: oooh I see what you mean – since the .box styles were before .red and .blue, and both of those contained background-color properties, the styles added by GreenSock were being overridden. I'll have a look at my website to see if that's what's happening, but unfortunately I don't think it is... so there must be something else going on... edit: it was! well, not exactly – the issue was that one of the CSS rules I was targeting wasn't actually explicitly present in my stylesheet, which I hadn't noticed before investigating the order of declarations... Thanks!!

well, no, the error is there... here's the JS code: var tl = new TimelineLite(), css = CSSRulePlugin.getRule(".box"); tl.to(".red", 1, {x:500}) .to(css, 1, {cssRule:{backgroundColor:"#006699"}}); if it worked, both divs with the '.box' class should have their background color changed to #006699, and it doesn't happen. And the inspector says there's an error... at least on my end.

Hi everyone I was looking to use the CSSRulePlugin to perform some em-based transforms that would still work as expected even after a site-wide change in the font-size (for responsiveness). Unfortunately, I think I must be doing something wrong...? When I store the CSS rule into a variable, it's stored as 'undefined', and then of course I get a "Cannot tween a null target" error. Have a look at the codepen, it's pretty simple... I think I just missed something obvious somewhere haha ^_^'

Here's another online tool to clean up SVG code, with much less features but also simpler as a result: http://petercollingridge.appspot.com/svg-editor

Hi there I know this doesn't address the underlying issue, which @Carl or @GreenSock may look into, but in the meantime... why don't you simply replace both 1e-5 and 10e-6 with 0.00001? It seems to work.

This is a great and really important point! It means several things in practice: be careful not to get confused with GSAP's x:when used with the CSSPlugin, it means a translation along the X axis of the element. The element's starting position is the axis origin. If you use x:100 on an element, it will move 100px to the right of its initial position. when used with the AttrPlugin (inside attr:{}), it means a manipulation of the SVG element's X attribute. The axis origin, in this case, is the same as the parent coordinate system's. If you create an element in a vector software and position it at x:100, then using attr:{x:100} on it with GSAP will do nothing. if you want to animate, say, a mask, you can't do it using something like GSAP's rotation: keyword. You have to manipulate its SVG attributes directly. This is easy if you want to simply translate it, but if you want to rotate it, some maths will have to be involved. Here's an example of this: http://codepen.io/Acccent/pen/yYPJOL another thing to keep in mind is that both transformOrigin and svgOrigin are part of the CSSPlugin, so if you're animating the SVG attributes directly with the AttrPlugin, you'll have to do without them.A general tip when working with Illustrator: always use relative values. If you move an element 100px downwards in Illustrator, then using y:"+=100" or attr:{y:"+=100"} has the same effect, so it's less prone to mistakes. So, when you're planning an animation in your vector software, make sure to note down the start and end positions of all the elements you move, and then use the difference and use that with GSAP. It will save you a lot of trouble.