Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Mary Pieroszkiewicz

Banner Ad Amination

Recommended Posts

I create my first Ad Banner Animation.

The file size should not exceed 150kb

Animation presentation here: http://www.marypieroszkiewicz.com/animation-gsap/index.html

I am asking for tips, what is enough for this ad amination TweenMax vs TimelineMax or
TweenLite vs TimelineLite

Thanks for help

See the Pen jOVVQwX by mary_pieroszkiewicz (@mary_pieroszkiewicz) on CodePen

Link to post
Share on other sites

Your link shows a video, which of course is more than 150k. I'm assuming you'll be delivering HTML. 

The file size of GSAP isn't an issue for most ad networks if you use their CDN to load it, so you might as well use the latest and full version of gsap 3. The idea is that it will already be cached for most users, so it doesn't count against your total file size. Check the specs for the ad network you're using.

For instance, here are Google Studio's CDN links: https://support.google.com/richmedia/answer/6307288

  • Like 2
Link to post
Share on other sites

I linked a demonstration video of how the Ad animation looks at, which I will code in HTML /CSS /JS. I gave this video to make it easier for me to direct what I have to choose for this animation - TweenMax vs TimelineMax or TweenLite vs TimelineLite

 
geedix thank you for your answer and information

  • Like 1
Link to post
Share on other sites

There's no longer the need for TweenMax, TweenLite, TimelineMax, or TimelineLite - those are all for the OLD version of GSAP. As of GSAP 3, they're all consolidated into a much simpler (and smaller) "gsap" object. See

So that should make your choice much easier :)

 

 

  • Like 1
Link to post
Share on other sites

Not directly relevant to the issue asked about but might be relevant to others who come across this thread: 

 

  • Like 2
Link to post
Share on other sites

Also, of note, that the 150kb max is determined after zipping up assets. However, if it's being site-served, and they don't allow external CDN's or have their own for GSAP, you may have to include GSAP.

Also, I'm only seeing several images being used, and if optimized properly, should easily fit into 150k. If using PNG, make sure to run them through something like ImageOptim and ImageAlpha.

  • Like 2
Link to post
Share on other sites

Thanks for all answers.
 

I will not start a new topic.

How to make a price box animation skew backwards and fully rotatle forward. My Codepen project above. Thank you for tips.

Link to post
Share on other sites
2 hours ago, Mary Pieroszkiewicz said:

How to make a price box animation skew backwards and fully rotatle forward.

Create a timeline. Add a tween that skews your price the way you need to. Then add another tween that rotates it the way that you need to.

  • Like 1
Link to post
Share on other sites

I don't know, how I make a price box perspective rotate and transition the second product at same time
 

I don't know, how I make the transition between the first container with the product and the second container and between the second container and the third container to keep it all smooth
 

As it is in this video presentation.

My Codepen in the first post.

Thank you for help.

Link to post
Share on other sites

Sorry, we don't have the capacity to fine tune your animation to match the specifications that you need to match. But if you have a specific question about how to use GSAP please ask and we'll do our best to help!

  • Like 1
Link to post
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.

×