Jump to content
Search Community

'Pulsing' Button could this be done in a better way?

Presuming Ed test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

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

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

 

 

  • Like 5
Link to comment
Share on other sites

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

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.

 

  • Like 2
Link to comment
Share on other sites

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

 

  • Like 6
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...