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

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

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

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

 

 

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

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?

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

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

 

 

 

 

 

 

 

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

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

 

 

[Newbie Question about Cycle Property]

2 hours ago, PointC said:

Staggering left and right sounds like you'd want to cycle the x position. Here's a quick example.

 

See the Pen gveqRM by PointC (@PointC) on CodePen

Hopefully that helps. Happy tweening.

 

 

Got it! Thanks for your help. At first it was doing the same as before and then i realised it was all to do with the x values not being correct! Doh! I always tend to look for more complicated solutions and forget the obvious!!

Thanks again for your time

 

[Newbie Question about Cycle Property]

Thanks man thats works fine. I think i'm getting confused with this property though. What I'm trying to do is cycle so that some items fly in from the left and some from the right, alternately. Am I setting this up correctly?

 

Thanks in advance!

[Newbie Question about Cycle Property]

Hey

 

I'm getting to grips with using GSAP in Animate cc, and I've come across the  cycle property and am trying to cycle through an array, as follows:

 

var items = [this.item1,this.item2,this.item3]
var tl = new TimelineMax();

tl.staggerFrom(items, 2, {autoAlpha: 1,scaleX: 0,scaleY: 0, ease:Bounce.easeOut, cycle:[-100,100]}, delay:2}, 0.1)

 

but it seems to ignore the cycle request. I've noticed people use list items within HTML, so is this the reason it won't work?

 

(Sorry no codepen)

 

Thanks!

[Basic question about exporting *Newbie Alert*]

5 minutes ago, davi said:

No. Use Quicktime Player (app that comes with Mac) to do a screen recording (File > New Screen Recording). Depending on what version of OSX you're using, it'll record either ProRes (super) or MP4. MP4's will look like crap if you're using the color red though.

 

Doh! Of course, makes perfect sense now

 

Yeh its just in case I ever want to upload animations to YouTube for example

 

 

[Basic question about exporting *Newbie Alert*]

20 minutes ago, davi said:

You can use the Intersection Observer API to determine if it’s onscreen and then some other simple JS method to trigger the start of the Animate CC animation (like calling to the GSAP TL to play back) as the user scrolls down. I believe you can also use IO within the iframe's code too, so it can still be separate from the CMS. Lots of IO libraries out there too to make it easier >

https://github.com/russellgoldenberg/scrollama

https://xtianmiller.github.io/emergence.js/

https://github.com/w3c/IntersectionObserver

 

As far as videos, you can try exporting video but it may not work. I typically just use QuickTime and do a screen recording, then trim/crop/etc in AE (or use ScreenFlow if you have it).

Many thanks for your help.

 

Are you saying that I could output in Quicktime from Animate CC and Greensock export ok?

 

How do I export as QT?

 

 

[Basic question about exporting *Newbie Alert*]

10 minutes ago, Oliver16Years said:

As I know Animate can export animation frames. From them You can render an .mp4 with ffmpeg or Premiere or maybe it can natively export movies ( Sorry I don't have this kind of Adobe life sentence )
But, it won't work with GSAP timelines, only keyframe tweens can be exported this way.

 

Thinking about it, a workaround might be to export an SWF and then use some sort of third party convertor to create an MP4?

[Basic question about exporting *Newbie Alert*]

Thats such a shame, Greensock makes it so much easier than using big bloated timeline animations!

 

Thanks for your help

[Basic question about exporting *Newbie Alert*]

Thanks for this, I'll give it a try.

 

Incidentally, is there any way to create .Mp4/.MOV files from HTML5/Greensock, or would I need to create an Actionscript document and export from that?

[Basic question about exporting *Newbie Alert*]

3 minutes ago, Oliver16Years said:

You can export it as HTML and put it into an iFrame on the site. This way the banner's HTML will be completely separated from the other parts of the site. You have to be able to insert an iFrame into the CMS.

 

Thanks for this, this was one area we were going to explore!

 

The problem is, ideally we want the animation to play when the graphic comes into view (when the user scrolls down). It's kind of tells a story so if it started automatically when the page loads the user might not see the beginning and it wouldn't make sense.

 

 

[Basic question about exporting *Newbie Alert*]

Hi all

 

I've created a very basic banner in HTML5 using TimelineLite in Animate CC.

 

We want the banner to run on a standard webpage, because of this we wanted to add the animation using our existing CMS, so basically didn't want to hardcode the Animate CC HTML5 code within the existing website HTML5.

 

So what is the best way to export for this purpose? SWFs are off the table. Originally I tried exporting as a movie, but it didn't export any Greensock code so the whole thing was a disaster.

 

I am a newbie who hasn't touched any of this since the days of AS2, so any help would be appreciated!

[Greensock vs Timeline animations]

Hey Carl

 

Many thanks for your response it kind of all make sense!

 

Because I'm a designer, it's always easier for me to do things visually, hence why I previously use timelines in animate CC. I'm not a coder whatsoever!

 

When I used Tweenlite previously on AS2 it was mainly a case of copying code and changing values, I understood some of it, but not so much. To do complete animations using code looks incredibly intimidating!!

 

Anyway, I think it's the terminology I struggle with when you talk about 'calling functions' for example etc. Do you think I need more of a basic knowledge of javascript before I can use greensock more productively? I kind of understand the idea on the example, where the coder created all the tweens at first and then put them together in timelineMax at the end to create a final timeline.

 

I suppose it's the syntax I struggle with; what things are available, that type of thing.

 

How would you recommend learning? Playing with various greensock lines of code and seeing what happens, or do you think I need to start reading up on the basics of Javascript first?

[Greensock vs Timeline animations]

Hi all

 

I'm a newby to Animate CC using HTML Canvas, although I used to use Greensock tweens about 7 years ago using AS2 back in the days of Flash, and reluctantly abandoned ship when all the 'anti flash' propaganda started appearing.

 

Anyway, I'm back on the saddle with animation once again.

 

Previously, I used to use Greensock to create interactive graphs/flash websites and that type of thing. Now I'm concentrating on longer animations/infographics and originally my plan was to focus on timeline based stuff.

 

However, I was always really pleased with results previously using Tweenlite etc and wanted to ask people if it is feasable to use something like TimelineMax/TweenMax for longer (3-4 minute) animations, or are these products not really suited to this type of project?

 

From what I recall, previously, all movieclips used to have to be placed on the stage at the beginning of the animation before I could Tween anything. So how would this work for longer animations? If, say I wanted graphics to appear later on in the animation? Is it a case of stringing many TimelineMax delays targeting individual movie clips or does this sound like a bad idea?

 

Any answers would be greatly appreciated, thanks in advance