Jump to content
GreenSock

PointC last won the day on May 26

PointC had the most liked content!

PointC

Moderators
  • Posts

    5,074
  • Joined

  • Last visited

  • Days Won

    411

Everything posted by PointC

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. The GSAP animation feels different because of the easing you have on the tweens. When you ease in and out of an animation it will naturally start slower, speed up and then end a little more slowly. Your first tween is ending slowly and the second one is starting slowly so it feels like it hangs for a bit. You can solve this a few different ways. You could set an easeIn for your first tween and an easeOut for the second. Since you're bringing the size right back to it's original value, you could also use one tween and add repeat:1 and yoyo:true like this: TweenMax.to(btn1, 0.7, { fontSize: 24, autoRound:false, ease:Power1.easeInOut, yoyo:true, repeat:1, delay:0.7 }); // you can play with the eases to your liking If you want to experiment with some eases, please take a look at my GreenSock Easing Playground: http://codepen.io/PointC/pen/RaVEpP And don't miss the Ease Visualizer http://greensock.com/ease-visualizer Just my 2 cents worth - but you're starting to line up a lot of tweens and coding a lot of delays to get the timing right. I'd recommend using a timeline instead. Timelines make your life easier and are made for sequencing tweens. I'd also echo Jonathan's advice about using GSAP to set() your properties. Hopefully that helps a bit. Happy tweening.
  17. Some? You have to 'heart' all my work. I'm very insecure. Glad to help. Happy tweening.
  18. Hi KerryRuddock Looks like you've got 2 tweens happening at the exact same time and the second one that animates to a size of 20 has overwritten the first one. I'm assuming your starting font size is 20 so it looks like nothing is happening. Please try it like this: TweenMax.to(".btn1", 0.7, { fontSize: 24}); TweenMax.to(".btn1", 0.9, { fontSize: 20, delay:0.7 }); or use a timeline like this: var tl = new TimelineMax(); tl.to(".btn1", 0.7, { fontSize: 24}); tl.to(".btn1", 0.9, { fontSize: 20}); Hopefully that helps. Happy tweening.
  19. Have you taken a look at Blake's Doodle Morpher Pen? http://codepen.io/osublake/pen/dYVNYd/ He's also got a cool Line Trails pen that may be of some help: http://codepen.io/osublake/pen/mEpado Happy tweening.
  20. If you haven't been to Petr Tichy's site yet, I highly recommend it. He's a wizard with ScrollMagic. https://ihatetomatoes.net/scrollmagic-tutorials-for-complete-beginners/ https://ihatetomatoes.net/5-days-with-scrollmagic/ Happy tweening.
  21. Hi KerryRuddock Welcome to the forums. Looks like Carl gave you some good answers and I'll just add my 2 cents with some additional links to forum posts that should be helpful: http://greensock.com/forums/topic/14235-about-irregular-collision-javascript/?hl=hittest#entry60402 http://greensock.com/forums/topic/14412-hittest-without-draggable/ http://greensock.com/forums/topic/14244-how-to-do-collision-detection-with-css-plugin/ Happy tweening and welcome aboard.
  22. Hi Jud_ben Welcome to the GreenSock forums. You don't have to have a paid membership to get help here. Everyone is welcome to ask for assistance. Just an FYI - you mentioned using DrawSVG which is a Club plugin. You may try it out on CodePen, but to use it in your projects you would need a Club membership. As far as opacity or autoAlpha not working, it's hard to say without a CodePen demo. Showing that to us would be most helpful. A few things to check: If you're loading TweenMax and other scripts locally, make sure you're pointing to the right directory and don't have typos in your filenames. Be sure you're not using links to the CodePen only versions of the GSAP files Make certain the scripts are loaded before you try to animate something. As I mentioned - if you can create a CodePen for us that demonstrates the problem, we can be of more help to you. Happy tweening.
  23. Hi pauljohnknight If I understand your question correctly, you need to get to the paths inside the group. You've got quite a few paths in there, but right now you're targeting the entire #letter_m group. If you want to do something like staggering the individual paths, you could do this: TweenMax.staggerFrom ('#letter_m path', 1, {scale: 2, autoAlpha: 0, ease:Power4.easeOut},0.5); If you want to target one specific path in the group, you'd have to give that path a class or ID. Hopefully that helps. Happy tweening.
  24. Hi gmw If you change lines 57 and 58 to these, I think you'll get the outcome you'd like: tl2.set( leftFace, {fill: 'green', immediateRender:false},0) tl2.set( rightFace, {fill: 'silver', immediateRender:false},0) Hopefully that helps. Happy tweening.
  25. Hi gmw I think I understand what you're asking about some elements not appearing when you try to animate them again. The reason for that is the opacity is already at 0 and you're using a from() tween with an opacity of 0. You're animating from 0 to 0 so those elements are invisible. Take a look at this sample code. Assuming we start with a box that has a starting opacity of 1. tl.from(".box", 1, {opacity:0}) // works fine tl.to(".box", 1, {opacity:0}) // works fine tl.from(".box", 1, {opacity:0}) // won't work - this is a 0 to 0 animation because the opacity is already 0 from the previous tween To solve this you could use a fromTo() tween like this: tl.fromTo(".box", 1, {opacity:0}, {opacity:1}) Hopefully that helps a bit. Happy tweening.
×