Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by jstafford

  1. Alright, it is now functioning the way it is on my local and my problem is clearly seen in the second post compared to first (black underline is not hidden by Tweenmax's ScaleX). Codepen is still complaining of not being able to load bootstrap and jquery js . Not sure why. Now that I can ask my question now, does anyone have suggestions on what I am doing wrong with TweenMax in the second codepen? It is not hiding the black underline that is initially set with ScaleX: 0 Any help please...
  2. Sorry. just realized my javascript and jquery is under my html . : P
  3. It is definately my JQuery that can't be seen on both posts. I have done things the Codepen way here (I stripped the html and head out of the posts and included references to bootstrap js, bootstrap css, and jquery for the first post and bootstrap js, bootstrap css, jquery, and Tweenmax in the second post. They both can't see the jquery for some reason?
  4. http://codepen.io/jstafford/pen/yYvbGq - CSS3 transition, original navbar http://codepen.io/jstafford/pen/xwYrKx - GSAP controlled transition; not working Hi, I have a CSS3 navbar transition effect that is based on a nice clean underline effect from this article, http://tobiasahlin.com/blog/css-trick-animating-link-underlines/ . Anyway, I got it working in bootstrap and developed it some more so that it responds with active states and smaller devices as well (See http://codepen.io/jstafford/pen/yYvbGq). I was wanting to convert this into a Tweenmax controlled transition but having some problems. My first problem I am encountering is I am NOT hiding the black underline with TweenMax and scaleX:0 like I was in the original CSS3 transition. See http://codepen.io/jstafford/pen/xwYrKx What am I missing?
  5. Thank you for your prompt response Jonathan. I really appreciate you, Diaco, Jack, and other members of the greensock community for all the help you have provided me in these forums. Have a great weekend.
  6. Thanks Jonathan. So, include both standard jquery and jquery.gsap (I would include the jquery.gsap after jquery so it can override any animate methods in the standard jquery plugin) ? Of course bootstrap complains about jquery being absent, but so does the GSAP plugin if I leave out the standard jquery plugin. Just want to verify here in case I may be missing these smoother animations without noticing.
  7. Just a general question here. When should I inlcude the jquery gsap? I have been relying on just jquery till now.
  8. Thanks Diaco. I know referencing external svg files is done by many instead of inline svg. Perhaps,my stack overflow question better illustrates my problem. This isn't really a GSAP question but any insight would be greatly appreciated. http://stackoverflow.com/questions/32928985/cant-getelementbyid-within-an-external-svg-file-using-object-tag
  9. Here is a codepen that better illustrates this problem. http://codepen.io/jstafford/pen/avJjoR . I think the alert is not firing because layer1 is null here, but it is not showing errors?
  10. Diaco, I apologize that this is kind of an svg question, not GSAP, but do you know why I am returning null from the line svgDoc.getElementById("first_date") and svgDoc.getElementById("Layer_1").
  11. Please see codepen below. I was trying to show that the svg was external file reference in the object tag, but I am not sure this is the problem.
  12. Hi, I was hoping to use the gsap DrawSVG plugin to make direct reference to ids used in my svg layers to make them visible and invisible. I use the object tage, i.e. no inline svg tag in my html to reference the svg. I know of other 3rd party apis that allow you to interact with the svg, Does GSAP's DrawSVG plugin support anything like this?
  13. I like to center with top: 50 % left 50% translate (-50%, -50%) but recognize this uses a transform (see codepen). In addition to xpercent and ypercent (thanks for this addition greensock), do I use .set to give it this state that .to and .from can be chained?
  14. this is a nice solution. I could still use drawsvg on the stroke that fills the mask.
  15. Thanks Diaco. I think the actual effect I was going for was making the letter look like it is being handwritten, not simply outlined with stroke. Are there ways of achieving this with the plugin?
  16. I was using the draw svg plugin and trying to animate the first path (the capital letter P, there are 7 paths, 6 letters and 1 circle around them). I was modeling my first attempt at this after this example, http://codepen.io/GreenSock/pen/bdrjjO, but something is off on mine and I can't figure out what it is.
  17. Thank you Jack and Jonathan for your responses. It seems Jonathan's suggestion of giving the svg padding (I just stretched the artboard around the actual image so there was a tiny bit of space on all sides) and changing the border color to the fill color that the border contained did the trick. Glad this is an easy fix. It broke my heart to see this was a problem in Chrome.
  18. Does GSAP offer any solutions to some of the Chrome SVG bugs, specifically I am getting a jagged line when rotating an svg. This is a documented problem ( Tomorrow, I was getting ready to code up my GSAP solution that is based on a CSS3 transform rotation of the SVG element. I always use Chrome Desktop for development thinking that it is the best browser for everything and it will tell me if something works or not, but Firefox is much better in this animation and does not show jagged lines on the svg element rotation. I know there are hacks for this but I wanted to reach out and ask others if they have run into this and if GSAP offers any help. http://stackoverflow.com/questions/24852879/svg-animation-has-jagged-edges-in-chrome
  19. : / ; yes, I want it to fade in so it comes "from" 0. I think I changed that to 1 in frustration. Apologies on the semicolon. I think this was my actual problem. Thanks again Diaco.
  20. Hi, this last event in my timeline is not firing off. I just want this second square which is blue to go from opacity 0 to 1 at 10 seconds in the timeline. So, I used the tl.from event and made it coming from opacity 0, right? Where am I going wrong?
  21. Hi Shaun. Yes, much more elegant code than mine. Still a little unsure why the autoalpha wasn't working the way I wrote it, but I am still learning the API. Thank you very much for your help on this.
  22. So, I was hoping to get the red square swinging in from the left followed by the Upper Title and Lower Title coming in from left and right. However, the css autoalpha on the TweenMax.from for upper title and lower title is not starting off at 0; therefore, the final state of the upper and lower title is seen, then it disappears and starts the from animation where both swing in? Not sure why this is happening as I am a just starting out in GSAP.