FrontDev

my solution was this. function cnc() { cnt--; tl.pause(); if(cnt > 0) { tl.resume(); }else{ tl.kill(); } } And it worked well in my case. But thanks anyway for your approach. It sounds logical to me as well. ?

This is my solution. I'll load (subload) the css file later and therefore also the images. Only the HTML and JS Files are initial Load. <script> const csshref = "./css/style.css"; document.addEventListener("DOMContentLoaded", function(event) { window.setTimeout(function() { const headElement = document.getElementsByTagName('head')[0]; const cssElement = document.createElement('link'); cssElement.rel = 'stylesheet'; cssElement.href = csshref; headElement.appendChild(cssElement); }, 1000 /* 1 second delay */ ); }); </script> I also switched to GSAP3 and replaced the TweenMax. The only problem I have now is the loop. How do I adapt TweenMax.killAll(); to GSAP3? function byID(a){ return document.getElementById(a); } function initAnimation() { tl = gsap.timeline({repeat:-1, paused:true}); tl.set('#banner', {display: "block"}, 0); tl.set(['#txt1','#txt2'], {backgroundPosition:'0px 0px', opacity:0}, 0); tl.add([ gsap.to('#txt1',{duration:.6, backgroundPosition:'0px 0px', opacity:1,delay:.2}), gsap.to('#txt2',{duration:.6, backgroundPosition:'0px 0px', opacity:1,delay:.5}), ],"+=1"); tl.call(cnc, null, this, "+=0"); tl.add([ gsap.to('#txt1',{duration:.5, opacity:0}), gsap.to('#txt2',{duration:.5, opacity:0}), ],"+=5"); tl.play(); //console.log(tl.duration()); } function cnc() { cnt--; tl.pause(); if(cnt > 0) { tl.resume(); }else{ gsap.killTweensOf(); } } var ad = byID('#banner'), cta_wrapper = byID('cta_wrapper'), cnt = 2, tl, b = {a:0};; window.onload = initAnimation;

Thank you @ZachSaucier ? Yes that is an old example from an older banner set. But I will definitely look at the new GSAP3 and use it in the future when the stuff around it is much lighter in weight. I just need a solution to reload parts of the banner. Initial file load: Includes all assets and files necessary for completing first visual display of the ad and requested before load event dispatched by the window object.

Hello everyone, I am new here. ? Can anyone here help me with the implementation of the iab inital load / subload? The publisher rejects the banners because they are too heavy. (Initial Load: max. 200 KB, Subload: max. 300 KB). How can I implement this initial load in my existing banner script the easiest. Thank you already for your support. function init() { TweenMax.to(banner, .5, {display: "block"}); initAnimation(); } function byID(a){ return document.getElementById(a); } function initAnimation() { tl = new TimelineMax({repeat:-1, paused:true}); tl.set(['#txt1','#txt1_1'], {opacity:0}, 0); tl.add([ TweenMax.to('#txt1', .6, {opacity:1,delay:.2}), TweenMax.to('#txt1_1', .6, {opacity:1,delay:.5}), ],"+=.5"); tl.call(cnc, null, this, "+=0"); tl.add([ TweenMax.to('#txt1', .6, {opacity:0}), TweenMax.to('#txt1_1', .6, {opacity:0}), ],"+=5"); tl.play(); //console.log(tl.duration()); } function cnc() { cnt--; tl.pause(); if(cnt > 0) { tl.resume(); }else{ TweenMax.killAll(); } } var banner = byID('banner'), cta_wrapper = byID('cta_wrapper'), cnt = 2, tl, b = {a:0}; window.onload = init;