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. 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.
  2. Some? You have to 'heart' all my work. I'm very insecure. Glad to help. Happy tweening.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. PointC

    GSAP call function

    Hi Kv2 Since you're using a from() tween for the characters in your function, I'd recommend setting the visibility of your .anim-text div to hidden in your CSS and then in your animpar() function add this line before the each() loop: TweenMax.set(".anim-text", {autoAlpha:1}); The reason for that is when you set the visibility to hidden in your CSS and then you animate from an autoAlpha of 0, you'd essentially be animating from 0 to 0 and the words would not appear. Here's a fork of your pen with that solution: http://codepen.io/PointC/pen/XKZPbB Hopefully that helps. Happy tweening.
  12. Hi Theo Welcome to the forums and thank you for joining Club GreenSock. You're gonna love it. Everything you're describing is certainly doable. As far as where to start - I'd recommend the GSAP Jump Start Guide: http://greensock.com/jump-start-js Also take a look at the GSAP Jump Start collection on CodePen: http://codepen.io/collection/ifybJ/ Other than that, start hanging out in the forums to learn from other questions/topics and code some practice animations of your own. Create a few plain divs and start making them move. When you have a specific question or problem, create a CodePen for us and post your question. We'll be happy to assist you. It's always best to start a new topic when you have question. That will get you the most attention and quickest answers rather than posting on someone else's thread. Happy tweening and welcome aboard.
  13. Hey celli I'm not sure if you can do that or not. The placeholder text is an attribute of the input element so that may not be something SplitText can work with. I know you can access it via the AttrPlugin like this: TweenMax.set(document.querySelector(".innershadow"), {attr:{placeholder:"Some new text"} }) But I'm not sure if you can have SplitText do anything with that attribute. Just for the heck of it I tried: var elAttr = document.querySelector(".innershadow").getAttribute("placeholder"); and fed that into SplitText, but got an error. Someone smarter than myself may have a way to do it. Happy tweening.
  14. Hi nbashiri95 Welcome to the forums. Dipscom is right - you want to use duration() for that. It's important to note that by using duration as a setter, you're not changing the actual duration of the timeline, but you are adjusting the timeScale(). If I have 5 boxes and use the following code: tl.staggerTo(".box", 1, {x:500}, 1); tl.staggerTo(".box", 1, {rotation:360}, 1); tl.duration(2).play(); That timeline will play over 2 seconds, but the console will still log the duration as 10 seconds. Here's a simple CodePen with that setup for you. http://codepen.io/PointC/pen/RRLrmb/ Hopefully that helps. Happy tweening and welcome aboard.
  15. Hi grimey It only works with paths but has a utility method to convert your circles, rectangles, etc. to a path. MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline"); More info: http://greensock.com/morphSVG Happy morphing.
  16. Hi miraclemaker Welcome to the GreenSock forums. If I understand your desired outcome correctly, I think you're going to need two paths to make this work. This thread about seamlessly looping a circle should provide some guidance: http://greensock.com/forums/topic/12546-seamless-loop-with-drawsvg/ Hopefully that helps. Happy tweening.
  17. Hi stessyco Welcome to the GreenSock forums. That actually doesn't work in Desktop FF either. SVG 1.1 doesn't support 3D transforms. Chrome will allow it, but not the other browsers. That's probably something that will be available in SVG 2.0. We had a similar discussion in this thread: http://greensock.com/forums/topic/14664-animate-3d-with-greensock-separate-animation-for-children/ Hopefully that helps. Happy tweening.
  18. Hi PR25 Welcome to the GreenSock forums. The library performs extremely well across all browsers and doesn't add much weight at all. Depending on what you're doing, you may be able to get by with TweenLite, but even TweenMax isn't very big and it loads the CSS plugin for you. You may have someone tell you that using CSS animations won't add any weight, but that can shift pretty quickly when you consider the amount of CSS code necessary to animate something when the same thing can be achieved with a few lines (or sometimes one line) of JavaScript. You can download and try GSAP for free, so I'd suggest giving it a whirl. You'll get hooked pretty quickly on the performance and ease of use. Happy tweening and welcome aboard.
  19. You could try this: tl.staggerFrom(".box", 1, { y:400, autoAlpha:0 },2) tl.staggerTo(".box", 1, { y:-400, autoAlpha:0 },2,2) tl.from(".lastBox", 1, {y:400},"-=1") Revised pen: http://codepen.io/PointC/pen/pbALvN Happy tweening.
  20. Hi martis I'd recommend talking a look at ScrollMagic. It's great for that kind of site. http://scrollmagic.io/ Check out Petr Tichy's site for a lot of great info, tutorials and classes about it. He's a great teacher. https://ihatetomatoes.net/ https://ihatetomatoes.net/scrollmagic-tutorials-for-complete-beginners/ https://ihatetomatoes.net/5-days-with-scrollmagic/ Hopefully that helps. Happy tweening.
  21. Hi Technics1210 Have you tried starting with the text at the largest size you will need, set() it to something like scale:0.25 at the beginning and then scale up to 1? I find it's generally much easier to get good results starting with something a bit too big and scaling down rather than trying to scale up. It might be worth a try. Happy tweening.
  22. o.k. - It sounds like you'd want to set up a 'resize' listener and calculate some new values. You'd then create a new tween to overwrite the old one or you have the option to kill() it as well.
  23. Hi qarlo You're right - you have to get new values for the window width so everything works correctly. I moved your window calculations and tween into a function that will play on page load as well as a click of the repeat button. function moveIt() { var windowWidth = $(window).width(); var distance = $('.img-wrap').width() - windowWidth; TweenMax.fromTo(".img-wrap", 5,{x:0} ,{x:-distance, ease:Power3.easeInOut}); } Here's a fork of your pen with that option: http://codepen.io/PointC/pen/VjWWaJ/ Hopefully that helps a bit. Happy tweening.
  24. o.k. - I'll throw my 2 cents worth out here too. I made a little CodePen for you to see the difference. It has two squares with a child square in each. One is an SVG with a child rectangle and the other one is made of two simple divs. You'll see in all browsers that the SVG itself will rotate just like the plain parent div. The child div and child rectangle behave differently. In Chrome, the rectangle in the SVG kind of animates, but it looks more like it's scaling from the center and then back out. In FF and Edge, it doesn't even appear to move. http://codepen.io/PointC/pen/bZWqGj/ I know it's not what you want to hear, but Jonathan is absolutely right. You'll have to wait for SVG 2.0 or go with Blake's suggestion of Three.js. Happy tweening.
  25. PointC

    Unfolding div

    Yep - I see the same thing Jonathan is seeing. No flicker at all, but the divs snap at the end of their rotation. I tested in FF, Chrome and Edge. Windows 10.
×