Jump to content
Search Community

Basic question about exporting *Newbie Alert*

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'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!

Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

18 minutes ago, Presuming Ed said:

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.

 


Try this:
 

document.getElementById( 'bannerIFrame' ).contentWindow.tl.play();


where tl is the GSAP timeline. If You load the banner from the same domain as the site, there can't be a problem.

If You like to control the banner's playback as the user scrolling, try to feed a percentage into
 

tl.progress( myProgressFrom0to1 );


Check the docs for more>
https://greensock.com/docs/TimelineMax

The above example is for DOM. I don't know where is the tl in Animate's HTML.

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

You have to use Flash version of GSAP and convert all frame scripts to ActionScript if You want to export .swf. This seems a dead end to me.

Check out these:
https://slimerjs.org/
http://phantomjs.org/

These are "headless" browsers with screen capture capabilities. If You have the patience and programming skill, You can write a script which is progressing through the GSAP timeline and capturing every frame.

This way, You can make 4K 60fps movies from a HTML anim.

Less effort is to control that iFrame from the CMS page :)

  • Like 1
Link to comment
Share on other sites

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/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).
  • Like 1
Link to comment
Share on other sites

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/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?

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

 

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...