Jump to content
GreenSock

PointC last won the day on October 30

PointC had the most liked content!

PointC

Moderators
  • Posts

    4,964
  • Joined

  • Last visited

  • Days Won

    401

Everything posted by PointC

  1. Hi kmcg101 If I understand the question correctly, here are a couple of threads that may help you: https://greensock.com/forums/topic/13747-2-faces-box-rotation-problem/ https://greensock.com/forums/topic/13399-rotationx-doesnt-fit-like-rotationy-rotationz-in-my-3d-cube-test/ Happy tweening.
  2. Hi jknott Welcome to the GreenSock forum. I didn't have time to run through all of your code, but it looks like all of your package divs have the same timeline and same mouse events so you can condense that quite a bit. You could use jQuery's each() method to create the timelines and not(this) selector to control the active one separately. Your question reminded me of a recent thread that I think could be quite helpful to you. Please take a look here: https://greensock.com/forums/topic/15692-mega-menu-with-gsap-issue/ Hopefully that gets you closer to a solution. Happy tweening and welcome aboard.
  3. Maybe you could make a simple CodePen for us so we could see exactly what you're trying to accomplish. It wouldn't take more than a div and a button with some details about what you want the div to do. Live code is always the best way to give you advice. Please see Carl's blog post about creating a CodePen. https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Happy tweening.
  4. Yep - Sir Jonathan has some solid advice there. Here's a nice Diaco pen that shows video and audio controls with GSAP http://codepen.io/MAW/pen/JXXMaB Happy tweening.
  5. Hi Michael McCrickard Welcome. Are these DOM elements or are you talking about child elements of an SVG? I ask because the answer of figuring positions might be a bit different. Moving an element to the lower right corner of a window would be a bit different than moving a rectangle to the lower right corner of the parent SVG etc. Happy tweening.
  6. I've not used it, but you could try video.js. It's open source. http://videojs.com/ I think flowplayer still allows free use too. (at least they used to) You'll just have their logo on the player. I don't have a whole lot of experience with other players as I've used flowplayer for many years. We produce a lot of videos and they're rock solid and always updating things. They're kind of like the GreenSock of video players. Other than that, you can try rolling your own player and controls with that link I posted in #3 above. You'll also be able to find a lot of tutorials about creating your own with a quick Google search. I wish I could offer more advice, but that's about all I have for now. Good luck.
  7. Whew! I thought I was the only one that hadn't heard about details yet. Very interesting. That's one of the many perks of hanging out here. With people like Sir Jonathan on the case, you always pick up new information even if it's not directly related to GSAP. Thanks Jonathan. I'll drop my tuition money into your tip jar.
  8. Dropped it into my pen and it's perfect now.
  9. hmmmm... I'm confused by this myself. I've recreated the behavior you're seeing in this pen: http://codepen.io/PointC/pen/3d2e405f888df24587e8d197a9fd1a1e/ I don't think I've used an onStart in the vars of a tweenFromTo, but I've used an onComplete and delay with no problems. If you switch my demo to an onComplete, it all works fine, but that onStart is causing trouble. Unless Jonathan has some more ideas, we may have to kick this one upstairs to Professor Carl or Master Jack.
  10. Hi coenhallie Welcome to the GreenSock forums. That looks right to me. Good job. Since you're a Club member you also have access to all the cool plugins like drawSVG for stroke animations too. Happy tweening and welcome aboard.
  11. HI split19 That usually means you have a recursive loop somewhere. What does your your clearMarkers function do?
  12. Hi Emily Welcome to the GreenSock forums. If I'm understanding your question correctly, I think the new ModifiersPlugin could be just what you need for your seamless loop. Please have a look at the docs and some samples here: https://greensock.com/modifiersPlugin Hopefully that helps a bit. Happy tweening and welcome aboard.
  13. Hi Buntafujiwaaa I always use the $ character for jQuery elements, but rarely use an underscore. That's just me though. I think the best advice is be consistent. If you look through CodePen at some of the best coders work, you'll see how they do it. Here's a couple of our own masters: GreenSock http://codepen.io/GreenSock/ Blake Bowen http://codepen.io/osublake/ Others may jump in with additional advice, practices and preferences. Happy tweening.
  14. Hey Jim I always use a 3rd party player (flowplayer) so I'm not terribly familiar with using the standard video controls, but I think you're on the right track. Preventing the bubbling or at least setting a different z-index seems like it would work. I wonder if this link might help with setting up your controls? https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics Sorry I can't be of more help, but maybe others will jump in here. Happy tweening.
  15. HI ryanroehl@gmail.com Welcome to the GreenSock forums. I think you may need to reverse the points of your path to get the desired behavior. If you used AI, it's a pretty simple matter. I posted about it here: https://greensock.com/forums/topic/13681-svg-gotchas/?p=57409 For a reverse on hover out, you can move the timeline out of your hover() function and play/reverse on hover over/out. Like this: var tl = new TimelineLite({paused:true, reversed:true}); tl.to($('#circlesmall'), 1, {morphSVG:"#circlesmall2"}) tl.to($('#circlebig'), 1, {morphSVG:"#circlebig2"}, "-=1") tl.to($('#doorside'), 1, {morphSVG:"#doorside2"}, "-=1") tl.to($('#doorfront'), 1, {morphSVG:"#doorfront2"}, "-=1"); $('#background').hover( function() {tl.play();}, function() {tl.reverse();} ) Hopefully that helps. Happy tweening.
  16. Hi marianrick Welcome to the GreenSock forums. Yes - SVGs can certainly add a lot of lines to your code and make working a bit cumbersome. The super simple approach would be to twirl them out of the way. I'm not sure which code editor you're using, but most that I've worked with will just let you twirl up and condense large blocks of code so they stay out of the way while you work. If that doesn't work for your needs, you can inject the SVG file. Here are a couple posts by Blake that discuss that very option. https://greensock.com/forums/topic/11187-accessing-svg-paths-in-external-file/?p=59586 https://greensock.com/forums/topic/15686-illustrator-svg-wordpress-workflows/?p=68404 Hopefully that helps a bit. Others may stop by with more thoughts and advice. Happy tweening and welcome aboard.
  17. PointC

    Draggable Chrome

    Hi stereoS I took a look at your pen in Chrome and tried it several times. I didn't have any problems at all. I also tried in FF and Edge. All seemed fine to me. I don't think it has anything to do with what you're seeing, but you have an older version of Draggable on the pen (1.17). You can switch to the latest version: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/utils/Draggable.min.js"></script> What version of Chrome are you using? Maybe others can try it and see if they see the issue. Happy tweening.
  18. Great info Carl. I just thought I'd note for anyone reading this thread and interested in Pixi that Petr Tichy has some tutorials about getting started with it. https://ihatetomatoes.net/getting-started-with-pixi-js/ https://ihatetomatoes.net/how-to-work-with-images-and-pixi-js/ and one about canvas with other libraries https://ihatetomatoes.net/guide-to-html5-canvas-javascript-libraries/
  19. HI angecles Welcome to the GreenSock forums. Blake is our resident expert for that type of question. Here are a couple of really cool examples he's made: Snowflake particles http://codepen.io/osublake/pen/BjNZYP Awesome Face Benchmark http://codepen.io/osublake/pen/vNwRdO/ He'll probably see this question and have some more thoughts for you. Happy tweening.
  20. PointC

    Spiral In Animation

    Hi again kkyang You can do that with a couple tweens. Here's a fork of your pen with a simple solution. http://codepen.io/PointC/pen/pRzMeR/ You can simply adjust the easing to your liking. You might be able to use a single tween and control your overshoot with easing. If you haven't seen the CustomEase demo and information yet, you'll want to see how cool that is right here: https://greensock.com/customease Happy tweening.
  21. Happy to help. Thanks for the clear demo. It makes answering questions so much easier. Enjoy your new Club membership and drawSVG powers. Happy tweening.
  22. Hi kkyang Welcome to the GreenSock forums. Just a slight change in your functions should take care of that for you. function start(){ TweenMax.fromTo(pathR, 1.25, {drawSVG:"100% 100%"}, {drawSVG:'0% 100%', ease:Power2.easeIn, onComplete:pathOut}); } function pathOut(){ TweenMax.to(pathR, 1.25, {drawSVG:"0% 0%", ease:Power1.easeOut, onComplete:start}); } Hopefully that helps. Happy tweening.
  23. We'd have to see why you're animating via a class change rather than animating the properties in the tween and the reason for the invalidate(). Feel free to fork my pen from above and recreate a simplified version of the problem you're experiencing. Without code and a desired behavior, it's tough to give the best advice. Happy tweening.
  24. Hi kez1304 I don't know why it wouldn't work on reverse. Without a CodePen it's a hard to troubleshoot. Here's a simple example of the timeline reversing after removing a class on play() and it all works correctly. http://codepen.io/PointC/pen/wgwmOV/ Without seeing the problem, I'm not sure what else we can offer you for a solution. Happy tweening.
×