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. Carl & Jonathan - thanks very much for the kind words. @caemostajo I've made another pen to help you understand this behavior a bit better. There are two timelines and two SVGs that are nearly identical. The first one has a shape in each corner and you can see the morph target not only assumes the shape, but the positioning of the new path. The second one is the same except all paths are centered so you get a morph with no position changes. I've also added a toggle so you can see the silhouette of the morph paths that the square is changing into. http://codepen.io/PointC/pen/LGMaoa/ Hopefully that helps you with a further understanding of what's happening with the paths. Happy morphing.
  2. Hi caemostajo Looks like you're having some fun starting to use the morph plugin. Your pen is using three different SVGs of varying sizes which is causing some issues here. You can certainly use paths in separate SVGs, but I personally prefer to use one SVG with multiple paths to get the easiest and best results. I also see two morphs happening at once and I wasn't sure if that was your desired outcome. Is the #axe supposed to morph into the #dot and then into the #brush? I assume that's what you wanted as you mentioned multi-path in your question. I'd recommend creating a single SVG and put your paths at the desired ending point even if they overlap or sit on top of each other. Then, when you are ready to morph, you set the visibility of the path(s) to which you're morphing - visibility:hidden. This allows your starting path to remain visible and take on the shape and position of the morph path(s) I have a demo pen that shows a triangle, square and circle all morphing while jumping here: http://codepen.io/PointC/pen/yejGvb To see how the paths all sit on top of each other, just delete line 11 of my CSS and play the animation. Hopefully this makes sense and helps a little bit. Happy morphing.
  3. Hi gcooke Welcome to the forums. I'm not sure I completely follow your question. It sounds like you're trying to do a bouncing ball type of effect, but your code above is showing three different elements and a duration of 40 seconds so I'm not quite sure. If it is a bouncing ball effect you're looking for, here's an excellent post: http://greensock.com/forums/topic/12741-how-to-animate-a-bouncing-ball-effect/ Here's a great bouncing CodePen by GreenSock: http://codepen.io/GreenSock/pen/4db89a13f37bcb953f38c3ba00b60706 The easiest way to get the best answers would be to provide a CodePen so we can see your code in action. Here's how to do that: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Hopefully that gets you started, but as I mentioned, a demo would be great. Happy tweening.
  4. Hi spacewindow , In answer to your sub question - yes you can target points. These GreenSock pens should be of use to you: http://codepen.io/GreenSock/pen/gPGOxL http://codepen.io/GreenSock/pen/MaabXe/ Check out this blog post as well (Tween complex string-based values section) http://greensock.com/gsap-1-18-0 Hopefully that helps a bit. Happy tweening.
  5. That's a cool tip Carl. I've never used negative numbers to play from the end like that. Makes perfect sense, but I've never done it. I'll put that in the "I've learned something new today" folder.
  6. Hi teamcolab , In addition to Jonathan's great advice, you can also add a label during the testing process (just move it where you need it as you're designing), pause the timeline and play() from that point. The code would look like this: tl = new TimelineMax({paused:true}); tl.to(element,2, {x:400}) .to(element,2, {x:400}) .add("testingLabel") .to(element ,2, {x:400}); tl.play("testingLabel") Here's a really simple CodePen to show it in action: http://codepen.io/PointC/pen/GoPNwP Happy tweening.
  7. Hi caemostajo , Welcome to the forums. Dipscom is right - the overlap is causing some issues here. In particular, the code below shows an overlap of the opacity on the wave path animation. If you remove that overlap (in both wave sections) your pen runs correctly on restart(). .to("#wave", 0.4, {scale:3 ,opacity:1, transformOrigin: "50% 50%"}, "-=0.1") .to("#wave", 0.2, {opacity:0, ease: Expo.easeOut}, "-=0.2")// remove "-=0.2" and it all works as expected I'd also agree that since your second section is the same as your first animation, this is a perfect situation to create a timeline in a function so you can reuse it again. Here are a few posts with some good reading about this process: http://greensock.com/forums/topic/12361-using-functions-to-build-a-timeline/ http://greensock.com/forums/topic/12643-master-timeline-and-the-use-of-functions/ http://greensock.com/forums/topic/13650-controlling-main-thread/ Also be sure to read the blog post and watch the video about the position parameter - it's great! http://greensock.com/position-parameter Hopefully this helps a bit. Happy tweening and welcome aboard.
  8. oh sure Jonathan and Zach - go the extra mile and make new CodePens. Now my answer just makes me look lazy. Nice work guys.
  9. Hi htwinam , Welcome to the forums. You could make that happen. You'd just need to use the vanilla JavaScript equivalent wherever jQuery is being used in Diaco's pen. This site should be quite helpful to you moving forward with your project: http://youmightnotneedjquery.com/ Hopefully that helps a little bit.
  10. PointC

    SVG Gotchas!

    Animation/Workflow tip: Don’t forget - you can animate the viewBox attribute I don’t see this technique in practice (or talked about) very much, but sometimes it may be a better solution than trying to scale elements and center them. To illustrate this easy, but powerful method of SVG animation, I’ve made a simple house tour complete with some GreenSock home décor and a few nods to our great moderators. Take a look: http://codepen.io/PointC/full/OMabPa/ Some additional detailed tips about this process: How do you know the coordinates to use for the viewBox animation? Using Adobe Illustrator, you can simply view the entire SVG and hover over your desired areas for the viewBox and note the coordinates from the info panel. You can also add a square/rectangle over the area(s) you wish to zoom (make it transparent with a dashed border) and then use the coordinates of that shape as your viewBox data. You can even leave the rectangle/square in place during the animation process so you know you’re hitting the right target and then delete it before releasing the SVG into the wild. Keep aspect ratio in mind when using this technique If you start with a square (1:1) SVG, you’ll experience the best results if the areas to which you are cropping/zooming are also square. Likewise, for any rectangular areas - maybe start with a 2:1 ratio and zoom into areas that are also close to that as well. You can certainly zoom/crop to other ratios as seen in my simple demo above (two rooms are square like the SVG, but two rooms are rectangular), but it’s something to keep in mind. Also note that by changing the aspect ratio and/or cropping too close to the edge of the SVG, you can end up with some unwanted white space. As usual, IE hates SVGs You have to remember to set your SVG to overflow:hidden when animating the viewBox attribute in IE or goofy things will happen. Responsive sizing for static web delivery too You don’t necessarily have to animate the SVG viewBox either. Using different viewBox sizes, you can also show different sections of your SVG for different screen sizes. Show the whole thing to desktop users and crop to the most important part for mobile delivery etc. Finally, go big or go home Start with the biggest size you think you’ll need for your SVG. IMHO this goes for any SVG, not just those with a viewBox that will be animated. In my experience, you’ll encounter less trouble scaling down than scaling up. Hopefully this gives everyone some new ideas. Happy tweening.
  11. Hi celli , Sorry - I had to be away from my computer for a bit and didn't have a lot of time to look at it again. Looks like you found a good solution though. I'm not sure why the math doesn't work on your other version, but like you said, maybe someone else has done this effect with more success and can post some thoughts. I've been doing some parallax effects for some galleries recently, but I've been using absolutely position elements and animate the background position along with a clip animation which woks quite well. Anyway - I'm glad you have a working solution.
  12. o.k. - please see if this is more what you need? http://codepen.io/PointC/pen/PZyVQr/ Edit - nope - my mistake - that removes your parallax.
  13. Hi celli , You're exactly right - you just need to adjust the y position. I was able to compensate for your offset by changing your tween to this: TweenLite.to(window, 2,{scrollTo:{y:position1-375}, ease:Expo.easeInOut}); Once I made that change, everything looks right to me - you should get the correct stopping point while retaining the parallax effect.
  14. Thanks Carl. I actually made something similar to your demo when I first started working on an answer for this post, but switched back to the multi-path route for better control.
  15. Nicely done Jonathan! You're working too hard on a Friday night - take some time off - have some pizza or something.
  16. Hi axy2016 , Welcome to the forums. The MorphSVG plugin works path to path - so to make a square morph into three separate circles, you'd have to make your three circles into a single path and I don't think you're going to get the quality you'd like by doing it that way. To get the best results with the most control, I'd say you want to stay with a path to path process. You can make your three initial shapes look like a solid square and then morph to three circles. I made a pen to show you how that could work. http://codepen.io/PointC/pen/yeRXRx I used 2 small squares and a rectangle to create the illusion of one large square and then grouped those three elements so I could control them as if they were just one element. Those three pieces then morph into the circles. The only problem I ran into was that I could see the edges of the three elements making up the 'fake' square even though the positioning was perfect. I solved this by adding a stroke to those paths that matched the background color. I'm not sure what your project is, but hopefully this helps or gives you some ideas. Happy tweening.
  17. Hi SoL2Squiz , Looks like you're having fun getting started with GSAP. The easiest way to accomplish a starting opacity of 0 would be to set() your opacity and visibility with autoAlpha:0 and tween to an autoAlpha:1. Your pen could then be written like this: TweenMax.set(".logo",{autoAlpha:0}); TweenMax.to(".logo", 3, { x: 500, scale: .8, ease: Elastic.easeOut, autoAlpha:1, }); autoAlpha is a combination of visibility and opacity. I personally prefer autoAlpha over opacity because when autoAlpha is set to 0, the visibility is automatically set to hidden for you. That's quite nice as it prevents accidental clicking of elements that have an opacity of 0. Here's some more reading about autoAlpha http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/ The set() method is a way for you to set the properties of your target. It's a convenient way to get your elements to the desired starting state before you tween them. More reading about set(): http://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/ Hopefully that helps a bit. Welcome aboard and happy tweening.
  18. PointC

    SVG Gotchas!

    A quick tip for reversing path points in Adobe Illustrator. 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')
  19. Hi pauloco , Welcome to the forums. This is really more of a ScrollMagic rather than a GreenSock question, but I can certainly answer it for you. Just add reverse:false to your scene parameters like this: new ScrollMagic.Scene({ triggerElement: '#redBox', reverse:false }) The animation will then play when you scroll down, but stay put when you scroll up again. Here's some more reading about it: http://janpaepke.github.io/ScrollMagic/docs/ScrollMagic.Scene.html#constructor Happy tweening.
  20. Just a final thought here. You can group a single element. I made a quick fork of my pen to show you that diagonal movement you were expecting. Notice if I rotate the group with a single child element, the coordinate system rotates, but when I rotate the rectangle by itself, the coordinate system does not change. http://codepen.io/PointC/pen/gPdEOP/ All the best - happy tweening.
  21. Hi again , I don't think anyone meant to be defensive of GreenSock and for my part - I didn't mean to give you info that you already knew. I genuinely thought you were having trouble with the relative positioning. Regarding your current question about rotating the coordinate system, I think I can give you a little bit of info. I completely understand why you'd think rotating a child element would rotate the coordinate system for itself, but it's actually quite good that it doesn't. If you rotated a child element 90 degrees and the coordinate system changed with it, x would now be acting like y and vice versa. Likewise, rotating 180 degrees would cause positive and negative to change. It could get confusing very quickly. In the article Jonathan sent you to, you'll notice she's rotating a parent group of the child to rotate the coordinate system. I made a quick pen to show how you can change the coordinate systems easily by grouping elements. You'll notice in the first SVG, I rotate a group around the child rectangle and it then follows that new coordinate system as you'd expect. http://codepen.io/PointC/pen/zrJyJo Again - I didn't mean to present any information that you already knew. Hopefully future readers that didn't know these things will still learn something from the post anyway. All the best - happy tweening.
  22. o.k. - I think I see what you're saying/asking. It sounds like you're trying to animate an element to a specific set of coordinates relative to the parent SVG ? You're right - it's extremely important to know that all SVG paths, rectangles, circles etc... operate in their own little coordinate world. That means all moves are relative to their own starting position. You're not moving to any specific coordinates of the parent SVG, but rather a specified coordinate/distance from the element's starting point. So all three of these tweens will produce the same results and have nothing to do with the coordinates of the parent SVG: .to(element, 1, {x:100}) .to(element, 1, {x:"+=100"}) .fromTo(element, 1, {x:0},{x:100}) Some may then think to return back the starting point, you'd move x:-100, but you actually move to x:0 (or x:"-=100" would work as well). I made a super simple CodePen to show this: http://codepen.io/PointC/pen/RrYgjo Relative positioning isn't really a quirk of SVGs, but rather an amazing feature because it all scales. For example - say you start with a 1,000 pixel wide SVG with a 100 x 100 rectangle child element in the left corner. To move that to the right side, you'd animate to x:900. Now, assume our parent SVG is scaled to 0.5. The whole thing is now 500px wide, but do we have to change our tween to x:450? Nope - not at all. Everything scales perfectly. You can scale my little demo down and all the boxes move perfectly at any size. It also sounds like you go back and forth between AI and GreenSock so you can change your elements ending position by eye in Illustrator? As you've found out, when you enter the ending coordinates into the tween, it's not going to work like you'd expect. If you do want to eyeball positioning in AI and then feed that info into GreenSock tweens, you have to find the starting and ending coordinates, do a little math to find the difference and then feed the difference into the the tween - not the ending coordinates. So, if you've got an element at master SVG coordinates of {x:80 , y:200} and want to to move it to {x:300, y:300}, your tween would be {x:220, y:100}. Hopefully that makes sense. o.k. - I may have rambled here, but hopefully it helps a little bit.
  23. Hi Acccent , I don't know if you'll find any one specific workflow that works the same for all designers/developers and all projects. You mentioned that you aren't facing any particular problem at the moment, but also said you had some head-scratching on your last project. If you had specific things that caused that head scratching, I'd bet you could get a lot of tips from everyone here to avoid those problems on the next project. The only specific tip I'd offer that works well for me is always design your SVGs at the largest size you'll be needing. I find scaling down causes far fewer issues than scaling up. I'd also recommend keeping an eye on Chris Gannon. He does some fantastic work and posts some helpful videos. Here's one about his alien/UFO animation that has some good information: http://blog.codepen.io/2015/08/03/watch-chris-gannons-svg-animation-workflow/ I'm sure others will jump in with their thoughts, tips and tricks. Happy tweening.
  24. Blake, I think I'm gonna need some proof that you're human. I'm starting to suspect that you're in the Matrix.