Jump to content
GreenSock

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. You read my mind Carl. I immediately thought of timeScale() as a possible solution. http://codepen.io/PointC/pen/grBZRN/
  2. Hi celopez16 Welcome to the GreenSock forums. Draggable's getDirection() method can take care of that for you: http://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/getDirection/ Happy tweening.
  3. Hi kahn Welcome to the GreenSock forums. To reverse the timeline when the mouse leaves the SVG you can add the following: $('.st0').mouseleave(function(){tl.reverse();}); Hopefully that helps. Happy tweening.
  4. Hi KarenHuang Welcome to the GreenSock forums. I really like Blake's solution for you and it is the most elegant approach. That being said, you mentioned not understanding the syntax so it may be a bit confusing. With that in mind, I made more simplified solution for you. I took your two timelines and added them to a master timeline. I added a label to your main timeline that serves as the stopping point on the reverse animation. You can then play the main timeline from start to finish, play it in reverse to the stopping label and then play the last two letters as their own timeline animation. This is more of the manual 'brute force' approach, but may be a bit easier to understand: http://codepen.io/PointC/pen/OXoAKk/ Blake has provided great comments and links in his solution and I encourage you to read through everything and follow his links. Since you're just getting started, I'd also recommend some additional reading and learning. http://greensock.com/get-started-js http://greensock.com/jump-start-js The GreenSock JumpStart Collection on CodePen: http://codepen.io/collection/ifybJ/ Hopefully that gets you started. Happy tweening and welcome aboard. PS When using SVG text, you'll want to animate the fill:"#FF0000" instead of color:"#FF0000"
  5. Hi ricnunes Welcome to the GreenSock forums. If I understand your question correctly, I think Blake's Spring Connections pen can guide you in the right direction: http://codepen.io/osublake/pen/vKdGAy/ That pen is using the new ModifiersPlugin. If you haven't seen it yet, here's some more reading about it: http://greensock.com/docs/#/HTML5/Plugins/ModifiersPlugin/ Hopefully that helps a little bit. Happy tweening.
  6. Hi dmaller Welcome to the GreenSock forums and thanks for becoming a Club Member. For separate hovers like that, you'll want to use jQuery's each method. Each element gets its own timeline and you can hover over/out without triggering the others. Here's a fork of your pen with that solution: http://codepen.io/PointC/pen/yJqQqj/ Some more reading about each() https://api.jquery.com/each/ Hopefully that helps. Happy tweening and welcome aboard.
  7. PointC

    Fluid Animation

    Hi vaarellano Welcome to the GreenSock forums. The problem with the animation not looking smooth is that you're not really animating anything. You're showing and hiding 3 different 'poses' of the same SVG which is really no different than a 3 image spritesheet. If you want your animation to work like the dribble example, you'll need to do a few things. I'd recommend some clean up and re-grouping of your SVG. You'll need a few groups with IDs or classes so you can control them. I'd say you'd want one for the upper body, one for lower body and one for the shoulder/arm/axe. The shoulder and arm group should be a child of the upper body group. You can then rotate it independently around a point in the middle of the shoulder joint and it will also go along for the ride with the upper body movement. You could also put the axe in its own group so that could also be independently rotated, but I think just following the arm rotation should get you pretty close. After you've got the SVG ready, it would be a matter of finding the correct origin point and setting your rotation animations. For the 'whoosh' semi-circle, you could use a mask to reveal that. I did something similar with my Movie Countdown pen: http://codepen.io/PointC/pen/jqaKYL I used the DrawSVG plugin for that pen, which is a Club GreenSock perk. You can try it on CodePen, but to use it in your projects, you would need a membership. I probably wouldn't worry too much about that semi-circle right now. It sounds like you're just getting started with GSAP so I'd recommend focusing on the SVG rotation animations. After you're happy with those, you could revisit the semi-circle animation reveal. Hopefully that gets your started. Happy tweening and welcome aboard.
  8. Hi marcode777 Welcome to the GreenSock forums. I'm glad to hear that you're enjoying the platform. To make your element repeat again, you can change line 32 to the following: $('.btn').click( function(){ Anim.play(0) }) ; That will play from the beginning each time you click. To rotate in place, I'd recommend putting your text into an absolutely positioned div and rotate that. Right now you're rotating a <p> tag which is a block level element. That's why the rotation circle is so big. To see what I mean, try temporarily setting a background color on your .w class and then watch it rotate. If you create a little div to hold your "To Do List" text and rotate that, it should work fine for you. Hopefully that helps. Happy tweening and welcome aboard.
  9. Hi Visual-Q According to the docs, the ModifiersPlugin is not included with TweenMax so you'll need to load it separately. http://greensock.com/docs/#/HTML5/Plugins/ModifiersPlugin/ Happy tweening.
  10. Hey celli I think you could just use the invalidate() method and only one timeline like this: var tl1 = new TimelineMax({onComplete:function(){tl1.invalidate().restart();}}) Hopefully that helps.
  11. Hi Lauren Johnson The quick flash of the red circle can be eliminated by setting the visibility of the element to hidden in your CSS. You then make it visible again by setting the autoAlpha to 1 in your tween. Yes - you can have an image follow the path too. I've forked the GreenSock pen and used a png instead of the red circle. I've also added the hiding/revealing of the element so you don't see the quick flash. http://codepen.io/PointC/pen/vKaBxQ For future questions, I'd recommend starting a new topic. When you ask a new question at the end of a thread that is already marked as answered, it can easily get overlooked. Happy tweening.
  12. Looks like Blake has a really nice pen there - I'd go with something like that. Just an FYI in case you haven't seen it yet - you should also take a look at the new Modifiers Plugin. It's handy for making a seamless loop. http://greensock.com/docs/#/HTML5/GSAP/Plugins/ModifiersPlugin/ Happy tweening.
  13. Hi gmw If you use x instead of left we can make this work. Switch line 34 to this: TweenLite.set(cloud, {x:-100, opacity:0}); and line 41 to this: .to(cloud, 6 + (Math.random() * 8), {x:0, ease:Linear.easeNone}, 0) Once I made that change, your clouds started moving and fading out. Hopefully that helps. Happy tweening.
  14. Ha! That put an image in my head of the GreenSock Great Hall with giant green chairs at one end. "Jack and Carl will now hear your animation questions." I looked at this demo and was also confused. The only tween that seems to fire is the second one. If you add a tiny delay to one of them, they both work. I don't animate much of anything by adding and removing classes, but it seems like this should work.
  15. Hi Learning Add the position after the stagger like this: .staggerTo( 'img', 1, { scale: 1.2}, 1, 0 ); More info in the docs: http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/staggerTo/ Happy tweening.
  16. HI jesper.landberg Labels are your friend for something like that. Add a label at the beginning and end of the part you want to play and use the tweenFromTo() method to play between them. Something like this: tl.tweenFromTo("startTest", "endTest"); http://codepen.io/PointC/pen/EKZjpo More info about tweenFromTo() http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/tweenFromTo/ Hopefully that helps. Happy tweening.
  17. Hi sirhclluk I'm not seeing anything in the code that would explain half of your image disappearing upon rotation. That being said, I don't know what the pie variable is or anything about your CSS. Is pie the image itself or some containing div? Is it going outside the bounds of something that has overflow set to hidden? It's tough to troubleshoot without a CodePen demo. If you could provide one for us, that would get you the best answers. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Happy tweening.
  18. Hi BannerBazen Welcome to the GreenSock forums. My guess would be that you're trying to link to the CodePen only files in your local project. Since you're a Shockingly Green Club Member, you have access to all the plugins in your account. Have you downloaded all of those and linked to them in your project? As Dipscom suggested, some more context would be helpful. Happy tweening.
  19. Hi venn That has nothing to do with the DrawSVG plugin. SVG circles always start in the 3 o'clock position so ochalmers solution of rotating the circle 90 degrees is the best answer. Happy tweening.
  20. I can't argue with that statement. It was kind of funny - CodePen picked that one without me tweeting at them. I'm not sure how they even ran into it, but I'm not complaining.
  21. That's a good idea Carl. I wasn't even thinking about labels for that, but that would be better. I've never needed a spritesheet animation for any of my projects, but that's good to know for any need in the future.
  22. Hi redmile I think the easiest approach would be to loop through the first 4 frames and then have a click interrupt that loop, set the background back to 0 and then play the entire animation. When that sequence finishes you can then go back to the 4 frame loop. I made a quick CodePen for you: http://codepen.io/PointC/pen/oLdrPz/ If you could create a pen for your future question that would be helpful in getting an answer for you. Here's the link about how to create one: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Hopefully that helps. Happy tweening.
  23. Hi nep You said you want to move the mask from right to left so I'm assuming this is a soft reveal of the image? I'd agree with Jack and recommend an SVG mask. The pen Rodrigo pointed out is using a solid colored square as the mask, but we can add a black to white linear gradient to the square and get a nice soft edged reveal. Using GSAP we just need to animate the x1 and x2 attributes of the linear gradient: TweenMax.to("#theGradient", 2, {attr:{x1:-800, x2:1}, repeat:-1, yoyo:true, repeatDelay:0.5, ease:Power2.easeIn}) // adjusting the x1 value in the tween can change the reveal. switch it to your liking // the closer you get to 0, the more abrupt the end of the reveal will be Here's a CodePen to get you started: http://codepen.io/PointC/pen/yJjNOX Hopefully that gets you closer to your goal. Happy tweening.
  24. Hi ne0nlight Welcome to the forums. That is being caused by your CSS. You have this: transition: all 0.4s ease; on lines 55 & 73 for your .camera-center and .lighting-center classes. GSAP and CSS are fighting to control the animation. You'll get the best results by not mixing the two. If you remove that from your CSS, everything should work just fine for you. Hopefully that helps. Happy tweening.
  25. Yep - you're calculating the delay correctly. Sorry - I didn't mean to imply that you weren't. I was just looking at your pen and you had 4 tweens and each had a delay equal to the total duration of each preceding tween. That can certainly work, but when you change the duration of your first tween then you have to go and change all your delays. That's what makes a timeline so nice for sequencing. Change the first tween's duration and all the other tweens will adjust accordingly. That's just the beginning of the power of timelines. I'm just trying to make your life easier. Happy tweening.
×