Jump to content
GreenSock

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

jstafford

Members
  • Posts

    182
  • Joined

  • Last visited

Everything posted by jstafford

  1. Here is the final solution I got to. It is a responsive animation according to the path of the slope which scales with changes in window or device size. http://codepen.io/jstafford/pen/VeLKON
  2. Sorry Jack. Been a crazy day. I had a demo today at work. I will try to repost tomorrow. I took it down b/c in a fury of trying things , I ended up editing the original codepen with something that did not reflect my narrative above. But I can say that putting everything into one svg and not making one svg traverse the path of another svg helped a lot. I got stuck again b/c I was trying to move seperate pieces of the svg by x and y but it wasn't working and I had to end up going with xPercent and yPercent.
  3. http://codepen.io/jstafford/pen/jWEpRO ; this codepen is what I am getting locally, but the banner container seems to collapse on the codpen unless I give the boat-hill-container a height as well. The svg simply scales its height once I assign the svg a width on my local. Anyway, don't think this difference will matter as I am getting almost exact same visual result when I give the svg height.
  4. Still struggling a bit, but I have combined the hill polygon with traverse path and boat together into one svg. http://codepen.io/jstafford/pen/jWEpRO Any idea what is going on? The boat is grouped together and can be targeted with #boat and needs to move along bezier path The wheel 2 and wheel3 have #wheel2 and #wheel3 respectively and rotate and move along bezier path #traverse-path is the path that the boat, wheel2, and wheel3 traverse with bezier data wheel1 is just grouped with boat since it isn't really rotating in image
  5. I noticed this exact difference comparing my bezier path animation to yours from last week where you used a circle as the follower of the path. I can certainly put them both in the same coordinate space. Thanks for your insight on this. I will update you later. Thanks Jack.
  6. When I say the boat fails to adhere to ramp at different widths and heights I mean this is a failure of the boat to adhere to the ramp when window or device size changes. I know the key will be to make the boat adhere to the traverse path id="traverse-path" that the MorpSVGPlugin calculates the bezier path for. The traverse path of the hill seems to be scaling appropriately.
  7. Hi , I am trying to create an animation of a boat rolling backwards; however, I am unable to constrain the wheels touching the ramp on the way down at all widths and heights. http://codepen.io/jstafford/pen/MKYoQw The wheels touching the base of the ramp is dependent on the path of the traverse, not really the % from bottom or % from left. I was trying this using jquery but not realizing this was more of a styling according to the bezier path. It just isn't working and I feel like I am stumped for now and need to reach out for help. Frustration.
  8. Never mind. It seems to be due to the change of the view screen on codepen. Figured out my question. Thanks.
  9. okay, some weird behaviour on my codepen, but I understand what it is doing but not how to fix it. the Wheels are rotatating clockwise and not according to my tranformOrign at 50% 50%. Sometimes the wheels rotate from center.
  10. Hi, I have a vehicle that starts its motion from stop and I was needing my wheels to match this motion with increase in angular acceleration. I was considering incrementing up the rotation of the wheel to create this angular acceleration at a transformOrign of center, but wanted to get some advice before proceeding. Thanks. John
  11. Yep. That's it. I am fairly sure my problem is I am targeting the group wrapper around the path (the id="traverse-path" is on the group wrapper), not the path itself. I am planning to look at it tomorrow morning again. But you are targeting the class specific to my path I want to traverse. That's my problem. Sure of it now. Code is at work so I will look at tomorrow morning. Thanks Jack!
  12. Update: Been playing around with generating a better svg file for the MorphSVGPlugin to use. This worked. <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="hill" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1153 326" style="enable-background:new 0 0 1153 326;" xml:space="preserve"> <style type="text/css"> .Drop_x0020_Shadow{fill:none;} .Round_x0020_Corners_x0020_2_x0020_pt{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;} .Live_x0020_Reflect_x0020_X{fill:none;} .Bevel_x0020_Soft{fill:url(#SVGID_1_);} .Dusk{fill:#FFFFFF;} .Foliage_GS{fill:#FFDD00;} .Pompadour_GS{fill-rule:evenodd;clip-rule:evenodd;fill:#44ADE2;} .st0{fill:#3A393B;} </style> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0.7071" y2="0.7071"> <stop offset="0" style="stop-color:#DEDFE3"/> <stop offset="0.1738" style="stop-color:#D8D9DD"/> <stop offset="0.352" style="stop-color:#C9CACD"/> <stop offset="0.5323" style="stop-color:#B4B5B8"/> <stop offset="0.7139" style="stop-color:#989A9C"/> <stop offset="0.8949" style="stop-color:#797C7E"/> <stop offset="1" style="stop-color:#656B6C"/> </linearGradient> <path id="traverse-path" class="st0" d="M1153,326C809.5,327.2,0,227.2,0,227.2V326H1153z"/> </svg> However, it is a polygon and instead of going down the ramp like I want it goes around the polygon perimeter. So, I created a curved line that does have data attributes. Polygon only provides background shaded object, not traversed. <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1153 326" style="enable-background:new 0 0 1153 326;" xml:space="preserve"> <style type="text/css"> .Drop_x0020_Shadow{fill:none;} .Round_x0020_Corners_x0020_2_x0020_pt{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;} .Live_x0020_Reflect_x0020_X{fill:none;} .Bevel_x0020_Soft{fill:url(#SVGID_1_);} .Dusk{fill:#FFFFFF;} .Foliage_GS{fill:#FFDD00;} .Pompadour_GS{fill-rule:evenodd;clip-rule:evenodd;fill:#44ADE2;} .st0{fill:#3A393B;} .st1{fill:none;} </style> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0.7071" y2="0.7071"> <stop offset="0" style="stop-color:#DEDFE3"/> <stop offset="0.1738" style="stop-color:#D8D9DD"/> <stop offset="0.352" style="stop-color:#C9CACD"/> <stop offset="0.5323" style="stop-color:#B4B5B8"/> <stop offset="0.7139" style="stop-color:#989A9C"/> <stop offset="0.8949" style="stop-color:#797C7E"/> <stop offset="1" style="stop-color:#656B6C"/> </linearGradient> <g id="hill"> <path class="st0" d="M1153,326C809.5,327.2,0,227.2,0,227.2V326H1153z"/> <!-- shaded polygon, not traversed --> </g> <g id="traverse-path"> <path class="st1" d="M0,227c0,0,838,102,1153,99"/> <!-- this was a simple curved line drawn with pen tool --> </g> </svg> But I get a malformed data error again when trying to traverse only the curved line. Why will it let me traverse the polygon and not the curved line?
  13. function getBoatTimeline() { var traversePath = getSvgPath("hill", "traverse-path"); var bezierData = MorphSVGPlugin.pathDataToBezier(traversePath); TweenMax.to($("#boat-container"), 2, {bezier: {values:bezierData, type:"cubic"}, ease:Linear.easeNone, repeat:-1, yoyo:true}); .... } ------ I am trying to do the following: http://greensock.com/forums/topic/13220-animating-along-a-path/ I usually post with reduced examples of my questions using codepen, but due to the context of my question, I am unable to for this one (maybe I will think of a way to do later), but I have thoroughly documented my problem with code and errors. I am working with an external svg getting and retrieving it successfully and passing it as path data to the MorphSVGPlugin.pathDataToBezier where it complains of the following: "WARNING: invalid morph to: undefined, ERROR: malformed path data: false" when evaluated in my console, traversePath is equivalent to the following: traversePath --> <g id=​"traverse-path">​<line class=​"st0" x1=​"0" y1=​"238.8" x2=​"1153" y2=​"299.3">​</line>​</g>​ My svg consist of two layers. One layer is a polygon with fill and the other is a line that I was hoping to traverse. I noticed that d is absent here, but why is illustrator not giving my line data attributes? Is this the problem? Any help appreciated. Thanks. John
  14. Cool Diaco. Thank you. I will try this out tomorrow.
  15. Hi, I was wanting to draw a car sliding down a curve. The car is already an svg image but I was thinking I need to render a "linear bezier path" with the GSAP Bezier plugin so that I can have precise control in how the car makes contact with the line thoighout the GSAP Bezier animation. My approach would be two have two parrallel paths, one in which the car traverses and another below that is drawn and makes contact with the car's tires throughout. This is crazy, but I have never just drawn a line with GSAP (HTML5 yes). How would I draw the actual linear path that the svg car's tires are contacting. I am more familiar with how to do this in HTML5, but would like to see GSAP's way of rendering a straight line and matching these coordinates up to the svg sprite motion.
  16. I don't have any specific examples. Just curious if you guys could discuss some. Thanks for both of your responses.
  17. Has anyone noticed enough of a slow down on their site using className (instead of tweening the css property directly) to affect SEO ratings by search engines like Google?
  18. Quick question Jonathan. Say GSAP pulls in the a CSS3 transition from the external stylesheet, and it is appropriately prefixed with -webkit-transition: , transition: etc. and the browser doesen't support CSS3 transitions (ie8 or ie9, http://caniuse.com/#search=css3%20transition); will GSAP still do its magic?
  19. -webkit-transform: -ms-transform: /* IE 9 */ transform: looks like -ms-transform for ie9; haven't had to worry about prefixes in a while
  20. Thanks PointC. I was tying my hands behind my back thinking that gsap only recognized the xPercent and yPercent for transforming something relative to its own width and height. I had read this about autoalpha, but seeing it again from you again has reassured me to just try it with opacity and visibility in my css. Making this autoAlpha more mysterious than it needs to be. Thank you sir.
  21. I have thought about stopping short of putting all the stylings in an external css (esp. gsap specific ones like autoalpha, xPercent, yPercent, etc.) but it would be very cool if I could cleanly refactor all stylings into an external stylesheet of some sort.
  22. I have been struggling today in finding a clean way to refactor my GSAP Javascript from CSS styles. I am doing this at the request of coworkers who would like to see the CSS Style seperate from the GSAP Javascript. I thought I would give it a try with += className and -= className, but the gsap specific styles like autoAlpha, xPercent, yPercent don't work when housed in an external stylesheet. Can anyone suggest a clean way where there is little if no reference of styles in my GSAP javascript while also accounting for "gsap specific styling variables"? To illustrate what I am trying to do, I have two codepens. GSAP Transform with External xPercent and yPercent (the gsap transform doesn't work for xPercent and yPercent here; I thought gsap might be able to parse this and still use the xPercent and yPercent) http://codepen.io/jstafford/pen/WQLpQv GSAP Transform with xPercent and yPercent in TweenMax call (traditional way: works, block is centered) http://codepen.io/jstafford/pen/xwmqwp
  23. Hi Blake, thanks for your prompt response. I was toying around with this some more and realized that a simple resize of the banner container height after changing the window width (containes my greensock stuff) was the trick. Once it resized, my animations followed without any need for saving the progress. It was seemless.
  24. I have an animation I am working on that is a master timeline with some nested timelines appended inside. My question is the following: When a window resize event occurs, my animation is off b/c it is using the initial window width and height parameters used in calculating things responsively. When the window.resize event is triggered, how could I dynamically resize the animation without messing up its sequence? I have read a little about the invalidate method but still unsure if this is going to be the right way to go for me. Thanks.
×