padders

See, knew I was being dumb. You're a star

Hi Guys, I'm having a little issue clearing the properties of my tweens. I've setup a codepen to test out some fade in animations for sections of a page, and I'm trying to use clearprops (line 36 of the js in the codepen) to reset all the possible values in all my different fade in animations. gsap.set([title1, para1, para1_2, title2, para2, para2_2], {clearProps: 'opacity, left, top, x, y, z, rotateX, rotateY, scale, transform'}); To demonstrate, if you set the title1 animation to be Flip_In_Y, or Animate_From_Left_Big, then scroll down to activate the animation. Scroll back to the top and press the Reset button. I want this to apply the filters from the buttons (which is working) and then remove all the styling applied by the GSAP tweens I've previously made. Clearprops works fine for opacity, but when I'm trying the fade in animations for Flip_In_Y, or Animate_From_Left_Big, it doesn't remove that style attribute, it merely sets them to 0. So for Animate_From_Left_Big, it sets the style attribute to "left: 0px". I'm sure I'm doing something dumb, is there a way to remove all GSAP tweens and there applied styling to everything on the page? I've also tried the following, but that didn't work well either! gsap.killTweensOf([section1, title1, para1, para1_2, section2, title2, para2, para2_2]);

That's brilliant guys, I've used a combination of both of them and it works beautifully Thanks again.

Hi Guys, I'm trying to create a timeline that has an infinite repeat, but the time between repeats is random every time (basically I've created a little timeline of some wind blowing through some plants, but I want the wind to appear random). I've done this with an eventCallback using onRepeat and a function that sets the repeatDelay every time. It's going mad though so I must be doing something wrong. I want it to play the animation through each time and then have a random amount of time between plays. My little codepen recreates the issue. Any ideas? Cheers Paul

Brill, Thanks Jack

Which is easily sorted using the shapeIndex tool. Ta. that sorted it. You're a star Wonder what was actually up with the SVG code! Still, that's a nice tool to know about. I shall use it in future.

Nice, I did wonder if Inkscape was doing something funny. It's not the most stable of products! It is doing something strange with the N now though. Wonder if the tool is moving something it shouldn't!

I think you'll need to add the following resources. https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js If you look at the download link on the GSAP homepage, then select custom and tick the TimeLineMax checkbox, it selects the items you need to import and lists the imports at the top.

I think you need to add the CSSPlugin as well if you just want to use TweenLite. Add the line below as an external javascript resource. It works for me when I do that. https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js I'm not sure about the EasePack, you may need that too if you want to use eases. https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js

Hi, I'm having some problems with MorphSVG. The latest version seems to be crashing every browser other than Internet Explorer 11 (which works, amazingly!) with a little morph I've made. (Chrome, Firefox and Opera all crash) I'm not sure If I've done something wrong, if inkscape has created a slightly dodgy svg file, or if it's a bug in the latest version of MorphSVGPlugin. I can't get any error data as it totally kills the browser tab. It was working in the version of MorphSVGPlugin dated 13/10/2015, but it wasn't setting the shapeIndex correctly on the A's in my morph, nor was setting that value making any difference to the resultant morph when I changed shapeIndex manually. I decided to use your codepen to check I was doing it correctly so forked it and the crashing behaviour started. Since then I've updated my local copy of the plugin (dated 21/10/2015) and it's now crashing in everything other than IE on my webpage too. Does anyone know what's going on? Note that the latest version now sets the shapeIndex correctly (at least in IE, I can't see the others as they crash), so that behaviour seems to have been caused by the older version of the plugin I was using. Cheers, Paul

Hi Jonathon, I'm using a :before element as I want to use background images and not just text on the pages. Shading the element means everything on the page is shaded nicely. The only other way I could think of was animating multiple background images, one being the image and one being a linear gradient. I think to do that I'd need to store the background images in the js and then animate the linear gradient, sticking them together to form one element. That seemed to be a bit more of a faff than animating a :before element! I might try it though. I didn't have the images in my demo as I haven't made them yet. I'll have a play with the backface visibility, sounds like a good idea. I don't think it explains what Firefox is doing with the .to on page turn, when it's already hovered though (as in, the hover sets the opacity to 0.05, then on page turn it should smoothly animate to 0.2. However in Firefox, on page click it goes straight back to 0 opacity, then animates to 0.2. None of the other browsers do this. It looks like either a Firefox bug, or some strange GSAP behaviour where in firefox it does a fromTo instead of a To for some reason) Setting all of the positional controls (top, bottom, left and right) to 0 means that the element will fill all the available space of it's parent. It's useful when the parents size isn't fixed, I could have gone with width and height at 100% but this way seems to be fairly standard for before and after elements. If you don't apply them all then the before element doesn't show.

If I set the time period of the shading to be 0.65, and start it 0.75 after the page turn, then I can see it appears shaded, then abrubtly cuts out. It's like the .to event is firing instantly (like a .set). Think I might leave it for now and move onto something else for a bit. Come back to it next week with a fresh head! Thanks for the help

Interesting, I'm not seeing any change with your updated version. I've attached some gifs of what I see (using ScreenToGif, not the best method but it does make nice small files!) Firefox is at 41.0.2, IE is at 11.0.24 (11.0.9600.18059). IE works perfectly other than the perspective. Firefox has some weird shading issues. It applies the shading to the first page correctly, but not the second (I think it may be firing early and is done by the time the page appears?). So if you click the front of a page, it shades it correctly but the back isn't shaded when it appears. If you click the back, it shades that correctly, but not the front. That to me implies it's a timing issue? I've tried spreading them out a bit so there's no chance of overlap, and changing the way the timings are coded (using tags and +=) but that's not helped. It's also shading both correctly on hover, but if you then click the page, it reverts that, and goes back to 0 opacity, then does the shading for the page turn. All the other browsers go from the hover to the fully shaded without reverting (which is what I thought the .to method would do). You might be able to see that in my gif... but it's a bit quick! I have been playing with the debug mode too, as Firefox gets a bit picky with its sandboxing (that seems to stop some scripts from working in codepen) I still have no luck with setting the .body alignment as you suggest. I've had it work like that in other codepens and projects... but for some reason it is having none of it this time. I can't seem to find what's blocking it, but I must have something out of line somewhere. Another good tip on the h1 tags I'll bear that in mind. Thanks for the help by the way, I'm constantly impressed by you guys on these forums!

Isn't it because you've only got width: 200% set in your .content css, and not height: 200% as well? .content { position: absolute; width: 200%; left: 0; top: 0; z-index: 100; }

Hi Jonathon, Thanks for that Good tip on the vendor prefixes. I'll make sure to do that from now on. Unfortunately I still get the same problems with your pen as I did with mine (win 7 x64). IE ignores the rotationX set on the .Wrapper element. The 3d on the pages works OK. Firefox still ignores the second page shading when a page flips. It shades the first page to move, but when the reverse page appears it isn't shaded. I did try to use GSAP to set the transform on .book but I couldn't for the life of me get it to work! (even though I have in the past). I tried the following but the xPercent and yPercent just seem to be ignored. TweenLite.set(".book", { transformStyle: "preserve-3d", top: '50%', left: '50%', xPercent:-50, yPercent:-50 }); I also tried the following but it only applied the change in the x axis, not in the y! TweenLite.set(".book", { transformStyle: "preserve-3d", top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }); That was the point I set in the the css... (with a little whimper). I did wonder if it was something to do with me using viewing widths instead of set widths and heights? Loving your cube demos. Very handy, I'll have a go and see if I can change my method to match.