Jump to content
GreenSock

PointC last won the day on October 30 2022

PointC had the most liked content!

PointC

Moderators
  • Posts

    4,966
  • Joined

  • Last visited

  • Days Won

    401

Everything posted by PointC

  1. I have NVIDIA cards in both of my test machines.
  2. I'm seeing the jump on both Win 10 Edge and Win 7 IE 11. All other browsers on both machines are fine.
  3. Hi zonf Welcome to the GreenSock forums. Diaco (one of our moderators) has a cool pen that demonstrates controlling video with Draggable. It can probably give you some ideas. http://codepen.io/MAW/pen/JXXMaB/ Hopefully that gets you started. Happy tweening.
  4. GSAP only animates numeric properties. It doesn't do any of the rendering so I don't see how this could be caused by the platform. It sure looks like a graphics card/driver problem to me. Happy tweening.
  5. We recently had the same cloud animation discussion over here: http://greensock.com/forums/topic/14818-infinitely-repeating-svg-clouds/ Hopefully that helps. Happy tweening.
  6. Hi redrooster I don't see anything in the code that seems like it shouldn't work, but I don't know if you've played the timeline before trying to reverse it. When you reverse a timeline and don't tell it the time from which it should reverse, it will start the reverse from the current playhead position. If you haven't played anything yet, the playhead is at the beginning and won't reverse.You can fix that by changing your last line to this: master.reverse(0); That will start the playback from the end of the timeline. More info about reverse: http://greensock.com/docs/#/HTML5/Sequencing/TimelineMax/reverse/ That's the only thing that stands out to me. It's always best to prepare a CodePen for these questions so we can get you the best answers. Please follow this link to see how to create one. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Hopefully that helps. Happy tweening.
  7. Hi AnimaChambers You are correct. You can add that tween to the timeline and use the position parameter to change its start time. In your case, it looks like you want the fade-out tween to start 1.5 seconds after the SplitText animation begins so you'd write it like this: tl.to("#quote", 2, {autoAlpha:0, y:0, ease:Power1.easeIn}, 1.5); To learn more, I'd recommend taking a look at Carl's blog post about the position parameter: http://greensock.com/position-parameter Happy tweening.
  8. You read my mind Carl. I immediately thought of timeScale() as a possible solution. http://codepen.io/PointC/pen/grBZRN/
  9. 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.
  10. 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.
  11. 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"
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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.
  18. 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.
  19. 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.
  20. 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.
  21. 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.
  22. 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.
  23. 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.
  24. 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.
  25. 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.
×