Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Everything posted by padders

  1. That's brilliant guys, I've used a combination of both of them and it works beautifully Thanks again.
  2. 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
  3. 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.
  4. 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!
  5. 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.
  6. 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
  7. 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
  8. 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.
  9. 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
  10. 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!
  11. 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; }
  12. 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.
  13. Noticed I posted the Rodrigo's pen in my codepen link... Doh! Here's mine http://codepen.io/padders1980/pen/ojpaeN
  14. If you remove the 'overwrite: none' from the second tween then the first is completed without being overwritten. I'm not totally sure why though, it seems that the last tween with 'overwrite: none' will be the successful tween in your demo. Multiple tweens with 'overwrite: none' do seem to be able to overwrite any tween! The onOverwrite function might help if you need to debug? http://greensock.com/docs/#/HTML5/GSAP/TweenLite/onOverwrite/
  15. Hi Guys, I'm having a few issues with a little page turner I'm trying to build. I started with Rodrigo's pen (Thank you ) and modified it to resemble a simple hard book (http://codepen.io/rhernando/pen/vjGxH/) where you click the pages and they turn. It currently works quite well in Chrome, Opera and Safari, but has issues in IE and Firefox. Firefox nearly gets it, but doesn't animate the page shading on the before element quite correctly (using CSSRulePlugin). It correctly shades the first page as it's rising, but fails to animate the second page as it's dropping (that might make more sense if you view the demo in Chrome first, then in Firefox) IE 11/10 ignore the perspective on the .Wrapper element. I've seen that you can keep the perspective in IE by repeating the transforms on the child elements, but this hurts my head when I try to do this with GSAP by setting values using TweenMax/TweenLite. Does anyone have any ideas? I've not tried Edge yet... will give that a go later.
  16. I can see a way of setting an animation at a specific progress (50% of the way through in the example below) AnimationTimeLine.progress(0.5); I was wondering if there was a way to make an animation play to a specific point as opposed to just instantly setting it there? Something like... AnimationTimeLine.playTo(0.5); If the progress of the animation was 0, it would then play the animation from the start, to 50% of the way through. If it was at the end, it would play it in reverse to 50% of the way through. Is that possible? I've had a read of the docs but couldn't find anything (It's quite likely I'm being blind...).
  17. Dude that's great, even works in Safari (which throws a fit with mine). Might have a play with that tomorrow
  18. Oh, and one last interesting thing! You need to use 3d transforms to get any kind of performance. if you need to move things left/right etc, then use matrix3d
  19. Ok, I seem to have minimised the effect now, it's not fixed totally but by setting the opacity to 0 at the start you don't really see it. If you get rid of all the JS apart from the following, you can see the glitch clearly on mine! I guess it's just the displacement map and the text at the start. var textBox = $(".trippy"), turbulence = $("feTurbulence"), displacement = $("feDisplacementMap"), tl; CSSPlugin.defaultTransformPerspective = 600; TweenLite.set(textBox, {rotationY:90});
  20. Ha, I can't really take credit Shaun, it's forked from 2 other pens it is cool though. (I linked to the originals in the description of the pen, take a peek) yeah I noticed my attachment hadn't uploaded, I've sent it again. I still get the glitch in your fork though Carl. I wonder if my graphics card drivers are doing something funny...
  21. Yeah, I was surprised at how smooth it is in Chrome, Opera isn't bad either. I've added overflow: hidden on the body now, which stops the scrollbars appearing but I still get the glitch. It seems to happen more when the window is fullscreen but with the editor still showing (so in editor mode, not fullscreen mode). Might only be appearing at certain browser sizes? The glitch itself is a brief appearance of the warped text on the left, it's just a frame or two, but it's quite apparent when it's there. I've attached a screenshot of what I see! It looks like I've got something misplaced somewhere so it appears just before the animation starts?
  22. Hi Guys, I was just playing with some really nice text effects from another codepen, and using GSAP to tween the filter values. I'm getting a glitch when the animation starts/resets though, so I think I need to set something at the start to get rid of it! Any ideas where the glitch is coming from? Note that it doesn't work in IE at all! Cheers, Paul