Jump to content

PointC last won the day on October 30

PointC had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by PointC

  1. Well, it’s been 6 months since I wrote the post that started this thread and it appears to have been read quite a few times. Thank you to all who commented. I’m glad my story has inspired others to get involved in the GreenSock community. Congratulations to Jack and Carl on the continued development of GSAP. The new CustomEase is absolutely astounding! I’m looking forward to all the new goodies that will come in 2017. Also – a BIG thank you for the honor of producing the explainer videos for GSAP and Club GreenSock. It was such an exciting experience and you two were so much fun to work with. Cheers to my fellow moderators - Blake, Jonathan, Diaco, Dipscom and Rodrigo. You guys are so clever and talented. I keep learning more every day by reading your answers and tearing apart your CodePens. I’m truly honored to be included in such a tremendous group. A shout out to the GreenSock community members. Keep learning, asking questions, experimenting and creating. My original advice still stands. If you’ve never asked or answered a question here, please jump in and participate. We’d love to hear from you. I hope everyone takes some time for fun and relaxation over the holidays. See you all around the forum. - Craig
  2. Hi symbolebranding If I understand your question correctly, you want to draw the path from the end to the beginning? If that's the case, you can reverse it like this: .staggerFromTo($elice, 0.5, {drawSVG:"100% 100%"}, {drawSVG:"0% 100%"}, 0.25) Your pen was also missing the drawSVG plugin. This CodePen is a good bookmark. It has all the CodePen safe club plugins. http://codepen.io/GreenSock/pen/OPqpRJ Hopefully that helps. Happy tweening.
  3. This is good reading: https://sarasoueidan.com/blog/svg-coordinate-systems/ Happy tweening.
  4. You can definitely use it with GSAP animations. What's not always obvious is that you need an additional file to make everything work: https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js Here are the docs for that plugin: http://scrollmagic.io/docs/animation.GSAP.html Here's a CodePen that I used as answer for another forum question, but it has all the elements you need for ScrollMagic. You can fork it and mess around with it a bit to get the idea. http://codepen.io/PointC/pen/JROqEA/ Hopefully that helps. Happy tweening.
  5. You'll need to use x when using SVGs, but I recommend using it for everything since you'll get the advantage of sub-pixel rendering. That's especially helpful if you're moving small distances. Here's a terrific post by Sara Soueidan about the SVG coordinate system that should be quite helpful for you. https://sarasoueidan.com/blog/svg-coordinate-systems/ Happy tweening.
  6. Hi cava83 Welcome to the GreenSock forums. That will work fine if you use x instead of left like this: TweenLite.to(balloon, 10, {x:800}); Please keep in mind that 800 in the SVG is units and not screen pixels. Your viewBox is over 3500 units wide so the balloon won't move as far as the div with the logo image in it. Hopefully that helps a bit. Happy tweening and welcome aboard.
  7. Just a slight correction to Carl's post. Dipscom - your special gift is actually in the courtyard of GreenSock Tower North. The people are anxious to see you.
  8. Hi sreid62 Welcome to the GreenSock forums. ScrollMagic is great for that kind of thing. http://scrollmagic.io/ http://scrollmagic.io/docs/ One of our forum moderators (Petr Tichy) has quite a bit of training available for it. https://ihatetomatoes.net/blog/ https://ihatetomatoe...th-scrollmagic/ https://ihatetomatoe...agic-workshop/ If you're looking for ways to create that effect without any other libraries, we had a discussion over here: http://greensock.com/forums/topic/14870-do-i-need-scrollmagic-to-use-gsap/ In particular, check Blake's answer here: http://greensock.com/forums/topic/14870-do-i-need-scrollmagic-to-use-gsap/?p=63860 Hopefully that gets you started. Happy tweening and welcome aboard.
  9. Happy to help. I'm glad you got it all working now. Happy tweening.
  10. PointC

    Section slides

    Hi muuvmuuv Yes - please start a new topic as you start your project and have any GSAP related questions or problems. Happy tweening.
  11. Happy to help - that's how we roll in the GreenSock neighborhood.
  12. PointC

    Section slides

    HI muuvmuuv Welcome to the GreenSock forums. I'm not sure what your current skill level may be, but all of what you're describing should be achievable. We do try to keep the focus of the forum on GSAP related questions and problems though. Since your project seems mostly related to ScrollMagic, I'd highly recommend Petr Tichy's tutorials. He's a forum moderator here, but an expert in ScrollMagic. He's got some free tutorials and some paid training as well. I personally took his ScrollMagic Workshop class and it was well worth it. Here are some links to his site and tutorials. https://ihatetomatoes.net/blog/ https://ihatetomatoes.net/5-days-with-scrollmagic/ https://ihatetomatoes.net/get-scrollmagic-workshop/ Also be sure to look at Diaco's examples that I listed in Post #3 above. You can learn a lot by forking those examples. In answer to your question about starting a new topic - yes - you usually should start a new topic for any GSAP questions you may have. This topic was already marked answered and adding additional questions to it could easily get overlooked. We want to get you the best answers possible so we don't want to miss any of your questions. Hopefully that gets you started in the right direction. We'll be happy to help with any GSAP troubles you may encounter. Happy tweening and welcome aboard.
  13. I didn't see that at first either. Thanks for the video - very helpful. I think what's happening is the SVG and the path inside the SVG have the same ID and you're seeing something strange. I made a fork of your pen and dropped a line element into each SVG rather than the path and it all seems fine to me. In this case, the line (or path) inside the SVG doesn't even need an ID or class since you're animating the entire SVG via xPercent. http://codepen.io/PointC/pen/woRRqb/ Hopefully that helps. Happy tweening.
  14. Hi Jsimer Welcome to the GreenSock forums. There would be a few ways to do that, but I think the easiest would be to add another autoAlpha tween to the timeline with a duration of 5 seconds (half of your main tween duration) and then repeat it once with a yoyo. Like this: tl.to(snow, 5, {autoAlpha:1, repeat:1, yoyo:true, ease: Linear.easeNone}, 0); // note the 0 at the end is the position parameter so both tweens start at 0 You can then set your entire timeline to repeat rather than the snow tween. I pasted your code into a quick CodePen and used a div for the snow since I have no idea what you SVG looks like, but you'll get the idea. http://codepen.io/PointC/pen/81706c8372d6e34b126a32afccd995c8 If you have additional questions, it's best to provide a CodePen so we can see your code in action and make edits. Please see Carl's blog post for more info about that: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Hopefully that helps a bit. Happy tweening and welcome aboard.
  15. Make sure they have the latest driver installed would be the first thing I'd recommend.
  16. Hi ladyRalph That looks like a graphics card issue to me. Could also be a browser bug, but I can't see GSAP being the culprit. GSAP doesn't render anything - it just animates values. I'd have the client check on a few different systems and see if you can isolate it to a particular card and/or browser. Happy tweening.
  17. Ha! I had this sudden Tron-style vision of a death-match between CSS and GSAP.
  18. Hi HappyCoderInLondon Welcome to the GreenSock forums. If I understand your question correctly, it sounds like an image slider with a .png or SVG of an iMac screen in front of it as a mask? Would this be full screen? Is it a fixed size or something that would scale? There would be a number of ways to make that happen. If you search sliders here on the forum you'll find a lot of topics. CodePen also has loads of examples to help you get started. http://codepen.io/search/pens?q=image+slider&limit=all&type=type-pens The best way to get help is to put together a CodePen demo for us. It doesn't need to be the finished product. Just a few simple divs/images and what your desired outcome would be. Editing your live code allows us to give you the best assistance. Check out Carl's blog post about creating a CodePen. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Hopefully that info gets you started. Happy tweening and welcome aboard.
  19. I just looked at your pen again and I think you'll want to use jQuery each() if you're going to have multiple buttons and animations like that. Here's a pen I made in answer to another forum question, but it works the same way as what I think you're trying to accomplish. http://codepen.io/PointC/pen/ALbpPb Hopefully that helps a bit.
  20. Hi mikel I'm not quite sure of the desired outcome here. If one of the divs is animating and you hover over the other button what should happen to the piece that is currently animating? Should it continue? or reverse? or stop? When asking about hovering too fast, I think you're probably looking for the isActive() method. You can use that to only play the animation if it's not already playing. More info here: http://greensock.com/docs/#/HTML5/GSAP/TweenMax/isActive/ If you can give a few more details about the desired behavior, I'm sure we can get you on the right path. Thanks and happy tweening.
  21. Very nice Carl. That's why you wear the cape.
  22. Hi jsweriduk Welcome to the GreenSock forums. You can have different things happen to your button for mouseenter, mouseleave, mousedown and mouseup. I think you'd usually want to stay with a reverse of the timeline for your hover in/out events. Here's an example I made as an answer to another question, but it shows the basics for you. http://codepen.io/PointC/pen/WrjzOa/ Regarding lines turning to an x, you'll find loads of examples on CodePen. Here's an example of that I used for another forum question: http://codepen.io/PointC/pen/XKbEBQ If I understand the last part of your question, I'd recommend staying clear of having an x trigger a new animation unless it's very clear to the user. I think most users that saw a set of lines turn into an x would assume that clicking the x would close whatever they just opened. It would probably be better to have a new button appear when that new panel or image has opened. Just my 2 cents worth on that from a user experience point of view. Hopefully that helps a bit. Happy tweening and welcome aboard.
  23. PointC

    Quick Question

    Hi hacu95 Welcome to the GreenSock forums. You've created an animation fight between GSAP and CSS. Please remove this from line 1of your CSS: *{ transition: 2s all ease-in-out; } It's not usually a good idea to mix CSS and GSAP animations. Once you remove that, it should work correctly for you. Happy tweening.
  24. Ha! I see the next installment of Dipscom's Photoshop Adventures has been published. I wonder if Blake will respond with another new CodePen similar to 'Kim Jong Dipscom'? Nice work Sir Pedro.
  25. Hi neuhaus3000 Do you have a specific GSAP related problem building that or are you just looking for general advice on how to get started? If you're looking for preloader examples, CodePen is loaded with them: http://codepen.io/search/pens?q=preloaders&limit=all&type=type-pens We do try to keep the forum focused on GSAP assistance so if there is something specific with which you need help, please let us know. If you can get something started and supply us with a CodePen, I'm certain we can help you through any difficulties. For more info about creating a CodePen, please visit Carl's blog post. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Happy tweening.