Jump to content
Search Community

Possible to use zepto.js with GSAP instead of jquery for banner ads?

somnamblst test
Moderator Tag

Go to solution Solved by Carl,

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

I used this codepen demo

 

See the Pen Dtqwz by GreenSock (@GreenSock) on CodePen

 

to create a 728x90 banner ad that will ultimately be uploaded to Doubleclick Studio. In DC's documentation they strongly oppose the use of jquery, though just a few weeks ago the documentation said if you have to use jQuery use jquery 1. 

 

  • jQuery is not recommended for HTML5 ads for these reasons:As an alternative, you can use zepto.js.
    • Degraded performance on mobile devices because of reliance on time-based animations.
    • Unnecessary file weight: the majority of the library's functionality isn't required.
  •  
  • When I try to use an earlier (smaller) version of jquery it breaks the animation. Or I could just be implementing it wrong. The frame source of the codepen I used has these scripts in this order.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script>

 

Thanks in advance for the awesome patience of the moderators :)

 

 

 

See the Pen JdaPxY by anon (@anon) on CodePen

Link to comment
Share on other sites

  • Solution

Here is that demo forked to use Zepto as the selector engine http://codepen.io/GreenSock/pen/QbVWbz

 

Zepto does not have a slider component or the same syntax for click events so I removed that code.

 

Also, TweenLite automatically searches for $ and if it is found, will automatically use whatever $ is as the selector engine.

 

If no selector engine is found, TweenLite will pass all string selectors to querySelectorAll() (if supported by the browser) so you can do stuff like

TweenLite.to("p.special", 1, {opacity:0);
TweenLite.to("h1, h2, h3", 1, {opcity:0); 

without any selector engine like jQuery or Zepto

  • Like 3
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...