Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

20 Newbie

About padders

  • Rank
    Advanced Member

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

1,679 profile views
  1. See, knew I was being dumb. You're a star
  2. 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 animat
  3. That's brilliant guys, I've used a combination of both of them and it works beautifully Thanks again.
  4. 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
  5. 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.
  6. 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!
  7. 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.
  8. 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
  9. 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 s
  10. 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 h
  11. 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
  12. 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
  13. 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; }
  14. 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