Share Posted November 5, 2018 Hi all I'm trying to create a 'pulsing' button where the button starts at 100% scale, increased to 110% scale and then decreases again back to 100% on an infinite loop. The code I have is: var tl=new TimelineMax({repeat:-1, repeatDelay:2}) tl.from(this.Button_MC, 2, {scaleX:1, scaleY:1, ease:Back.easeOut.config( 30, 1)}) but I realise this might be a crude way of doing this it's not very smooth. I realise it's such a simple thing to achieve but i can;t get my head around it. I kind of want to add some sort of ease to the enlargement so the animation is really refined. Could somebody suggest a better way? i'd also like to make the button darker as it enlarges. PS. I'm using Animate CC Thanks Link to comment Share on other sites More sharing options...
Share Posted November 5, 2018 Easiest way to do achieve that would be using CustomBounce plugin. https://greensock.com/docs/Easing/CustomBounce See the Pen OaPqJe by Sahil89 (@Sahil89) on CodePen 5 Link to comment Share on other sites More sharing options...
Author Share Posted November 5, 2018 Thanks Sahil Unfortunately it's not working. Does custom Ease work in Animate CC 2017? Here's the code I used var myBounce = CustomBounce.create("myBounce", {strength: .5, endAtStart: true}); TweenMax.from(this.Button_MC, 1, {scale: 1.1, repeat: -1, ease: myBounce}); I've also loaded in the following to Animate CC https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/utils/Draggable.min.js https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase.min.js Any ideas what I'm doing wrong? I'm a beginner in GSAP! Thanks Link to comment Share on other sites More sharing options...
Share Posted November 5, 2018 You are using codepen only link, that won't work locally or on other sites. CustomBounce is part of club plugins https://greensock.com/club. You can also edit and create custom ease using ease visualizer https://greensock.com/docs/Easing, you will save a lot of time using CustomBounce and other plugins that come with club membership. 4 Link to comment Share on other sites More sharing options...
Share Posted November 5, 2018 In order to use CustomBounce, you also need CustomEase. And yes, they should both work in Animate CC. The demo Sahil provided should be plenty though for you to experiment and get the exact effect you want. I'm not really sure what that is, but here is another using a yoyoEase which allows you to specify any ease you want for the "reverse" part of a yoyo animation See the Pen YRPoOo?editors=0010 by GreenSock (@GreenSock) on CodePen 5 Link to comment Share on other sites More sharing options...
Share Posted November 5, 2018 I was overthinking I guess, here is similar effect using Bounce. See the Pen GwgVmN?editors=0010 by Sahil89 (@Sahil89) on CodePen 5 Link to comment Share on other sites More sharing options...
Author Share Posted November 5, 2018 Of course! Yoyo, I knew there was perhaps an easier way. Thanks for your help, this seems to work a treat! How about changing the colour as it pulses, is this something I can do without a Club Greensock plugin? Link to comment Share on other sites More sharing options...
Share Posted November 5, 2018 Just change the background color. See the Pen BGNBee by PointC (@PointC) on CodePen 3 Link to comment Share on other sites More sharing options...
Author Share Posted November 5, 2018 Thanks for this. For some reason the color change isn't happening. I've written the code exactly so maybe it's something to do with animateCC? The background box is a movieclip and the shape nested within that is a drawing object so everything looks fine. Here's the code: TweenMax.to (this.Button_MC, 0.75, { backgroundColor: "#000000", scaleX:1.04, scaleY:1.04, repeat:-1, ease:Power0.easeOut, yoyoEase:Power0.easeOut }); The animation is running perfectly, but the colour change isn't working! Any ideas? Thanks in advance Link to comment Share on other sites More sharing options...
Share Posted November 5, 2018 I'm not sure as I'm not at all familiar with Animate. What actually has the background color in your project? The movieclip or the child shape? Can you target that shape? I wish I could be more help. Maybe someone familiar with Animate will have a better answer. Happy tweening. 2 Link to comment Share on other sites More sharing options...
Share Posted November 5, 2018 backgroundColor is a css property and has no meaning in the Animate CC / EaselJS world. You can use the EaselPlugin to animate color effects in Animate CC from the EaselPlugin docs: //tween the tint of the circle to green and scale it to half-size TweenLite.to(circle, 2, {scaleX:.5, scaleY:.5, easel:{tint:0x00FF00}}); https://greensock.com/docs/Plugins/EaselPlugin You can load the EaselPlugin from this CDN URL https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/plugins/EaselPlugin.min.js 6 Link to comment Share on other sites More sharing options...
Author Share Posted November 5, 2018 Thanks everyone for your help, it's been really helpful. Coding in Animate is such a steep learning curve, but i do think using the code makes such a more refined animation than the timeline. To be honest, i could have done the button in 10 minutes on the timeline, but I wanted to push things a bit using GSAP! Thanks again 2 Link to comment Share on other sites More sharing options...
Share Posted November 6, 2018 20 hours ago, Presuming Ed said: Thanks everyone for your help, it's been really helpful. Coding in Animate is such a steep learning curve, but i do think using the code makes such a more refined animation than the timeline. To be honest, i could have done the button in 10 minutes on the timeline, but I wanted to push things a bit using GSAP! Thanks again I've always found the Animate interface clunky and buggy especially since I started hand-coding. Animate has far too many panels and you can accidentally move them out of place. Try pushing yourself more into pure hand-coding to avoid some of these issues. You'll obviously need to learn HTML, CSS and JavaScript, but it's worthwhile. Not sure what type of project you're working on, but the infinite looping could be an issue. If it's a banner ad, then you cannot have infinite looping animation of any kind. You either have to loop x amount of times or give the user control over the looping. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now