Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by benjino

  1. Thanks! I was using viewportChecker and animate.css but today the latest version of Chrome for OSX wasn't cooperating. I'll try one of these.
  2. Are there any posts or howtos on animating an element when it enters the viewport? So, scrolling the page, it enters the viewport and then animates. I’ll figure out an animation but would like to know how to have an element only animate when it enters the viewport on scroll.
  3. Alright, thanks. I see what I wasn't getting. I did try {fill:none},{fill:black}. I forgot to put quotes around values. Thanks for clueing me in on this!
  4. I'm trying to draw the stroke, then fill the shapes. What am I missing here?
  5. Yes you can close this ticket, I can now tool around with it using timeline where if i have any issues there I'll take up in a new post.
  6. Sort of. I am not thinking that the photo (img) travels the path of the animation. I am thinking a photo on top of a animating svg, where the svg animates behind the photo with the svg being larger than the photo—the photo remains static on top of the animating svg.
  7. Is it possible to stack an img on top of an animating drawSVG? Just looking for a simple yes or no at the moment. I've got something working so far…
  8. You can disregard this post, or delete it. I solved the problem, a simple problem.
  9. I have this pen working and have added the code to WordPress. The SVG is appearing but not drawing. Sorry, I don't have a live example worked up yet. I've added all the code where it needs to go. There is an existing GSAP animation so I plugged in the JS in the same file, the CSS in the stylesheet, and the drawSVG plugin link where the Tweenmax link is. I've also added the CSSPlugin link, and am not sure if that is needed. I'm using the <path> element only. The SVG image code is placed in a WordPress text widget running the newest version of WP. Funny that the image will show on the front-end but when I navigate back to the text widget the SVG code does not remain in the text widget. When I inspect for the SVG, it's code is in the html, yet there is not JS error in the console. What could I be missing? Are there any known issues with WordPress and drawSVG?
  10. rect is clearly less code and that's cool, but is there any difference with rect or path, is one better than the other for performance, cross-browser compatibility, etc.?
  11. How do you change the position of the start point of each shape? Any clue on how to do that? I changed the drawSVG to 100% 100% and can get it to go backwards, but how do you pinpoint where you want to have a starting point? Is there a way to do that?
  12. Thanks for your input Mikel. I've finally got something working from output to SVG. I'm learning about SVG code as I go here, so far with SVGs I've only ever output them for web as static (non-animated). My artwork had to be completely reworked. Initially I had fills from creating outlines from typeface, of course those don't work at all. Then from the fills I deleted the inner outline of the inner & outer outlines, and used the 'Align Stroke to Inside' as the stroke which created 'path' elements in output to SVG code. Still didn't work. Must not have liked Align Stroke to Inside. Then I completely reworked the artwork with stroked shapes (no fill) with Align Stroke to Center, and that finally works. I created each stroked shape the same way, however the smallest shape is a 'path' and not a 'rect' for some odd reason. In the output to SVG it made the two bigger shapes 'rect' elements and the smallest one a 'path' element. Quirky. Is there a 'path' to 'rect' element converter? I can choose "rect, path" as the elements but I'd rather have the smallest shape a 'rect' as well. Anyone have this problem with output? Is there a problem with it the way it is in the current pen? Also, why don't I have a Run button in my Codepen account? It will show here in this forum, but not on the pen in Codepen. Just refresh the page to see the animation again for the time being.
  13. I updated the graphic to be strokes, not a fill, and updated the pen with the new SVG code and nothing is happening. I've tried using rect as the element, currently it's path, and not sure which to use. I think path? Another thing, I'm not super experienced with codepen and am wondering why there is no Run button in my pen. Is that a feature that comes with a Pro level codepen account?
  14. Ok, got it. I see what is different. I need to recreate these as strokes. Thanks.
  15. I added the pen of my SVG. It was saved at SVG from Illustrator. Illustrator > File > Export > Export as…
  16. I can't find anything on how to create the SVG file for drawSVG strokes. I have it in Illustrator, I know how to output SVGs, but the file code is different from what your tutorial shows. What is the way to setup your SVG file from Illustrator?
  17. Thanks Rodrigo. I worked it out with the the first option you suggested.
  18. Here's the site where you can see it in action: http://siegfriedmedia.com I've been trying a number of different combinations and can't find the right one to get rid of the slight page jump at the end of the 'yoyo' of the first three-line h1 that appears. After that the next three-line h1 and multiple line paragraph underneath it appear, and then the arrow appears. I don't think it's the arrow that is causing this, I think it is the paragraph with id=intro3 that is causing it? I'm not sure and I'd like to have the slight page jump not happen. You won't see the page jump I'm talking about unless you slide the page up a little bit. It is not happening on mobile but on desktop it is. It matters because if you start scrolling the page before the entire intro has gone through its cycle and you're down the page a bit you will experience a small page height jump. The codepen is the HTML, CSS, and JS that is in the site example.
  19. I like your HTML suggestions. I finally did it this way. <div class="homeintro"> <header id="intro1"> <h1>1st intro bit of text</h1> </header> <article> <h1 id="intro2">2nd intro bit of text</h1> <p id="intro3">Change a character in each of the IDs above to see the text show on the screen. This is the third intro bit of text which is a paragraph that has many more words than a headline element, making it more substantial of a block level element affecting height when in reference to displaying or not displaying it along with #intro2, as in display: block and display: none. With this javascript we have a swapping of "block" and "none" with the selector "display." Without this display rule swapping all block level elements remain as visbility:hidden/visible, effectively causing the page or page section to jump as elements are visible or hidden. Swapping by display:block/none allows for a constant page section height as each block level element contributes to the height of the section. Overall, this only works if both header elements wind up being the same height due to their number of characters.</p> </article> </div> jQuery(document).ready(function($){ window.onload = function() { //when js kicks in show TweenLite.set(".homeintro, .arrow", {visibility:"visible"}) var tl = new TimelineLite() .set("#intro1", {display:"block"}) //bring in first item and then have it disappear tl.from("#intro1", 1, {delay:0.8, scale:0.5, autoAlpha:0, repeat:1, repeatDelay:3, yoyo:true}) //swap one for the other to avoid page jump .set("#intro1", {display:"none"}) .set("#intro2", {display:"block"}) //stagger in next 3 and have them remain .staggerFrom("#intro2, #intro3, .arrow", 1, {delay:0.5, scale:0.5, autoAlpha:0}, 3) } }); See pen: http://codepen.io/benjino/pen/gpRLEo
  20. I got it to work the way I want by doing some tricky swapping and alternating of display and visibility rules. Now there is no jump in the page section, it just flows from one to the other. Do you see a more efficient way to write this javascript than what I have done? I also tried it with recoding the HTML, putting both h1 elements into one h1 and instead giving each a unique span id. But doing this caused the 'scale:0.5' attribute to not work, instead causing a nice fade in/fade out transition, so I brought the HTML back to what it was with two h1 elements. I'm not sure having two h1 elements there is good for SEO, would you happen to know about that? See pen: http://codepen.io/benjino/pen/gpRLEo
  21. Hmmm, that's kinda hard to reconstruct there with WordPress. I could share the website?
  22. I think I may be catching on. This worked. The only thing I don't like about the setup is that it causes the page to jump a little because I'm hiding and displaying dom elements. Is there a way around this doing what I'm doing here other than using Flash? jQuery(document).ready(function($){ window.onload = function() { //when js kicks in show the .demo TweenLite.set(".homeintro, .arrow", {visibility:"visible"}) var tl = new TimelineLite() //bring in first item and then have it disappear tl.from("#intro1", 1, {delay:0.8, scale:0.5, autoAlpha:0, repeat:1, repeatDelay:3, yoyo:true}) .set("#intro1", {display:"none"}) //stagger in next 2 and have them remain .staggerFrom("#intro2, #intro3, .arrow", 1, {delay:0.5, scale:0.5, autoAlpha:0}, 3) } });
  23. The last block of text comes in and below it is button trigger that causes the page to scroll down to the next section. The button container has a class of .arrow and needs to staggerFrom right after #intro3. I am guessing I need to treat it like #intro1, giving it visibility: hidden in CSS and then do the opposite in javascript. ".arrow" is in a short container below the widget-container that holds #intro1, 2 and 3. I tried a few things and couldn't get it to work.