Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

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. Hi celli Do you need to calculate the center on the fly? Since this is a SVG, we can just look at the viewBox of 0 0 600 361 and know that the center is 300 180.5. You could then use that as a staggerFrom() tween coordinate for your circles cx and cy attributes. circles.staggerFrom(".circleBlast", 0.8, {attr:{cx:300,cy:180.5}},0.0005) I'm not sure if that's exactly what you wanted, but here's a fork of your pen with that solution. http://codepen.io/PointC/pen/ZWoBqp Hopefully that helps.
  2. Hi megaman Welcome to the forums. I believe this post may help you: http://greensock.com/forums/topic/13499-colorprops-tweening-from-one-linear-gradient-to-the-other-linear-gradient/ Happy tweening.
  3. Hi pauljohnknight Welcome to the GreenSock forums. You'll probably find most people around here (myself included) use ScrollMagic. It's pretty easy to use: http://janpaepke.github.io/ScrollMagic/ You can also check out Petr Tichy's site (one of our forum moderators). He's a great teacher of all things ScrollMagic. https://ihatetomatoes.net/simple-scrollmagic-tutorial/ Hopefully that helps a bit. Happy scrolling and welcome aboard.
  4. Hi purepixels Welcome to the GreenSock forums. Some of the problems you're seeing are from using delays on the tweens along with a position parameter offset. From() tweens are also a bit tricky sometimes. Since you're basically repeating the same animation 3 times (& then repeating those) a loop would probably work best here. I made a fork of your pen with that solution. http://codepen.io/PointC/pen/LNdBmo/ Since we show the dancer right away, the first morph of the first pass actually morphs into itself. That way we can have a seamless repeat by calling the function at the end of each timeline. For some great reading on from(), please check out this thread. http://greensock.com/forums/topic/12851-understanding-the-from-behavior/ Please also take a look at Carl's great video about the position parameter. http://greensock.com/position-parameter Hopefully that helps a bit. Happy tweening and welcome aboard.
  5. That's really great Diaco. Let's see - we've got Blake and Diaco revving up their giant brains at the same time on the same thread. We should probably all be careful because this could potentially rip a hole in the fabric of the universe.
  6. That's funny you posted that parallax demo. I've been working on a new CodePen demo that's quite similar. I was also tinkering with blur filters on zoom in/out to simulate depth of field. I agree - Jack should probably take over this whole operation. I don't think he has anything else to do anyway.
  7. Holy cow - that is cool! Every time I animate the viewBox, I want to animate a camera like I do in After Effects. I'll leave the creation of the new plugin to Master Blake. Can that be ready by Friday?
  8. Good grief! I knew I just read that answer not too long ago, but couldn't remember which post it was. I even searched the forum - not sure how I missed that. I even got some sleep last night so I have no excuse. Blake schools the new moderator. Edit - just saw your post Diaco. I like that too. Thanks much.
  9. I've managed to confuse myself today. I have a group of 5 elements that all do something a bit different based on their index as well as an index based delayed start. So far no problem - jQuery's each method works fine for that. I have more animations that I want to play after the last 'each' timeline has finished though. I'm having trouble figuring out the best way to make sure the last 'each' timeline is finished before calling the function with the next timeline. I currently have the function call on the 'each' timelines, but that's obviously not right because it will be called 5 times. Should I be creating a master timeline from the 5 'each' timelines and calling the function at the end of that master? or is jQuery's each method not the best choice here? Should I be using a regular loop and creating those 5 timelines? What's the easiest way to make this happen? Thanks.
  10. Hi rkeeferCD Welcome to the GreenSock forums and the wonderful world of SVGs. To answer your first question, yes - you should be able to inject the SVG for animation. We have a few threads talking about that. Blake is our resident expert. Please check out this post: http://greensock.com/forums/topic/11187-accessing-svg-paths-in-external-file/?p=59586 As for the second part of your question - the DrawSVG plugin animates the stroke, not the fill. From the docs: DrawSVGPlugin allows you to progressively reveal (or hide) the stroke of an SVG <path>, <line>, <polyline>, <polygon>, <rect>, or <ellipse> and you can even animate outward from the center of the stroke (or any position/segment). I'm not seeing any strokes in the rocket SVG you've listed above so you'll need to make a few changes to that before DrawSVG will work properly. You can just go back to your original file and add some strokes to the paths and switch some rectangles to stroked lines etc.. After that it should be easy to get you started. As you get going, we'd need to see your code in action to give you the best help. If you could create a CodePen for us, that would be best. Here's some info on doing 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.
  11. Hi yihaod Welcome to the GreenSock forum. I'll echo Carl's advice about Diaco's pens and you'll find some more nice slider examples on CodePen. As far as starting ideas - my best advice is: start simple. Forget about your images for the moment. Create a few plain colored divs and a few buttons and get the functionality to your liking. You can always move buttons, change backgrounds, add images etc... The point is not to get bogged down in styling everything right out of the gate. The best way to figure out the code is just start trying it. You'll most certainly have GSAP related questions as you get going and we're here to help you through that part of it. If you haven't set up a CodePen account, I'd highly recommend it. It's extremely important that we see your code as you ask questions. Please check out this link for details about that: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ You can also fork pens on CodePen and break them apart to see how they were created. That can be very educational. Hopefully that helps a little bit. Please post any GreenSock related questions here as you get going. We will always do our best to help you. Happy tweening.
  12. Hi SoL2Squiz It looks like Dipscom has solved your sprite sheet problem, but I thought I'd throw my 2 cents worth out there for you. Sometimes a sprite sheet may be the best solution, but you may want to look at SVGs for this type of animation. They offer so many advantages like responsive scaling, making easy changes to the text, smoother animations, color changes for your data... and the list goes on. In your example you have 12 pieces of text, some circles, a rectangle and one path. This works perfectly as a SVG. I made a little CodePen for you using the SVG instead of your sprite sheet. The SVG is about 3KB whereas the sprite sheet is 249KB and offers no way to change it. http://codepen.io/PointC/pen/yOvOLO/ Just my opinion, but hopefully it gives you some new ideas. Happy tweening
  13. Thanks Carl. It's my new mission to get everyone hooked on animating the viewBox with GSAP.
  14. Hi amoeboar Welcome to the forums. This looks like a great job for a stagger. We can get this down to one line of code for you. TweenMax.staggerTo('.refill-circle', 15, {rotationY:540, rotationX:1080, ease:Power1.easeInOut},0.3) You might have to play with the rotations and stagger time to get it to your liking, but I think this should work for you. http://codepen.io/PointC/pen/RaxzdV/ Hopefully that helps a bit. Happy tweening and welcome aboard. Edit: I forgot to mention it, but if you haven't read about stagger yet, please check out the docs here: http://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerTo/
  15. You're welcome. I'm happy to help and glad you found my house tour animation inspirational. Yes - please share your finished work when it's ready. I'd love to see it.
  16. Hi kylegach Welcome to the forums. I think there is just a little problem with the coordinates you're using. The viewBox can be a bit strange to start using at first, but we can get you fixed up. Let's look at your simplified static demo (thank you for that - much easier to help with stripped down demos) // this is your current viewBox <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="420 310 1004 748"> // but to zoom to the orange rectangle, it should be <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="420 310 584 438"> The starting x/y is indeed 420/310, but the 1004/748 that you're using are not ending coordinates. (I thought the same thing the first time I used the viewBox.) The second set of numbers is how far along the x/y you want the view to extend. So in your example, the actual end coordinates are 1424/1058 which is why the zoom to orange box isn't working correctly. The orange box is 584 units by 438 units so that is how far we want to extend the viewBox. That is also in the exact aspect ratio as your SVG so this works perfectly. We then use a viewBox="420 310 584 438" and it should zoom correctly. Hopefully that makes sense and helps a bit. Let us know if you have any more problems. Happy tweening and welcome aboard.
  17. o.k. - I took your arrows into Adobe Illustrator and added some anchor points. One on the middle of the curved part of the start path and one on each side of the 'v' shape on the ending path. Is this more the way you wanted your morph to look? http://codepen.io/PointC/pen/repGKv/
  18. There was actually another post about that started earlier today and Jack had a good answer: http://greensock.com/forums/topic/14129-morphsvg-change-start-and-end-point/
  19. Hey jstafford Looks like you're naming and trying to morph the entire SVG. Just move your ID to the paths themselves and it all should work fine for you. //switch this <svg id="arrow-left-post-hover" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451.8 451.8"> <path d="M97.1,225.9c0-8.1,3.1-16.2,9.3-22.4L300.7,9.3c12.4-12.4,32.4-12.4,44.8,0c12.4,12.4,12.4,32.4,0,44.7L173.5,225.9 l171.9,171.9c12.4,12.4,12.4,32.4,0,44.7c-12.4,12.4-32.4,12.4-44.8,0L106.4,248.3C100.2,242.1,97.1,234,97.1,225.9z"/> </svg> // to this <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451.8 451.8"> <path id="arrow-left-post-hover" d="M97.1,225.9c0-8.1,3.1-16.2,9.3-22.4L300.7,9.3c12.4-12.4,32.4-12.4,44.8,0c12.4,12.4,12.4,32.4,0,44.7L173.5,225.9 l171.9,171.9c12.4,12.4,12.4,32.4,0,44.7c-12.4,12.4-32.4,12.4-44.8,0L106.4,248.3C100.2,242.1,97.1,234,97.1,225.9z"/> </svg> Hopefully that helps. Happy morphing.
  20. Hi Cupracing Welcome to the forums. For the best help, we would love to see your code. Could you create a CodePen for us? Please follow this link to learn more about that. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Regarding sliders, check these out for inspiration and learning - Diaco has some cool demos: http://codepen.io/MAW/pen/XmozON http://codepen.io/MAW/pen/yYradO Blake has a really nice example here: http://codepen.io/osublake/pen/ZbdxRx/ Happy tweening and welcome aboard.
  21. Hi Rojan Wecome to the GreenSock forums. Carl has a great answer for you and I was coming to the same conclusion as he was posting. Everything looks like it's working correctly to me. To add my two cents worth, I think this type of timeline is an excellent argument for adding labels. With all those negative offsets, it's easy to get lost in the woods pretty quickly. By using labels and tweening relative to those labels, it becomes easier to handle. tl.add("playCircles") // add label tl.to( element1 , 1, {...} ),"playCircles") // start at the playCircles label tl.to( element2 , 1, {...} ),"playCircles+=0.5"); // starts 0.5 seconds after the playCircles label // Having tweens relative to a label also makes it easy to change all of them at once // since they're relative to the label. // You can add the label relative to other tweens in the timeline like this: tl.add("playCircles","+=2") Hopefully that would make things a bit easier. I'd also recommend Carl's terrific video about the position parameter: http://greensock.com/position-parameter Happy tweening and welcome aboard.
  22. PointC

    Nesting timelines

    Hi mattVo Welcome to the forums. This can work for you with a couple of small changes. 1. You have the x position of the red box wiggling back and forth by 3 pixels which is fine, but then you're asking it to move 500 pixels on the x on the other timeline. This causes a fight for control. The simple solution here is to wrap the red box inside a container and then move the container along the x by 500px. 2. On your master timeline, you were trying to move the red1 variable by 500px, but red1 is a timeline not the red box itself. I've forked your pen and made those changes: http://codepen.io/PointC/pen/GZyWJx?editors=1010 Hopefully that gets you closer to what you wanted. Happy tweening and welcome aboard.
  23. PointC


    Hi Derikoe Welcome to the forums. Just to add a bit to Shaun's advice - if you're trying to avoid jQuery, this website is worth bookmarking: http://youmightnotneedjquery.com/ Happy tweening and welcome aboard.
  24. Hi deb Welcome to the forums. If you want a simple bouncing ball that never ends, a repeating timeline is all you need. Something like this: var tl = new TimelineMax({repeat:-1}); tl.to("#ball", .10, {transformOrigin: "50% 100%", scaleY:0.25, yoyo:true, repeat:1}) .to("#ball", .75, {y:-400, ease:Circ.easeOut, yoyo:true, repeat:1}); http://codepen.io/PointC/pen/MyrbVr/ Hopefully that helps a bit. Happy tweening and welcome aboard.
  25. Thanks Blake. I have a lot of fun and learn so much around here - it's truly an honor to be included with you guys on the moderating team.