Jump to content
GreenSock

PointC last won the day on June 18

PointC had the most liked content!

PointC

Moderators
  • Posts

    4,959
  • Joined

  • Last visited

  • Days Won

    400

Everything posted by PointC

  1. PointC

    SVG line animation

    HI Meds86 Welcome to the GreenSock forums. There are a few problems to correct, but we can get you there. 1. You need to load TweenMax and the DrawSVG plugin. You can click the little gear icon in the JS panel and load your scripts. ...or the easiest thing to do is fork this GS demo which loads all the plugins for you. http://codepen.io/GreenSock/pen/OPqpRJ 2. I see in your CSS that you're trying to add a stroke to everything which can work, but you're targeting a class of .path rather than the paths in the SVG. You can target all of those like this: #Layer_1 path { stroke-width: 3px; stroke: red; } 3. The last thing is the size of your SVG (93x93). Adding a 3px stroke on that is going to look pretty thick. I forked your pen and changed it to a 0.5px stroke so you can see that everything does indeed work, but probably not the result you were looking for. http://codepen.io/PointC/pen/KrmKQB You'll probably need to rework your SVG a bit to get what you want here. I'd recommend starting at a larger size when you do that. Hopefully that helps a bit. Happy tweening and welcome aboard.
  2. Hi gilesht Welcome to the GreenSock forums. The x and y is going to be relative to the SVG rather than screen size. Unless you tell it otherwise, the SVG will stretch out to 100% of the available width. In your example, you're setting the width to 600 and the height to 207, but try this: remove the width and height from the SVG and change the window size. You'll see that the SVG will shrink and grow to 100%, but your animation will still play perfectly at any window width. I made a CodePen as an answer to another question a few months ago, but it could also be helpful here. It has the same SVG displayed three times at different sizes, but the same x/y animation plays in all three and the positioning is correct at each size. http://codepen.io/PointC/pen/QyjMaW Hopefully that helps a bit. Happy tweening and welcome aboard.
  3. Hi Ritch.b You can't just drop a div ID or class in there because the animation engine needs a number, but you can easily get that number by figuring out the offset from the top. // via jQuery $("#yourElement").offset().top // or plain JavaScript document.getElementById("yourElement").offsetTop I've made a simple CodePen for you to see how that could work. http://codepen.io/PointC/pen/LkyPvv Hopefully that helps. Happy scrolling.
  4. Hi phantomboogie That quick flash can be eliminated by setting the visibility of your SVG to hidden in your CSS. Then you can bring it back via a set() of the autoAlpha to 1 before animation. // hide it #yourSVG { visibility:hidden; } // bring it back right before the animation TweenMax.set("#yourSVG", {autoAlpha:1}) Hopefully that helps. Happy tweening.
  5. ha! Of course fromTo would be better. What was I thinking? I probably shouldn't be answering questions before a morning dose of caffeine.
  6. Hi resting Welcome to the GreenSock forums. I'm not sure I understand your question, but based on your pen, you want box1 and box2 to move 200px and then you want box 1 to move exactly the same way again? If that's what you want, you have some options. You could set() box1 back to a position of 0 and then animate it 200px again. I'd probably use clearProps to clear everything from box1 and then you can animate it again. Either way will create a jump back to an x position of 0. t1.to(b1, 1, {x:200}) .to(b2, 1, {x:200}) .set(b1,{clearProps:"all"}) // this will jump it back to 0 .to(b1, 1, {x:200}); Here's a fork of your pen. http://codepen.io/PointC/pen/wWJNEz If I've misunderstood what you meant, please add some more details to your question. Happy tweening.
  7. Hi swampthang Looks like you're loading an older version of TweenMax (1.14.2). I switched your pen to 1.18.5 and it worked fine for me. You also don't need to load the AttrPlugin as it's already loaded with TweenMax. Edit: dang it Blake. Mr. Fast Typist.
  8. o.k. - since you want them all to animate on the y axis in the same way, we won't need to use the cycle property. You can go back to a regular stagger. Here's the code: tl.staggerFrom(".box", 1, { y:400, autoAlpha:0 },3) tl.staggerTo(".box", 1, { y:-400, autoAlpha:0 },3,2) tl.from(".lastBox", 1, {y:400}) My revised pen: http://codepen.io/PointC/pen/GqWxgj/ Does that help? Happy tweening.
  9. In that case, you'd want to take advantage of the cycle property. tl.staggerFrom(".box", 1, { cycle:{ x:[ -400,400,0,0 ],y:[0,0,-400,400] } },3) tl.staggerTo(".box", 1, { cycle:{ x:[ 400,-400,0,0 ],y:[0,0,400,-400] },autoAlpha:0 },3,2) tl.from(".lastBox", 1, {x:400}) Here's a revised pen: http://codepen.io/PointC/pen/jrBqWV/ More info about cycle and stagger: http://greensock.com/docs/#/HTML5/Sequencing/TimelineMax/staggerTo/ Happy tweening.
  10. An easy way would be to take the last image out of your stagger tween and animate it by itself when the stagger has completed. Here's a revised pen: http://codepen.io/PointC/pen/aZJdxE/ Happy tweening.
  11. Hi cwiens@shutterfly.com I'm not sure if you have a typo in your question or that's the actual code you're using, but thought I'd look at the obvious first: //you have var mainTimeline = new TimelineMax(repeat:2, repeatDelay:20); // but it should be var mainTimeline = new TimelineMax({repeat:2, repeatDelay:20}); Other than that, I'd have to see a CodePen to be of any help. Happy tweening.
  12. Yeah, it's not always obvious that you need that file and it seems hard to find sometimes. It's used to trigger tweens or sync them to the scrollbar. You are correct - it is a ScrollMagic file. Here are the docs. http://scrollmagic.io/docs/animation.GSAP.html Happy tweening.
  13. I still didn't see the morphSVG plugin in your demo so you need to add that and you'll need one additional file as well. Click the little gear icon on the JS panel and add each of these to your demo and it all should work correctly. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js Note: you may have to add some margin below the SVG so the trigger can be reached on scroll. Hopefully that helps.
  14. Hi samsam Welcome to the GS forums. Your pen isn't loading the Draggable plugin. It might be easiest for you to fork this GreenSock pen: http://codepen.io/GreenSock/pen/OPqpRJ It loads everything including the member plugins so you can give them a test drive. Just an FYI - you don't need the head elements or body tag on CodePen - it takes care of that for you and the JavaScript should go in the JS panel down below. Hopefully that gets you started. Happy tweening and welcome aboard.
  15. Hi jeansandjacktrequired Welcome to the GreenSock forums. This sounds like a good job for the staggerTo() method: http://greensock.com/docs/#/HTML5/Sequencing/TimelineMax/staggerTo/ You can give all of your images or divs the same class and then easily stagger them on and off screen. By using the same class for all of them you avoid all the additional variables and you can add/remove images without having to make any changes to the animation. I made a really simple pen so you can see how this could work for you: http://codepen.io/PointC/pen/XKMbzY/ Hopefully that helps. If you have any additional question, please make a simple CodePen for us so we can more quickly find the problem and/or offer suggestions. Here's how to make a CodePen demo: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Happy tweening and welcome aboard.
  16. Hi Ritch.b You've got a few things to correct here. First, the morph plugin isn't loaded in your pen. You can load the CodePen version with this link: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js The next problem is setting up your timeline: //switch this var menurb = new TweenMax(); //to this var menurb = new TimelineMax(); If you make those changes, you will see a morph-like animation, but I don't think this will give you the results you're probably looking to achieve. Your #combine path is an exact copy of the other two groups only with a black fill instead of blue. The other two groups are made up of 10+ paths with classes of .st0 and .st1. You're animating each of those little paths into your #combine path so this isn't ideal. As I mentioned, you'll see a something happening, but it looks more like a jumbled blob than an actual morph. MorphSVG works path to path so you want a corresponding end path for each start path to get a nice animation. Your SVG is a bit confusing too. You've got classes of .st0 and .st1 as well as group IDs of #st0 and #st1 so it's a bit hard to follow. The .st0 class is also applied to the #combine path and then you're morphing the .sto and .st1 class into the #combine path so it's trying to morph into itself. I'd recommend using more meaningful names to make your work a bit easier. I know AI spits out SVGs with generic names like that, but you can fix them manually. With the two start groups having the same shape as the combined end path, I'm not sure what the desired end result is here either. Hopefully this helps a little bit. I'd offer more, but I'm not 100% sure what you're trying to make happen here. Happy morphing.
  17. Hi ErraticFox Welcome to the GreenSock forums. It's a bit difficult to say what the problem might be without seeing some code. To get you the best answers, we ask that you create a CodePen demo for us. Please follow the link below to see about doing that. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Once you have that available, everyone around here will be happy to assist you. Happy tweening.
  18. Hi iamacatperson The easiest way to make that happen is by adding a delay to the timeline: tlAnim = new TimelineMax({paused:true, delay:0.5}); Happy tweening.
  19. Hi Vector You can force the tweens to initially render and record everything by jumping to the end of your timeline and then immediately back to the beginning. Once you've created your timeline, you can just do this: tl.progress(1).progress(0); That should get everything ready for you and eliminate that first run stutter that you mentioned. Hopefully that helps. Happy tweening.
  20. Hi Dimotro Welcome to the GreenSock forums. That's happening because you have your fill initially set to none in your CSS. So the tween didn't really having a starting point for the color fade in. You can fix that by setting your fill to transparent in your CSS and it should work just fine for you. //switch this .st5{fill:none;stroke:#E0B03B;stroke-miterlimit:10;} // to this .st5{fill:transparent;stroke:#E0B03B;stroke-miterlimit:10;} Hopefully that helps. Happy tweening.
  21. Hey Dipscom You just need a slight change to get the expected behavior: // switch this tl.add("Start") .add(tl1, "Start") .add(tl2, "Start") //to this tl.add("Start") .add(tl1(), "Start") .add(tl2(), "Start")
  22. This thread has taken an unusual turn. What is happening here? I'm amused and confused. I'll be in my lab inventing a time travel machine so I can somehow warn myself not to look at that picture.
  23. Hi Visual-Q Sounds like you're looking for onCompleteParams. From the docs: onCompleteParams : Array - An Array of parameters to pass the onComplete function. For example,TweenLite.to(element, 1, {left:"100px", onComplete:myFunction, onCompleteParams:[element, "param2"]}); To self-reference the tween instance itself in one of the parameters, use "{self}", like:onCompleteParams:["{self}", "param2"] // this should work for you var titleTextAnimation = new TimelineMax( {onComplete:removeElement, onCompleteParams:[animationContainer]}); Hopefully that helps a bit. Happy tweening.
  24. Hi Art2B Have you tried setting force3D to false? Please see if this works for you: TweenMax.to('.holder', 2, {scale: 3, top: 250, left: 300, ease: Power4.easeOut, force3D:false}) More info about force3D: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/ Happy tweening.
  25. A GSAP tale: One goofy guy’s odyssey from knowing nothing to knowing just enough to confuse himself. (This is crazy long so feel free to jump to the epic conclusion). Greetings fellow GreenSockers. The end of this week marks the one-year anniversary of my first post on the forum so I thought I’d take the opportunity to share my 12-month story and hopefully encourage others to jump into the conversations around here. Maybe you’ll recognize yourself in some of the things I’ve experienced. My quick history in a nutshell Web design and coding is a second career for me. After 15 years of owning and operating a photography studio and processing lab (back in the film days - yup - I’m old), the digital camera came along and changed that industry, which necessitated a new career for me. I shifted to video production, which led to motion graphics and finally to web design. Our little agency now offers all those services. The web design clients never needed anything fancy so JavaScript took a back seat to HTML & CSS only sites for a number of years. JavaScript & GSAP: false starts and other obligations I first discovered GSAP a few years ago, but only tried it briefly. It looked cool, but with the time obligations of field video work and motion graphics jobs, it wasn’t something I could work into the schedule. Besides that, it was JavaScript – too complicated I thought. I knew JavaScript was the third piece of a good web designer’s skillset along with HTML and CSS, but I always convinced myself that I didn’t have the time and the sites we built didn’t need it. JavaScript Books + Classes = Fail I did make a few attempts at reading some JavaScript books and working through some online tutorials, but it just never ‘stuck’. Maybe the examples were too theoretical and dry or they were the wrong books and classes. I really don’t know, but I abandoned the learning process a number of times. Cut and Paste mentality Why did I really need to learn anyway? You can just Google what you need, cut and paste some code and presto – you’ve got some working JavaScript or jQuery. I only understood a small portion of what I was cutting and pasting, but hey… it worked so the problem was solved. That’s how I operated for quite some time. What’s a loop? What’s an array? What’s an object? Who cares? Wait a minute. This is ridiculous. Last spring, I was remodeling our company website and I had all these grand visions about making things move and behave in certain ways. Googling for code just wasn’t cutting it. I suddenly felt stupid. “This is ridiculous!” I thought. I should be able to learn how to write my own code. Oh yeah, I remembered that GreenSock thing I had looked at a few times and abandoned. That might work. Maybe I could actually learn how to use it this time. I become a forum lurker I started lurking in the shadows of the forum. After reading a lot of posts, I saw people asking many types of questions from simple to crazy complicated (at least to me). Two things I noticed were that every effort was made to find an answer (no matter the difficulty level of the question) and not one post was condescending or snarky. That’s quite rare on the ol’ interwebs, isn’t it? Hmmmm…maybe I’m in the right place. Oh boy… time to ask a question of my own One of the great things about learning GSAP is you’ll also pick up a lot of other JavaScript and/or jQuery along the way. I kept reading and practicing with some simple tweens, but now I had a question. Dare I post? I suppose, like many others, I feared looking like an idiot even though the forum members and moderators seemed quite nice and helpful. I do several dumb things every day so you’d think I’d be used to it by now. Oh well, here goes. My first question had to do with the indexOf() a Draggable snap array. Within 30 minutes, Diaco and Rodrigo had posted great answers and neither one called me stupid! Yay – how cool. I get hooked on GSAP and the forum About that same time, I decided our company should discontinue on-site video production and switch to studio only filming. I got tired of lugging loads of video gear in and out of buildings – it’s quite tiring and as I mentioned earlier – I’m old. This freed up some time and I decided to dedicate that time to learning GSAP and maybe, one day, even helping others. It wasn’t too long and I actually knew the answer to a forum question. I posted some information and wow – a little red indicator lit up on my control panel. Someone liked something I wrote. How fun – I’m hooked. Carl makes direct contact I continued to learn and experiment. I posted a few additional questions of my own, but I tried to answer more than I asked. If someone posted a question for which I had no answer, I tried to look it up in the docs and figure it out. Most of the time I was far too slow and Jack, Carl or one of the mods would already have the answer posted before I was done reading the question, but it was an interesting way to learn. I did sneak in a few good answers, which led to a private message from Carl. He thanked me for participating and helping in the forums. I thought it was pretty cool that a super smart guy like Professor Schooff would take the time to do that for little ol’ me. My decision to dedicate time to the platform and forum was reinforced. http://i.imgur.com/hdaB73Y.jpg Blake and I have a conversation I don’t recall if it was a back and forth in a forum post or a private message conversation, but Blake told me something that, of course is obvious, but it stuck with me and is important for all of us to remember. He mentioned that we all enter this learning process knowing nothing. If someone of Blake’s considerable skill level can be humble enough to remember first starting out in code, there may be hope for me after all. I guess if you think about it, there was a time when the simple concept of a variable was brand new to all of us. We’re not born with these abilities. They’re learned and we’re all at different points on the educational path. Never feel stupid for not knowing something. Moderator Promotion Throughout the last year, I’ve continued to learn and study both GSAP and JavaScript. Some of those books I abandoned in the past even make sense now. I’ve tried to be active in the GS community and answer as many forum questions as possible. If I’ve answered a question of yours, I hope you found it somewhat helpful. I’ve cranked out some fun CodePens and finally started a Twitter account to tweet them out. I am nowhere near an expert with GSAP or JavaScript, but I know so much more than I knew a year ago. Apparently I know enough to be entrusted with a forum promotion to Moderator status. I’m honored to be included on such an amazing team. 12 months down – what’s next? My agency duties are still numerous so I can’t dedicate full time to coding, but it remains something to which I’m committed and thoroughly enjoy. I started this 12-month GSAP journey just wanting the ability to write my own code rather than cutting and pasting the work of others. I’m confident I have achieved that, but I still have days when a simple piece of code just won’t coalesce in my brain and that can be frustrating. I guess we all have those days, right? I make several mistakes every day, but that’s o.k. too. I learn a lot more from my screw-ups than I ever do when it all goes right on the first try. I plan to keep learning and getting better and when I get stuck, I’ll be able to get an answer from this amazing community. I’ll continue to give back to the GS community by answering any questions that are within my abilities to do so. The super mods: Jonathan, Blake, Diaco and Rodrigo Thank you to my fellow moderators. You guys rock and have taught me so much. @Jonathan – if there is a browser bug, quirk or special fix that you are not aware of, I’ve yet to read about it. Your knowledge has helped me fix many pieces of code before they even became a problem. Plus, if I ever have a question of top/left vs. x/y, I know who I’ll ask. @Blake – if I could be half as good at coding as you, I’d be a very happy guy. Your work always teaches and inspires me. I don’t think you’re allowed to ever stop posting on the forum or we may all show up on your doorstep and ask questions. @Diaco – your code is always so concise. I deconstruct some of your pens and am astounded by how much you squeeze out of a few lines. If I made some of your pens from scratch, I’d have 20 variables, 5 loops, 12 tweens and 80 lines of code. You do the same with two variables and 4 lines of code. Amazing stuff. @Rodrigo – when searching the forum, I often land on one of your past posts and learn a lot. Your knowledge is vast and I wish you had more time to post around here. Your ninja skills are incredibly strong. Our superhero leaders @Carl – I’ve participated in several online forums ranging from graphic design to 3D to video production, but the GreenSock forum is the best and a big part of that is you. You not only provide great answers, but you do it in clever ways with just the right amount of humor thrown in here and there. The collection of videos you’ve made is invaluable and should be mandatory viewing for anyone interested in GSAP. I’ve seen you monitoring the forums at all hours of the day and even on weekends. When you get any sleep I’ll never know, but I thank you for your dedication and sharing your knowledge. @Jack – how you had the vision to start GreenSock and write the first version of the animation platform I can only imagine. I’m glad you did because GSAP is such an amazing collection of tools. The friendliness of the community is definitely following your lead. I don’t understand a lot of what you talk about sometimes, but I know enough to be amazed by your brilliance and talent. You call yourself just a guy who geeks out about code, but you’re more than that. You’re a smart and generous innovator who’s created a special brand and place on the web. I think I can safely speak for the community when I say we all appreciate the time and effort you put into helping us make beautiful and high-performance animations. Thank you sir. The epic conclusion. Well… maybe just a regular conclusion. If you didn’t read the whole post, I don’t blame you. It’s ridiculously long and I’m just some guy you don’t know so I’ll wrap it up with this bit of advice. Whether you’re a genius or feel like an idiot, it doesn’t matter. Try to learn one new thing each day and before you know it, a year will have passed and all those little bits will add up to new skills and abilities. If you’ve never posted on the forum, please jump in and participate. The more voices we have around here, the more we all benefit. If you need an answer, please don’t be afraid to ask a question. Believe me, I’m just some goofy guy in front of a computer. If I can learn this stuff, so can you. As I begin my second year in GreenSockLand, I’m looking forward to learning more, seeing everyone’s work and answering as many of your questions as I can. This is an amazing community and I encourage anyone reading this to set up an account and get involved. My best to all of my fellow GreenSockers. See you around the forums. Edit and Update (July 2020): I just made it to five years of hanging around the forum and you can read the continuation of my journey here. motiontricks.com Finally, without further ado, I introduce you to motiontricks.com - Craig (PointC) PS I made a little CodePen to commemorate my one-year forum anniversary. It’s how I felt before and after discovering the power of GSAP. Enjoy.
×