Jump to content
GreenSock

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!

PointC

Moderators
  • Posts

    4,959
  • Joined

  • Last visited

  • Days Won

    400

Everything posted by PointC

  1. Hi devindavid , Welcome to the forums. I'm not sure I followed your question correctly, but I think you're asking how to feed the result of the roadSpeed function into the duration of your tween? That function is currently returning a negative number so adding it 'as is' would result in a negative duration tween, but you can change it to the following: TweenMax.to(".roadLine", -(roadSpeed()), {x:"600px", ease:Power0.easeInOut, repeat:-1, delay:1 }); Hopefully that helps a bit. Happy tweening.
  2. Hi qualityCode , Welcome to the forums. Have you tried animating the viewBox instead of scaling? I made a pen a while back that did just that. IMHO it might just make your life a lot easier. Take a look - maybe it can help you a bit: http://codepen.io/PointC/pen/XbqBmM Happy tweening.
  3. Hi chabari , Welcome to the forums. There were just two little things to change on your CodePen. The first is the z-index for your #first section wasn't set so the #land div (z-index:10) was sitting on top of it. Just setting the z-index higher will solve that part. The second was the from() tween. You'd be better off tweening the autoAlpha there instead of setting the visibility and opacity in your CSS. Tween from 0 to 1 rather than 1 to 0. I've forked your pen with those changes and it works just fine. http://codepen.io/PointC/pen/jWpqww Hopefully that helps a bit. Happy tweening. PS This thread from today has information that should help as well - explaining from() tweens, opacity, autoAlpha and immediateRender. http://greensock.com/forums/topic/13654-autoalpha/
  4. Hi twimbee , Welcome to the forums. You can just set up a master timeline to call the other nested timelines created in your functions like this: function fooOne(){ var tl = new TimelineMax(); tl .add( minimise() ) .add( maximise() ) } I made a quick little CodePen to show you how it would work. http://codepen.io/PointC/pen/obyJEM For a better understanding, you should also take a look at a much more complex example. The GreenSock banner on CodePen is great study material. http://codepen.io/GreenSock/pen/lEiAv/ The GS home page animation also makes use of nested timelines and is very educational. http://codepen.io/GreenSock/pen/yhEmn/ Hopefully this helps a bit. Happy tweening.
  5. Hi orendacc , Welcome to the forums. You should have a look at the pathDataToBezier() method of the MorphSVGPlugin. It converts path data into points that you can use as a motion guide. So not only can you make something follow an arc, but pretty much any type of motion you'd like. Here's some more reading about it: http://greensock.com/morphsvg-update Here's a CodePen to see it in action: http://codepen.io/GreenSock/pen/550e4b59c59355eef809658fbce77ee9 Hopefully that gets you started. Happy tweening.
  6. Hi axy2016 , You just need to switch to a timeline rather than trying to chain those tweens like you have it there. If you switch your code to this: tl = new TimelineMax(); tl.to(pink, 2, {morphSVG:"#red", fill:"#ED1C24"}, "+=1") .to(pink, 2, {morphSVG:"#black", fill:"#000000"}, "+=1"); it all works perfectly. PS Here is a little pen I was goofing with recently that shows a loop of multiple morphs in the middle of other tweens. http://codepen.io/PointC/pen/yejGvb
  7. PointC

    Simple Animation test

    You know, it's threads like these that show what a unique and cool place the GreenSock forum really is. There was another poster a couple days ago that thought Carl was just trying to sell a Club membership instead of showing a way to solve the problem without a plugin. In that case a Club plugin would have solved his problem quickly and easily and it truly was the best solution. I've been around here for awhile and I've never seen any hard sell of a membership. Instead, I see posts like this one. Jonathan has presented a lot of great information and Carl, as usual, has gone above and beyond by creating a CodePen for the OP and providing more solid information. Club members and non-members get the same great service and attention. I think that needs recognizing once in awhile. Truly cool you guys. My measly two cents worth on the problems Ajar is seeing: everything above is great information and I'd definitely second what Carl is saying about IE and the non specified size of an SVG. IE is major pain with SVGs. One thing that has helped me a few times is the Padding Hack. Here's a great article about it and more about making SVGs responsive. http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/ Happy tweening.
  8. Blake - I'm glad you asked that as I was just re-reading this thread and thinking the same thing, but thought I must be missing something. I was really hoping to see a CodePen and find out what se7en is trying to accomplish.
  9. Jonathan - I had a feeling you'd be along with one of your awesome in-depth answers. Great stuff.
  10. If you switch this: tl = new TimelineMax(); tl.to($("#open_top_bar"), 1, {morphSVG:$("#close_top_bar")}, "+=1") tl.to($("#open_middle_bar"), 1, {autoAlpha: 0}, "+=1") tl.to($("#open_bottom_bar"), 1, {morphSVG:$("#close_bottom_bar")}, "+=1") to this: tl = new TimelineMax(); tl.to("#open_top_bar", 1, {morphSVG:"#close_top_bar"},0) tl.to("#open_middle_bar", 1, {autoAlpha: 0}, 0) tl.to("#open_bottom_bar", 1, {morphSVG:"#close_bottom_bar"}, 0); everything is working just fine.
  11. Hi mango-nyc , If I understand you correctly, you'd like to remove those elements completely after the animation? If so, you could do something like this: tl = new TimelineMax({onComplete:theEnd}); tl.to ("#leftBlock", 1.25, {x:2200, transformOrigin:"50% bottom", ease:Power1.easeNone}) .to ("#rightBlock", 1.75, {x:-2200, ease:Power1.easeNone},"-=.5"); function theEnd() { $("#leftBlock, #rightBlock").remove(); } Here's some more reading about taking elements out of the DOM. https://api.jquery.com/remove/ Hopefully this helps a bit.
  12. If you inspect the elements, you'll see that your back link won't work because #submenuCategory1Col2 is sitting on top of #submenuCategory1Col1. You've only moved the child divs of the 2nd column. The 2nd column itself is blocking the 1st column from the click. Add these at line #51 of your JS and the problem will show itself to you. TweenMax.set("#submenuCategory1Col2",{background:"yellow"}); TweenMax.set("#submenuCategory1Col1",{background:"green"});
  13. If I could throw my 2 cents worth out here... I always find discussions like these quite puzzling. It seems like a simple math problem to me. What is your hourly rate? How much time will you save by purchasing a membership? You're talking about $50 for the needed plugin here and I find it difficult to believe that it wouldn't save you $50 worth of time on this project and then you have it available for your next job too. This whole thread started with the words "I've been struggling for two days" so right there you know this plugin would have been a huge time saver so why spend even more precious time trying not to spend a few dollars? On top of that, Carl has built a nice demo to get you started. Beyond that, you know you can always jump back here to the forum and get advice from mods and members absolutely free. Seems like a pretty easy decision to me.
  14. Excellent - I'll be ordering one. After that, I'll need a GS sweatshirt, coffee mug, water bottle, mouse pad, and Jack and Carl bobbleheads.
  15. Hi kathryn.crawford , If you want all the divs to scale to the same size, (250 in your original pen), you can just switch your scale to this: scale:250/circles[i].clientWidth, http://codepen.io/PointC/pen/XXEKjN/
  16. You're setting the parent div (#submenuCategory1) to x:-200, but you're trying to animate the children of that div (.container) back into view. The parent is still siting at x:-200. Try changing your .set() to this: TweenMax.set($("#submenuCategory1 .container"), { autoAlpha: 0, x: -200 }); I also see that your sub-menu .containers are animating to x:200. That may be intentional, but if you want to bring them to the same point as your main menu, you'll want to animate to x:0.
  17. Hey Carl , I was checking out the new training page with your bio picture and that is one sharp looking polo with the logo that you've got there. Are those shirts available for purchase anywhere? I remembered this thread, but that is t-shirts and hats and I'd really prefer a polo type shirt. I think it's time to open that GreenSock merchandise store. Thanks.
  18. Yes - I believe you can take the rest of the day off and Jack or Carl should be along shortly with your free t-shirt and/or company car.
  19. Ha - that's funny - I did almost the exact same experiment with the same element in a stagger and found that it would work. I don't know if it's the best way to accomplish a particular goal, but kind of cool that it works. BTW - I guess I missed your 1,000th - congratulations on cracking the 1,000 post mark.
  20. If you'd like to shorten it a bit more, you could also use: var tl = new TimelineMax(); for(var i = 0; i < 4; i++) { tl.staggerTo(".box", 1, {x:"+=50"},1) }
  21. Hi Zlerp , Welcome to the forums. If you change your CSS from this: .social-path, .social-circle { fill: none; stroke-width: 10; } to this: .social-path, .social-circle { fill: transparent; stroke-width: 10; } it will correct your problem. If you like, you can also shorten up your code quite a bit by using a Timeline and play()/reverse() on hover. http://codepen.io/PointC/pen/adEZgX Hopefully this helps a bit.
  22. Hi Devotee007 , Diaco is just using splitText for his brilliant demonstration. His solution works just fine with some plain old box divs and no splitText plugin. Here is a quick example using his solution and some simple divs: http://codepen.io/PointC/pen/BjmMpv PS For the record, I highly recommend a membership because the extra plugins are awesome.
  23. Blake - what's with the vague post? I mean, how about slowing down and adding some detailed information next time? Seriously cool explanation. You are a rock star.
  24. Hi celli , Just a couple small changes in the CSS and this works just fine. Please try this: http://codepen.io/PointC/pen/EPwrrQ
  25. Hi Vahid-Designer , Welcome to the forums. You could try something like this: function forever() { TweenLite.to(yourObject, 1, {rotation:"+=360", ease:Linear.easeNone, onComplete:forever}); } forever(); Hopefully this helps a bit.
×