Jump to content
Search Community

Animation banner when running, does not yield to page load

perfG1 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

I derived this sample ad from Animation banner source and am running into a problem - 

1. My CMS is WordPress and when I execute this script (https://jsfiddle.net/perfG1/saszahh2/#&togetherjs=HM9o0j28ru) it stops loading the page completely. Even after the animation stops, I cannot make the page load resume.

2. This is my first attempt at animation and I am sure there are glaring omissions in my code - Need your help in resolving it.

 

 

Link to comment
Share on other sites

One thing I noticed was that there's an order-of-execution problem - you're loading (and executing) the LPBanner.js script that's attempting to find (and animate) various content that doesn't exist yet because you're adding it later down the page. Make sure all your content exists before you animate it :)

  • Like 2
Link to comment
Share on other sites

I am new to HTML5/ CSS/ Javascript programming... The intent of the code is to load animation only after the page has completely loaded. In addition, once the Animation completes execution, it should return control back to the browser.

 

To address your observation above, I moved the LPBanner.js and other JS files to within the callback function that gets called when page load is completed but nothing happens... What am I doing wrong? My latest version of code is at the same link as shown above.

 

Sree

Link to comment
Share on other sites

I would echo what GreenSock and retropunk have both said. It seems to be an order of execution problem, could you simplify it? What exactly is it that you are trying to achieve? 

 

If you are trying to inject a banner after the page has loaded, then you should also only inject the LPBanner.js after you injected the HTML which it refers to. I am not too familiar with the approach you are using and how JSFiddle order the loading of files/assets to be sure if you are doing it right or not.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Some progress, finally! I used JSFiddle https://jsfiddle.net/perfG1/7mc57483/#&togetherjs=JMi3Ex9BKA to create a simple animation script. I can now embed this using JSFiddle to get this https://pgurus.com/test. What I would like to do is

1. Just display the 300x250px ad (not the window  into which it is embedded in).

 

How do I accomplish this?

 

Thanks in advance!

 

Sree

Link to comment
Share on other sites

I am not sure if I got your question right so, forgive me if I misunderstood.

 

Are you asking how to embed a JSFiddle into your website without the JSFiddle wrapper? I do not have experience with JSFiddle or what they offer as a service but my guess would be that you have to have that border around your Fiddle. Maybe someone who uses JSFiddle might correct me and say it is possible. It is just my gut feeling that they would not allow for embed unless their branding goes with it.

 

What you really need is for your website to host the files yourself. You said your CMS is wordpress, if you iFrame the ad in, it should work (assuming you upload to the same domain as your wordpress instalation).

 

Hope that helps.

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