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 sorciereus If you want to see a really nice 'from the center' text animation, you should take a look at this pen from Diaco. (one of our forum superheros) http://codepen.io/MAW/pen/OVqBBq/ That pen is using the SplitText plugin which is a Club Membership perk, but may be exactly what you need. Hopefully that helps a bit. Happy tweening.
  2. Hi DanChadney I think part of the problem here is using a big circle as a mask for your arrow path. Getting the timing right on that can be a bit tricky. Since you're a Club member, you can use the drawSVG plugin to help with this. I did a little write-up about revealing dashed strokes with the drawSVG plugin and masks here: http://greensock.com/forums/topic/13681-svg-gotchas/?p=57942 As part of that post, I made a demo which should help you quite a bit. I have a little airplane flying over a map revealing a dotted path as it moves. This is basically the same thing you're doing with the arrowhead and path. Here's the CodePen: http://codepen.io/PointC/full/zrQLvO/ Hopefully that will give you some ideas and a direction to go with your project. Happy tweening.
  3. Hi lateek35 Welcome to the forums. Are you reversing after you play like this: var myTimeline = new TimelineMax( {paused:true, onComplete: function() {myTimeline.reverse()}}); myTimeline.play(); or did you mean that you just want to reverse the tween without playing it first. If you want to do that, you could try this: // reverse from two seconds myTimeline.reverse(2); // or you could set the timeline to reversed and then just a reverse() should work var myTimeline = new TimelineMax( {paused:true,reversed:true}); myTimeline.reverse(); Hopefully that helps a bit. For future questions or more detailed answers, a CodePen example will get you the best information. Please check out this link to learn more about creating one: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Happy tweening and welcome aboard.
  4. Hi omarel Welcome to the forums. Looks like it's just a typo. // you had var tl = new TimeLineLite(); //should be var tl = new TimelineLite(); // no capital L in 'line' Happy tweening and welcome aboard.
  5. PointC

    Progress Counter

    Hi marcamos Looks like you may have found your answer, but I think you are just looking for the toFixed() Method. http://www.w3schools.com/jsref/jsref_tofixed.asp console.log(tlMaster.totalProgress().toFixed(2)); console.log(tlMaster.totalTime().toFixed(2)); Happy tweening.
  6. Hi benmandv Welcome to the forums. If I understood your desired outcome, you could do something like this: $(".face4").on('click', function(e){ TweenLite.to($(this), 1, {opacity: 0, onComplete:function(){tl.play()}}); }); tl = new TimelineMax({repeat:-1,paused:true}); tl.from(".box1", 2, {autoAlpha: 0}) tl.to($(".box1"), 1, {opacity: 0}) tl.from(".picture2", 2, {autoAlpha: 0}) tl.to($(".picture2"), 1, {opacity: 0}) tl.from(".picture3", 2, {autoAlpha: 0}) tl.to($(".picture3"), 1, {opacity: 0}) tl.from(".picture4", 2, {autoAlpha: 0}) tl.to($(".picture4"), 1, {opacity: 0}); You could also put the timeline into a function and call that function onComplete, but in this case I think setting it up this way will be better so all the .from() tweens will fire immediately and hide those picture elements for you. Hopefully that helps a bit. Happy tweening and welcome aboard.
  7. Hi ald603 What I usually do is add a testing label and move it around as I need to only view parts of a timeline during the design process. Something like this: tl = new TimelineMax({paused:true}); tl.to(element,1, {...}) .to(element,1, {...}) .add("testingLabel") .to(element ,1, {...}); tl.play("testingLabel") Here's a really simple CodePen showing it in action. http://codepen.io/PointC/pen/GoPNwP Hopefully that helps a bit. Happy tweening.
  8. Hi benoit I think the easiest way is just using @font-face.You're probably loading that font for other parts of your project anyway so all the fonts of the SVG can match everything. If you make all the text into paths, you'll end up with a much bigger SVG. Leaving it as text will also give you the ability to make quick text changes without going back to your original AI file. Here's a fork of your pen with a simple toggle to change the font in your SVG: http://codepen.io/PointC/pen/aNNbVm/ Hopefully that helps a bit. Happy tweening.
  9. PointC

    Question with text

    Oh man - I haven't been smacked down in an answer battle with Carl in awhile. I'll be at the emergency room getting my injuries treated.
  10. PointC

    Question with text

    Hi Cothien Looks like you're missing the text plugin. You can add that with this: http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/plugins/TextPlugin.min.js You also had your div ID a little off. //just switch this: <div id="#test">yrdy</div> //to this <div id="test">yrdy</div> If you add that plugin and make that small switch to the div ID, it all works perfectly. Hopefully that helps. Happy tweening.
  11. Hi Roms Welcome to the forums. You would have a couple choices for that. In your case, the staggers are the same for both tweens so you can add a second target to the tween. If the staggers were different you would use the position parameter to start both tweens at the same time. I've included both options: // since both staggers are the same, you can just add a second target to the tween like this tl.staggerFrom("#SKETCH1 g, #SKETCH2 g", 50,{opacity:0, ease:RoughEase.ease.config({ template:SteppedEase.config(20), strength:200, points:200, taper:"out", randomize:true, clamp:true})},0.1) // if the staggers were different you would use the position parameter to start both at time 0 tl.staggerFrom("#SKETCH1 g", 50,{opacity:0, ease:RoughEase.ease.config({ template:SteppedEase.config(20), strength:200, points:200, taper:"out", randomize:true, clamp:true})},0.1) tl.staggerFrom("#SKETCH2 g", 50,{opacity:0, ease:RoughEase.ease.config({ template:SteppedEase.config(20), strength:200, points:200, taper:"out", randomize:true, clamp:true})},0.1,0) // the 0 is the position parameter You can learn more about the position parameter here: http://greensock.com/position-parameter Hopefully that helps a bit. Happy tweening and welcome aboard.
  12. You can add a 2 second pause by changing the last tween to this: tl.staggerTo([".line1",".line2",".line3"], 1, {autoAlpha:0}, 0.25,"+=2"); That will make that tween wait for 2 seconds before it starts. That's the position parameter and you can use it to easily add pauses or by making the value negative, it's a way to overlap tweens. Be sure to check out Carl's great video about the position parameter here: http://greensock.com/position-parameter Happy tweening.
  13. Hi again the.bolmanator Your 'Z' animation is looking good. The 'auto' you're thinking of is autoAlpha. It's a combination of opacity and visibility. From the docs: autoAlpha Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.If you want to stagger the fade-outs you can do that with staggerTo(). Please try changing the last part of your timeline: //instead of this tl.to(".line1", 2, {opacity:0}) .to(".line2", 1.5, {opacity:0}) .to(".line3", 2, {opacity:0}) // see if this is more to your liking tl.staggerTo([".line1",".line2",".line3"], 1, {autoAlpha:0},.25); All the autoAlpha info is in the docs for the CSS PlugIn: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/ Here's all the reading, some CodePens and a video about staggerTo(): http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/staggerTo/ Hopefully that helps a bit more. Happy tweening.
  14. Hi C.Surieux I'm not 100% sure what your question is, but GreenSock is very useful for any type on animation you want to do. If I'm understanding your desired outcome, scaling menu height on hover or sliding menus on/off screen by clicking an image is no problem at all. If you're asking how you start your project, I'd say just put together all the basics of the page/site with some plain divs, placeholder text and the <ul> or however you're designing the menu. I wouldn't worry about final styling on anything until the animations are the way you want them. If you haven't visited these pages yet, I'd take a look at them to get an understanding of the basics: http://greensock.com/get-started-js http://greensock.com/jump-start-js If you have specific problems as you're setting up the animations, everyone around here will be happy to assist you. A CodePen will always get you the best answers. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Hopefully that helps a little bit as you get started with your site. Happy tweening.
  15. hmmm... I suppose we shouldn't overlook the obvious here - I don't see TweenMax being loaded in the code you posted. If you load Draggable without TweenMax, you will still get the draggable is not defined error. Could TweenMax be missing? Edit: you can also use TweenLite, but will need the CSSPlugin too.
  16. That sure sounds like Draggable isn't loaded. //you have this <script src="gs/min/utils/"></script> // have you tried this ? <script src="gs/min/utils/Draggable.min.js"></script> Does that help?
  17. Hi RhinoRudi Welcome to the forums. To rotate a certain number of times, you could set up a separate loop and rotate +=360 each time through, but for simple tweens, the easiest approach is to just multiply 360 * the number of rotations you want. You said you want your SVG to scale up from a small white dot into the rotating arcs. If it were me, I'd add a white circle to the SVG, group all elements together and rotate and scale the group. As the rotation starts, you could then fade out the white circle and fade in the rotating arcs. That's exactly what I did in my fork of your pen which you can see here: http://codepen.io/PointC/pen/BKyvop I'm not sure if this is exactly what you meant, but hopefully it helps a little bit. Happy tweening.
  18. Hi i.am Welcome to the forums. It's actually five separate images. If you take a look at the reduced CodePen that Carl made, you'll see the code for the images: <div id="browserIcons"> <img src="//www.greensock.com/_img/browser-chrome-big.png" width="82" height="80" /> <img src="//www.greensock.com/_img/browser-safari-big.png" width="77" height="86" /> <img src="//www.greensock.com/_img/browser-ie-big.png" width="82" height="74" /> <img src="//www.greensock.com/_img/browser-firefox-big.png" width="82" height="83" /> <img src="//www.greensock.com/_img/browser-opera-big.png" width="69" height="75" /> </div> Happy tweening.
  19. Hi the.bolmanator Welcome to the forums. Some of your lines look like they're animating in the wrong direction simply because of the way they were first created. It may look backwards to our human eyes, but the browser just assumes that's the way we want the direction to go. It all depends on where the first point of the line is placed. Don't worry though, if a line is 'backwards' you can easily animate it in reverse without having to recreate the SVG. The easiest way to do that is by animating the line in reverse with percentages. // this is forward .fromTo(element, .5, {drawSVG:"0% 0%"},{drawSVG:"0% 100%"}) // this is reverse .fromTo(element, .5, {drawSVG:"100% 100%"},{drawSVG:"0% 100%"}) I've forked your pen with those changes so you can see how it works. http://codepen.io/PointC/pen/YqPwPy/ As far as naming elements with classes or IDs, it's up to you. GreenSock will handle either just fine. What you can do though is make a group of lines and then animate them at the same time. In that case you wouldn't need to name the individual paths with any classes or IDs. Say you have a group called '#myLines' and there are 20 different paths that you want to draw. You could then animate them like this: .fromTo("#myLines path", 1, {drawSVG:"0% 0%"},{drawSVG:"0% 100%"}) Hopefully that helps a bit. Happy tweening.
  20. Hi Raistlin celli has posted some good links so you can learn the basics of the DrawSVG plugin. I looked at the link you posted and I see some segments of the animated stroke go behind the man in the photo while others animate in front of him. If you're asking how to accomplish that effect, the short answer is masking part of the path. For a more detailed explanation of the process, I just added a new post to the SVG Gotchas topic which has a write-up about how to approach that type of animation. You can read it here: http://greensock.com/forums/topic/13681-svg-gotchas/?p=58229 Here's a direct link to the CodePen I made for that post which shows an animated stroke going around the subject of a photo. http://codepen.io/PointC/full/ZWEqdK/ Hopefully that helps a bit. Happy tweening.
  21. PointC

    SVG Gotchas!

    Have you ever wanted to bring the 3RD dimension into your project with the DrawSVG plugin? Using a series of masks we can simulate an SVG stroked path navigating around or through a subject in a photo. This path can be solid, dashed, dotted or whatever you like. My new demo uses some things from my post above about animating dashed strokes with masks, but goes a bit further. Get wrapped up in the swirling 3D lines of the DrawSVG plugin: http://codepen.io/PointC/full/ZWEqdK/ If you want to use this technique, here’s a bit of info: Start with the photo you’re using at the maximum size you think you’ll need. (Note: You can responsively swap to smaller versions as long as you maintain the same aspect ratio.) Create a new AI file the exact same size as you biggest photo. Import the photo for use as the background while designing your SVG. (Be sure to also create a plain rectangle that’s the same size as the SVG so everything lines up at export time) Draw the stroke that will be wrapping around/through the subject to your liking. Duplicate that path and make it #fff – this copy will be the mask. Unlike my earlier post where I mentioned making the mask path wider than the original, this time it needs to be the exact width as the underlying path. If it’s wider, you’ll inadvertently be showing extra parts of the original path at perpendicular intersections. (Note: making a duplicate path for a mask reveal is only necessary if you want to use dashed strokes. If you’re using solid strokes only, you can simply animate them directly with the DrawSVG plugin.) At all points where the stroke should be going behind the subject, draw a polygon over the subject with a color of #000. All these polys will be a part of your SVG mask along with the stroke mask that will animate. The polygons will be static but will scale perfectly. For my demo, I used three separate strokes to create a simple tube effect as it draws and you can see a bit of the perpendicular intersection reveal problem if you watch for it. It’s not too bad, but something to keep in mind. As mentioned above, if you’re using a solid stroke and don’t need dashes, no mask path will be necessary and this isn’t going to be an issue for you. You would just need your subject masking polygons. Finally, I put the image into a containing div and let the image drive the size of it. Place your SVG into the div with absolute positioning and a width of 100% so it can scale along with the image and containing div. All that’s left after that is to control the mask reveal and animate any changes in the stroke that you like. Note: the demo uses the DrawSVG plugin which is a Club GreenSock perk at the Simply Green membership level. I highly recommend it. Happy tweening everyone.
  22. Yep - that is definitely one of my favorite GreenSock features. It's one of those things that might take a new user a bit to discover, but once you find it, you'll wonder how you went without it. Easing an individual tween is certainly nice, but animating an entire timeline from/to a buttery smooth* start or finish with one line of code - now that's powerful and so cool. *Disclosure: 'buttery smooth' phrase is completely stolen from Jonathan.
  23. Hi kleeman If you'd like to smoothly accelerate or decelerate a timeline you can do that with timeScale() Something like this: TweenMax.fromTo(yourTimeline,1,{timeScale:1},{timeScale:0}); Here's a nice GreenSock pen that shows it in action: http://codepen.io/GreenSock/pen/LuIJj/ Hopefully that helps a bit. Happy tweening.
  24. Ha! I was just thinking the same thing. I completely missed that.
  25. Hi marcamos Nice demo. I think you can get what you need by putting the yoyo on the tween rather than the timeline. var tl = new TimelineMax(); tl.staggerFromTo('.box', 0.5, {scale:1}, {scale:1.1, repeat:-1, yoyo:true}, 0.1); Here's a fork of your pen with that change. http://codepen.io/PointC/pen/wGwvRp Hopefully that helps a bit. Happy tweening.
×