benjino

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?

Thanks Rodrigo. I worked it out with the the first option you suggested.

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.

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

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

Hmmm, that's kinda hard to reconstruct there with WordPress. I could share the website?

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) } });

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.

Right now I have this but will probably play around with things until I get timings just the way I want it. Thanks so much Carl. For those not seeing it all, go to the codepen link and see that a container div was wrapped around the other three, and given visibility:hidden in CSS. Tweenlite.set makes it visible after the page loads. jQuery(document).ready(function($){ window.onload = function() { //when js kicks in show the .demo TweenLite.set(".homeintro", {visibility:"visible"}) var tl = new TimelineLite() //bring in first item and then have it disappear tl.from("#intro1", 1, {delay:2, scale:0.5, autoAlpha:0, repeat:1, repeatDelay:5, yoyo:true}) .set("#intro1", {display:"none"}) //stagger in next 2 and have them remain .staggerFrom("#intro2, #intro3", 1, {delay:1, autoAlpha:0}, 3) } });

Oh, it didn't work at first because the CSS was not applying, it just took a refresh of the browser several times for it to clear.

I'm liking this more, but how is it that the pen you shared is doing the same thing without the ".set" ? Also, when the page loads all of the elements are there briefly, then disappear, then do the timeline sequence. It needs to be blank and then start. var tl = new TimelineLite() //bring in first item and then have it disappear tl.from("#intro1", 1, {delay:2, scale:0.5, autoAlpha:0, repeat:1, repeatDelay:0.9, yoyo:true}) .set("#intro1", {display:"none"}) //stagger in next 2 and have them remain .staggerFrom("#intro2, #intro3", 1, {autoAlpha:0}, 1)

Sort of. #redbox would come in from a scale of 0.5 like the other two. It sort of does that but the text container is still there and pushes down bluebox and greenbox. I need the redbox to go away completely and be replaced by bluebox and greenbox. Not like visibility:hidden, but like display: none so the container goes away and doesn't push down the other two containers. Something a little more like this though but redbox's container needs to not be hidden, pushing down the other two: var tl = new TimelineLite() //bring in first item and then have it disappear tl.from("#intro1", 1, {scale:0.5, autoAlpha:0, repeat:1, delay:2, repeatDelay:0.9, yoyo:true}) //stagger in next 2 and have them remain .staggerFrom("#intro2, #intro3", 1, {autoAlpha:0}, 1) }

Well this is what I'm trying to figure out. Have any clues as to where on Greensock I can look for clues? jQuery(document).ready(function($){ window.onload = function() { var tl = new TimelineLite(); tl.from("#intro1", 2, {scale:0.5, autoAlpha:0}, 2) tl.staggerFrom("#intro2, #intro3", 2, {delay:1, scale:0.5, autoAlpha:0}, 6); } }); Here's my HTML <h1 id="intro1">first bit of text</h1> <h1 id="intro2">second bit of text</h1> <p id="intro3">third bit of text</p>

I have it working and each one comes in staggered as I want, but all three remain. I want the first one to disappear right before the second one comes in. How would I get the first ID to come in but then disappear completely and be replaced by the second, and then the third comes in below it, and those last two remain?

add_action( 'wp_enqueue_scripts', 'centric_enqueue_home_scripts' ); /** * Enqueue Scripts */ function centric_enqueue_home_scripts() { wp_enqueue_script( 'homeintro', get_stylesheet_directory_uri() . '/js/homeintro.js', array( 'jquery' ), '1.0.0', true ); } Here's what I have for enqueueing the the javascript. I am using a Genesis theme and have installed the following in the theme setting's wp footer: <!--CDN link for the latest TweenMax--> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

Well that's how I tried approaching it at first but couldn't find the DOM element. I tried all kinds of combinations using the following code string which is the code string used for the backstretch element for http://srobbin.com/jquery-plugins/backstretch/ and using browser dev tools I couldn't find a class or id for the background image and I can usually find anything. I don't understand how WordPress is implementing it, and it seems to be associated with BackStretchImg but I can't figure out what that is or how the following string causes the background image to be affected: $("body").backstretch([BackStretchImg.src],{duration:7000,fade:1000}); If you look at Scott Robbins backstretch code it is more straightforward of a use of class or id that would be used in this string, but Genesis has it this way and I cannot figure it out. In the CSS body has no background-image, only background-color, and again the image is a transparent png—it is the image that the methods are being applied to. Here's the site in question: http://thekennedybook.com/marketingdev It's pretty cool the way it is now but I still would like to know how to control the scale of the background image like the text is controlled.

Yes, the image is a png with a transparent background, just the island, and it would be nice to see how it would look with it growing from a small scale to the full size and fading in at the same time, then have the text do its thing a second after. I wanted all three, the background image, headline and subhead together in the TweenMax.staggerFrom([ ] { })

This is pretty cool, but initially I was hoping to have the BackStretchImg able to be controlled by it's starting scale as well. Any way to do that?

That is it but it took me a while to notice that I'm using Wordpress so it begins with jQuery(.document).ready(function($) { ...and I just removed this var tn = TweenMax.staggerFrom([headline, subhead], 2, {scale:0.5, autoAlpha:0, paused:true}, 3); ...and replaced it with this below the function startThings(), like this: jQuery(document).ready(function($){ window.onload = function() { //call the function startThings two seconds after the window.onload event TweenLite.delayedCall(1, startThings) } function startThings() { $("body").backstretch([BackStretchImg.src],{duration:7000,fade:1000}); tn.play(); } var headline = document.getElementById("headline"), subhead = document.getElementById("subhead"); TweenMax.staggerFrom([headline, subhead], 2, {delay:3, scale:0.5, autoAlpha:0}, 3); }); ...and now it works the way I wanted it too! Thank you so much!

I'm trying to incorporate a jQuery string into the following TweenMax and am not even sure if I can do this. I'm using Scott Robbin's backstretch and want to add it to the following string, keeping it but making it work in the string below: TweenMax.staggerFrom([headline, subhead], 2, {delay:2, scale:0.5, autoAlpha:0}, 3); Here's what I have working so far but I can't find a way to delay the backstretch. I've tried using .delay() on the backstretch string but that isn't working and would rather find a way to add it to the TweenMax.staggerFrom string. Would I use .getSelection() to add it? // wait until DOM is loaded jQuery(document).ready(function($){ $("body").backstretch([BackStretchImg.src],{duration:7000,fade:1000}); // wait until window is loaded (images, links etc...) window.onload = function() { var bg headline = document.getElementById("headline"), subhead = document.getElementById("subhead"); TweenMax.staggerFrom([headline, subhead], 2, {delay:2, scale:0.5, autoAlpha:0}, 3); }; });

So what is better to use in my case here? opacity:0.3 OR autoAlpha: 0.3 ?

Ok Carl thanks! That finally solved the issue. I thought that jQuery was inside the Greensock folders the whole time, that's why I didn't think of adding it.

Ok Carl, that finally solved the issue. I thought that jQuery was inside the Greensock folders the whole time!

With the new file I've created I've restructured it to pull in a separate .js file for: // wait until DOM is loaded $(document).ready(function(){ // wait until window is loaded (images, links etc...) window.onload = function() { var headline = document.getElementById("headline"), subhead = document.getElementById("subhead"); TweenMax.staggerFrom([headline, subhead], 1, {delay:1, scale:0, opacity:0.3}, 2); }; }); This doesn't work. But, when I remove the following code it works! $(document).ready(function() { }); I've even just now tried pulling in TweenMax from cloudflare and it it works with the $(document).ready(function() removed. <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/TweenMax.min.js"></script>

When it works it works on my iPhone. When I take out … $(document).ready(function(){ }); …from the code you shared, it works. I even created a new html file and reuploaded it thinking there was some hidden character in there corrupting something, and that didn't fix it. I'd buy the Commercial license but I can't even get it to work with these basic, fundamental installations. Shoot, I even added the absolute URL to the minified folder and that didn't help.