Jump to content

PointC last won the day on June 18

PointC had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by PointC

  1. PointC


    Hi dyna1118 Your pen wasn't applying the CSS because there was a stray <style> tag in the 'Stuff for the Head' panel. You had this: <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script><style> // this was the problem <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/plugins/CSSPlugin.min.js"></script> The easiest way to load JavaScript on CodePen is to click the little gear icon on that panel and load what you need from there. You also don't need to load the CSS plugin as it's already loaded with TweenMax. Happy tweening.
  2. PointC

    Swinging Rope ?

    As Carl mentioned, you've got an old file loading and it's still there. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.7/TweenMax.min.js"></script> // remove this You also still have all the extras in the HTML panel. You don't need the body tag or head elements. All you need is this: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="21.7px" height="206.7px" viewBox="0 0 21.7 206.7" xml:space="preserve"> <style type="text/css"> .sqone{fill:#3E53A4;stroke:#000000;stroke-width:2;stroke-miterlimit:10;} </style> <rect class="sqone" x="1" y="1" width="19.7" height="204.7"/> </svg> Make those changes or fork Carl's pen and everything will work just fine.
  3. Hi qarlo I think this thread can answer your question: http://greensock.com/forums/topic/14323-speed-of-responsive-animation/ Happy tweening.
  4. Nope - GSAP is not dependent on jQuery at all. You can remove it. The reason your code is breaking when you remove it is because your hide & show functions are relying on jQuery to check the width. You can change those to vanilla JavaScript like this: // change this if ($(document).width() > 933) // to this if (document.body.clientWidth >933) If you're trying to get away from jQuery, here's a website you may find useful: http://youmightnotneedjquery.com/ Happy tweening.
  5. Wow! Now that's a solution. And that fellow forum members is one of the big reasons why GreenSock is such a special company and GSAP is an amazing platform. I cannot imagine that kind of service and attention anywhere but here. Not that you have to be a Club member to get answers here in the forum, but it's not a mystery why so many people choose to join Club GreenSock and get access to the incredible bonus plugins. Well done Jack.
  6. Hi Aleksei Welcome to the forums. Unless 'none' is a variable, there is a slight error in your set() code. You'd want: TweenMax.set("."+type, {display:"none"}); In this case though, I think autoAlpha could work well for you. It's a combination of opacity and visibility. Once opacity hits 0, the element is automatically set to visibility:hidden. It's quite handy for this type of situation. TweenMax.to(".plate", .3, {autoAlpha: 0}); You can read more about autoAlpha here: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/ There is a search button on the upper right. Just click the little magnifying glass and you can search for whatever you need. Hopefully this info helps a bit. Happy tweening.
  7. Hi d1ch0t0my If I set force3D to false, it seems fine to me in Chrome. Please give this a try: tlmenu.fromTo(menubox, 10, {scale:1, transformOrigin:"50% 50%"}, {scale:30, transformOrigin:"50% 50%", force3D:false}); More info about force3D can be found here: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/ Happy tweening
  8. I add a 'back to top' button to a lot of my sites and this is one of those effects that would be better with a single tween rather than a timeline. You won't have to worry about seeking and replaying a timeline. I'd just switch the action in your click function to a tween: TweenLite.to(window, 1, {scrollTo:{y:0}, ease:Power2.easeInOut}); Hopefully that helps. Happy scrolling.
  9. That is great Blake! I just wanted to take a moment and thank you for hanging out here on the forum. I can honestly say I've learned just as much (if not more) by reading your posts and deconstructing your pens than I have by reading books and viewing online tutorials. You are truly an amazingly talented coding rock star and we're lucky to have you as an inspirational teacher around here. Thank you Blake.
  10. Hi TELLO Welcome to the GreenSock forums. I think rather than trying to change the duration on click, this would be a really good chance to change the timeScale(). Here's a quick pen showing this option in action: http://codepen.io/PointC/pen/VjaXYd/ Here's some reading about timeScale() http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/timeScale/ Hopefully that helps a little bit. Happy tweening.
  11. I didn't see anything with a green background either. You mentioned a (bg) and you do have a div with id of #bg, but it looks like it has a gray background. It doesn't currently show because the left and top positions are not set. It doesn't have anything to do with the Morph plugin. If you change your CSS, it will show correctly. #bg { background-color: #666666; position: absolute; width: 100%; height: 100%; left:0; // this was missing top:0; // this was missing } Hopefully that helps. If that wasn't what you were referring to, some more details and a simplified demo would be great. Happy tweening.
  12. Hello OSUblake Welcome to the GreenSock forums. Could you please make a reduced demo for us.... hey wait a minute. Sorry, I got confused as you so rarely start a topic. I think that's a pretty cool idea and could come in quite handy. We certainly see a lot of questions about sliders around here and this could make those quite a bit easier. I'll give a +1 to this idea. I'm anxious to hear what Sir Jack of the House Doyle has to say.
  13. That's happening because of the transform of the path inside the mask. The mask hasn't moved, but the path inside it has. Simply remove that transform and you'll be all good to go. http://codepen.io/PointC/pen/JKGezz Happy tweening.
  14. Hi phillip_vale Your pen had some errors so I just made a new one for you. http://codepen.io/PointC/pen/QEyxLY/ Hopefully that helps a little bit. Happy tweening.
  15. You're very welcome. Glad to hear you're enjoying GSAP. This is an incredible community of helpful people so please don't hesitate to post any additional problems or questions. Reduced demos always appreciated. Happy tweening.
  16. The 'i' is the index of that element. You can use 'i' or 'index' or almost anything you like really, but most of the time you'll see those two. The 'element' is the DOM element that is part of the jQuery object. It's what 'this' will be referring to. We don't actually need them to make this work. You could change the code slightly and get the same result: // change line 1 to this $(".icon").each(function() { // change line 11 to this $(this).hover(makeItWork, makeItWork) Here's some good info that will explain it in detail: https://api.jquery.com/each/ Hopefully that helps. Happy tweening.
  17. Hi Sloan Thrasher Welcome to the GreenSock forums. That's a good question. camelCase should be used for all the hyphenated properties. You just drop the hyphen and make the first letter of the second word uppercase. So font-size becomes fontSize, background-color becomes backgroundColor etc. GSAP can animate any numeric property and can set non-animatable properties. Sounds like you found autoAlpha. That is a combination of opacity and visibility. When you use autoAlpha and you set it to 0, the element is automatically set to visibility:hidden. Handy for many situations, but you can use opacity if you like. scale is just scale if you want uniform scaling or you can use scaleX or scaleY as well. You'll find a lot of great information in the docs for the CSSPlugin http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/ Hopefully that helps a little bit. Happy tweening and welcome aboard.
  18. Hi ohem Just change the morph target to the path name inside the clip-path instead of the clip-path id. Once I did that, it all worked fine. // change this .to("#clipper", 1, {morphSVG:".smoothCircle"}, "endIntro") //to this .to("#clip", 1, {morphSVG:".smoothCircle"}, "endIntro") Happy morphing.
  19. Yeah - there's a lot going on in there. Carl is absolutely correct about the 360 problem. If you change line 206 to this: .to(spinitemstep5, 1, {rotation:"+=360", autoAlpha:1, delay:0.2, repeat:2, transformOrigin:"center center"}) // I didn't look through the whole thing, but anywhere else you have 360, you'd want to change to +=360 it works fine for me. I think the FF problem is coming from the redundant scripts you're loading in CodePen. You're loading TweenMax and TimelineMax. Once I switched your pen to load only TweenMax and jQuery it seems to work fine in FireFox for me. Happy tweenng.
  20. Hi cpshop Welcome to the GreenSock forums. I think this blog post can help you. Lots of great info about perspective: http://greensock.com/css3/ Happy tweening.
  21. Hi phillip_vale You're on the right track with jQuery each(). This will create a separate timeline for each of the icons that can easily play/reverse on hover. $(".icon").each(function(i, element) { var tl = new TimelineMax({paused:true, reversed:true}), desc = $(this).find(".desc"), graphic = $(this).find(".graphic"), shadow = $(this).find(".shadow"); tl.from(desc, 0.5, {ease:Power2.easeInOut, autoAlpha: 0}, "hover") tl.to(graphic, 0.5, {ease:Power2.easeInOut, y: 10}, "hover") tl.from(shadow, 0.5, {ease:Power2.easeInOut, scale: 0, autoAlpha: 0, transformOrigin: "center"}, "hover"); $(element).hover(makeItWork, makeItWork) function makeItWork() { tl.reversed() ? tl.play(): tl.reverse(); } }); In this solution, we use the same function on hover over/out and either play or reverse the timeline depending on its current state. Here's a fork of your pen with the solution I've listed above. http://codepen.io/PointC/pen/yJYwgz/ Hopefully that helps. Happy tweening.
  22. I tested it for you on a couple machines and it looks perfect. I can't reproduce your pixel error in any browsers.
  23. Hi hiytrebla Welcome to the GreenSock forums. That's pretty strange. Could you please make a quick CodePen so we can test it live ? http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Thanks and happy tweening
  24. Hi nickLoffer Welcome to the GreenSock forums. You can use onComplete for the timeline and/or the tweens. Here's a simple example: http://codepen.io/PointC/pen/VjvxzP/ Happy tweening.