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 chrisk2020 The reason that happens is that the timeline isn't initially reversed so it won't play on the first click. On the first click the timeline actually reverses even though you don't see anything happen. Now that it's reversed, everything will work as you expected from click two onward. Don't worry though, it's an easy fix. Simply add reversed:true to your timeline and that will solve the problem for you: var menuTL = new TimelineMax({paused:true, reversed:true}); Happy tweening.
  2. Interesting - a rare glimpse at a Carl question rather than the usual awesome superhero answer. I guess that's proof that he was once human like the rest of us.
  3. Hi CraigS Cool name. In addition to the great advice and info from Carl and Dipscom, I'll throw my two cents worth out for you. You have an additional option by pausing the timeline in the function and playing it when you add it to the master timeline. So two lines of code would change in your pen: var tl_b = new TimelineLite({paused:true}); // pause it in the function .add(b_tweens().play()); //play when adding to the master timeline Happy tweening.
  4. o.k. - looks like everyone is giving some great answers so I'll throw my 2 cents worth out here too. I was curious about all the timelines being created for this effect. You could actually make this whole thing happen with a couple staggers and a tween for the progress bar. var slideTime = 1.5, stayTime = 5, tl = new TimelineMax(); tl.staggerTo(".imgSlide", slideTime, {autoAlpha:1},stayTime+slideTime) .staggerTo(".imgSlide", slideTime, {autoAlpha:0},stayTime+slideTime,stayTime+slideTime); TweenMax.from(".progress", tl.duration(), {transformOrigin:"left", scaleX:0, ease:Linear.easeNone}) http://codepen.io/PointC/pen/pyqVBy/ Hopefully that helps a bit. Happy tweening.
  5. Hi caemostajo Looks like you got your cube working. It's looking good. I added a repeat:-1 to your main timeline and I don't know if I'm just missing it, but I'm not seeing anything strange. What exactly do you mean by distortion? Is this in all browsers? Is it only on CodePen? Maybe others can spot the problem, but I for one could use a few more details please. Happy tweening.
  6. Hi Rob In addition to Carl's great advice about setting the transformOrigin on those elements once, you can also define a default ease to help 'DRY up' your code. I think that gets missed sometimes, but when you're using the same ease over and over, it can be helpful to define a default. It looks like Linear is used on the majority of your tweens so you could add this code: TweenLite.defaultEase = Linear.easeNone; // you can still override it on individual tweens, but unless you specify otherwise, you'll get the default There's my 2 cents worth of advice. Happy tweening.
  7. If you do happen to want to reverse paths in Illustrator here's a quick tip: Open path: select the pen tool and click on the first point of your path and it will reverse the points. Closed path: right click the path and make it a compound path, choose menu-window-attributes and then use the Reverse Path Direction buttons. (Note: If the Path Direction buttons are not visible in the attributes panel, click the upper right menu of that panel and choose 'Show All')
  8. Ha! I have to read more closely. I thought this was a debate between using Animate CC and using GreenSock. I saw the shape tween part of the question and got all excited about telling someone about morphSVG. In case it's not obvious - I love that plugin.
  9. Hi pocketrockets I think the short answer to most of your questions is yes. GreenSock can animate just about anything. You can have multiple tweens and timelines to create almost anything you can imagine. It seems like your biggest question is about SVG shape tweens. You definitely need to have a look at the morphSVG plugin. It will blow your mind. http://greensock.com/morphSVG http://greensock.com/morphsvg-update Here's a CodePen collection with more examples of morph: http://codepen.io/collection/naMaNQ/ The GS getting started video: https://greensock.com/get-started-js The GreenSock Jump Start Collection on CodePen is very helpful too: http://codepen.io/collection/ifybJ/ Hopefully these links gives you a good start and understanding of what's possible. Happy tweening
  10. Hi christi4n Welcome to the GreensSock forums. There would be a few ways to make this happen. My personal approach would be to set up a function with an autoAlpha tween that gets called onComplete and run on the first two passes through. On pass three, that tween isn't run and everything stops. Something like this could work for you: var i = 0, tl = new TimelineLite({onComplete:stayLit}); tl.set("#one, #two", {autoAlpha:1}) .to("#one", 1, {x:100,y:100}) .to("#two", 1, {x:100,y:100}); function stayLit() { i++; if(i<3) { TweenLite.to("#one, #two", 1, {autoAlpha:0, onComplete: function() {tl.restart()}}); } } Here's a quick CodePen with that solution for you: http://codepen.io/PointC/pen/MyZgao/ Hopefully that helps a bit. Happy tweening.
  11. PointC

    tweenmax scroller

    Hi kempo I'm not sure I completely understand your question, but my guess is that you need three stopping points in the animation so three divs can be shown at once. (except, as you said, at the beginning and end). The current problem is that you're using only one stopping point, pausing for 0.1 seconds and then animating the div off screen. My solution for you would be to use the aforementioned three stop positions and then stagger the divs. The code I used: var tl = new TimelineMax(), time = 0.9, //animation time to move between positions thePause = 0.2; // time to wait before the next move tl.staggerTo(".number", time, {left:200,top:50},time+thePause) .staggerTo(".number", time, {left:100, top:0}, time+thePause, time+thePause) .staggerTo(".number", time, {left:0, top:50}, time+thePause, (time+thePause)*2) .staggerTo(".number", time, {left:-100, top:100}, time+thePause, (time+thePause)*3); Here's the CodePen: http://codepen.io/PointC/pen/RaqOGJ/ Hopefully that helps a bit. Happy tweening.
  12. Hi WA007 Welcome to the forums. I like that animation - very nice. To my knowledge, this isn't a limitation of the drawSVG plugin, but rather SVG itself. Right now, we get center aligned strokes on everything. Support for inner and outer alignment is coming, but there are some things that need to be figured out first. Here's a bit of info about that: https://www.w3.org/TR/svg-strokes/#SpecifyingStrokeAlignment As far as a workaround now, maybe two copies of the path with the stroked version slightly smaller than the filled version so it appears that the stroke is aligned inner? Others may jump in with additional ideas, but that's the first thing that comes to mind for me. Happy tweening and welcome aboard.
  13. PointC

    Animate SVG path

    That's great Carl. I have nothing to add to the answer here other than my mind is still blown every time I use the morphSVG plugin. The morphing itself is amazing, but when you add in the ability to generate motion guide data for the BezierPlugin, it's an incredible addition to the GS plugin collection. So cool.
  14. I didn't know that. That's quite handy. Several months ago (at Blake's recommendation) I installed Chrysto's GSAP sniffer. That's been a nice little extension too. For anyone not familiar with it - it's a Chrome extension that lights up green with the GS version number when you're on a site using GSAP. More often than not when I see something awesome, that little icon is glowing green so GS is being used quite a lot out there. If anyone wants to install the extension, here's the link: https://chrome.google.com/webstore/detail/gsap-sniffer/ohjmhldioopcachmenfnhlbgmkaohgbb
  15. I thought it was a little strange that the minute hand never moved in your original pen, but now I see you're trying to match what's happening in that video. In that case, we can take the repeat off the timeline and add it to the first tween so that does a complete loop 3 times. Then we add a tween to the timeline that moves the hour hand 90 degrees into the 3 o'clock position like this: var tl = new TimelineMax(); tl.to(".hour", 1.04, {rotation: 360, ease:SteppedEase.config(12),repeat:2}) .to(".hour", 0.32, {rotation: "+=90", ease:SteppedEase.config(3)}); Here's a revised pen: http://codepen.io/PointC/pen/vGQKwd/ Happy tweening.
  16. You didn't think of it because it's Saturday and you should be out having fun instead of working.
  17. Hey jimeast Just open the file and there will be comments at the top with the version and date. Happy tweening.
  18. Hi Arun I think you may be working too hard on this animation. You're showing and hiding the same SVG 12 times to get an animated clock hand. We can make your whole animation a lot easier by animating the hour and minute hands of the clock. If you want it to jump to each position on the clock, steppedEase is perfect for that kind of thing. Your code would then look like this: tl.to(".minute1", 3, {rotation: 360, ease:SteppedEase.config(12)}) //we then update the hour hand rotation on each repeat of the timeline More reading about steppedEase: http://greensock.com/docs/#/HTML5/GSAP/Easing/SteppedEase/ If you don't want the jump animation of the hour and minute hands, you can get a super smooth clock using a Linear ease. I've made a CodePen for you with both types of clocks. http://codepen.io/PointC/pen/grQOdK/ I think doing it this way will save you a lot of code and make changes much easier. Hopefully that helps a bit. Happy tweening.
  19. ah... o.k. - you could set up a variable to get the window height and divide by 2 like: var h = window.innerHeight/2 and then animate the y position to that value. Here's a simple CodePen with that possibility: http://codepen.io/PointC/pen/yOQLMr/ Depending on what you're doing, you may have to update that variable on a window resize event. Does that help? Happy tweening.
  20. Hi venn In your example, each element's animation will take 1 second. So with an offset of .25, the total duration will be 1.5 seconds. Here's a really simple CodePen to illustrate it: http://codepen.io/PointC/pen/XdyWNr/ Hopefully that helps a bit. Happy tweening.
  21. Hi BradLee Setting an element's position with left and top is perfectly fine. It's just not recommended to animate with them. So you center it like this: TweenMax.set(yourElement, {xPercent:-50, yPercent:-50, left:"50%", top:"50%"}) When you read about animating with x and y instead of left and top, that's referring to sub-pixel rendering. Left and top use whole numbers so the animation can seem a lot less smooth using those properties. x and y will be much smoother since they animate at a sub-pixel level. For more info about xPercent and yPercent, please check out this post: http://greensock.com/gsap-1-13-1 and the corresponding CodePen: http://codepen.io/GreenSock/pen/rAetx Happy tweening.
  22. Thanks for the sample image - that helps me see how you want this to animate. In that case, you can use Carl's scale example and turn it into a timeline like this: var tl = new TimelineMax({ repeat:-1, repeatDelay:0.3}); tl.from("#rectangle-one, #rectangle-two", 0.6, {scaleY:0}) .to("#rectangle-one, #rectangle-two", 0.6, {scaleY:0, transformOrigin:"50% 100%"}); http://codepen.io/PointC/pen/PNxoYK Is that the way you wanted it? Happy tweening.
  23. PointC

    Bug Safari 9.1

    Hi Lagden Have you tried that with 1.18.4 yet? That may fix your issue. If not, I know Jack has been working like crazy on the next release (1.18.5) so he'll probably jump in here too. Happy tweening.
  24. Ha! Now why didn't I see the obvious solution of using scale? Much simpler. I'm always looking for any excuse to use a cool plugin.
  25. Hi farhoudz I think I understand your question and desired behavior. In this case, my advice would be to use the drawSVG plugin instead of the morphSVG plugin. You can then use lines instead of rectangles and control their behavior a little more easily. Here's a fork of your pen with that solution: http://codepen.io/PointC/pen/mPzajY/ If I misunderstood your desired outcome, please let us know. Just for future reference, you can use the Club Plugins on CodePen. There are special versions that are CodePen safe. They can be a bit tough to find sometimes though so here's a GreenSock pen which has all the links you need: http://codepen.io/GreenSock/pen/OPqpRJ/ Hopefully that helps a bit. Happy tweening.
×