explorerzip

Thanks for the code snip and for the tip on using CustomWiggle to create a raw SVG path. I've just started playing around with the new cycle property and it's a great code saver. It makes sense that old functions like appendMultiple won't be disappearing anytime soon. I'd rather start getting people to change habits now especially if they're not optimal. Better to change habits and processes now instead of waiting for something to break

Thanks for the quick response Jack! I figured the code was from the AS, but thought I'd check anyway. Good to know that it won't be supported in the next release. Time to send out emails to the team I am aware of CustomEase and CustomWiggle (amazing work BTW), but likely cannot use them in banner ads. I load GSAP using a CDN and have to watch my package file payload carefully to meet IAB specs. Out of curiosity, how big are the CustomEase and CustomWiggle JS files?

Are TweenAlign and appendMultiple still supported in the latest GSAP? I came across this Javascript code snippet in a colleague's hand-coded HTML banner ad: window.TweenAlign = { NORMAL: "normal", SEQUENCE: "sequence", START: "start" }; var counter = 0; /* begin animation */ tl.appendMultiple([ TweenLite.to(steering, 1, {rotation:-20, ease: Sine.easeInOut}), TweenLite.to(steering, 1, {rotation:20, ease: Sine.easeInOut}), TweenLite.to(steering, 1, {rotation:0, ease: Sine.easeInOut}), ], 2, TweenAlign.START, 1); The ad works fine and he's using a Google CDN to load GSAP version 1.20. I assume this code is a holdover from the ActionScript days? I've been using GSAP for years, but haven't come across this before and it doesn't exit in the Docs as far as I can tell. Has tl.appendMultiple been replaced by tl.add and has TweenAlign has been replaced by the TimelineLite position parameter? The ad still works properly, but I want to make sure that my team is not using old code.

Amazing work! I like the NZ police ad with the flashlight. Reminds me of the good ol days of Flash ads where it would follow your mouse movements.

TimelineMax already includes a repeat function. https://greensock.com/docs/TimelineMax/repeat

You have to compress everything: images and code to be within IAB specs.

Compressing images usually has the biggest effect on file size. There are 2 sites that can compress PNG's really well. I find the easiest way to compress JPGs is to do it right within Photoshop. www.tinypng.com www.compresspng.com TinyPng is really easy to use, just drag and drop your PNG files and download the compressed version. There's also a paid Photoshop plugin so you can export the compressed PNG's without opening a browser. CompressPng gives you more granular control over how many colours to include in the image.

Thanks Carl for the input and for making the initial demo for me to copy from If I'm reading your code correctly, does the "wrap" function contain the movement of the "boxes" class between -50 and 450 or any 2 numbers? Thanks again for your help and for all your wonderful videos. I'll update my code with actual images and post it up in the forums for everyone's benefit.

That's a lot closer to what I'm looking to accomplish, but there still is a brief glimpse of the grey wrapper container when the boxes move outside of the red box. I'll keep playing around and see if I can get it closer to what I am looking for. Thanks so much for your help though!

Thanks for the reply, but I can't change the timing from 0.25 to 0 because that would eliminate the animation of the boxes.

Hi Mike Thanks for the reply. Yes the Next button is considered "Forward." I omitted the left property for the .boxes class just to experiment. I don't see any difference between your code and my code? There is a slight difference with your version in that when I click the Next or Previous button past a certain point, the red box is empty for a split second.

I'm trying to make an infinite image carousel that will be part of a rich-media banner ad. The idea is to have the images infinite scroll in both directions with user controls for Next and Previous. The area marked in red would be visible area of the ad. I leveraged the pen from the Modifiers plugin. I got the Next button to work, but the Previous button is not quite as I expected. The Previous moves all the "box" divs to the left (as it should), but they end up outside the red area. The issue is definitely with the bold line below, but I'm not sure how to fix it. function prevButtonClick() { document.getElementById(prevButton) console.log("Mouse click(" + this.id + ")"); if (!TweenMax.isTweening(".box") ){ TweenMax.to(".box", 0.25, { ease: Linear.easeNone, x: "-=50", modifiers: { x: function(x) { return x % 500; This line has to be the culprit. I cannot change this number because it will change the number of divs inside the "boxes" class } } }); } }