cartimundi

August 24, 2020

<off topic> i see all these wunderful banners and I'm still stuck on gwd...(I'm a designer and newbie coder)

does anybody have a step-to-step plan to archive banners like this..?

I know that it is build with index.hmtl / js / css...but I'm coming nowhere ;-(

April 15, 2020

Hello,

i'd like to use html5/gsap banners on our wordpress site.

I thought i could do that with an iframe...but our web builder don't like frames because the security, seo and slowing up the site.

strange because a hmtl5 isn't that heavy,..

i had contact with carl, which used screen flow to convert it to a mp4 or .gif but i think those options are heavier..

he sad, put it on the greenback forum, maybe someone has the solution

how do you use these banners on a website?

grt

April 8, 2020

Thanks, this works

i thought that i did a years ago with dropbox...sad enough not anymore..

is there a free image upload site?

April 8, 2020

i have this image on my dropbox, but it wont paste

https://www.dropbox.com/s/amtloszemso7fk2/image300250.jpg?dl=0

       .a {
           transform: rotateY(0deg) translateZ(150px);
           background-image: url(https://www.dropbox.com/s/amtloszemso7fk2/image300250.jpg?dl=0);
       }

April 8, 2020

hello,

i've tried to change this images, but when i do, i lose the form.

i have this picture, just for the example

https://www.dropbox.com/s/9pqyrw3ctdfncev/image200228.jpg?dl=0

April 8, 2020

But i like to put in images on the position image/ picture /photo /logo

I've tried a lot..with background-image / opacity of the background color / in css and in html...but it wont suceed ;-(

does anybody has a suggestion?

See the Pen MJOWPr by cartamundi (@cartamundi) on CodePen

January 2, 2020

On 12/31/2019 at 6:10 PM, ZachSaucier said:
Again, you don't need to recreate everything in the CodePen demo. Just include a rough recreation of the specific text component that you're asking about.

It sounds like you just want to set the font size for a specific element using the number of characters as an input. Something like the below would work, but how it applies to your situation depends on your code setup.
// Pseudo-code - you will need to modify it to fit your projects and needs
var numChars = someString.length;
if(numChars < 10) {
 gsap.set(elem, {fontSize: 24});
} else if(numChars < 20) {
 gsap.set(elem, {fontSize: 18});
} else { // Anything larger than 20
 gsap.set(elem, {fontSize: 14});
}

Thanks, this looks clear.

In the .html i see one other "var"

I can put it beneath that.. but it also has to link to the text element..

For as I can see is the text format in this line

.gwd-span-1rau {
font-weight: 600;
opacity: 0;
transform: translate3d(-2px, 19px, 0px);
font-size: 24px;

I think the numChars must connect to this , don't know how to do that ..

;-( sorry, ( i understand that this forum isn't a html course..but I'm trying to learn it

When I see al the codepens in this forum,

its always: 1x .css, 1x .js and 1 x .html

GWD made several .css and .js and 1 .html

see screenshot

maybe that all .css can also be in 1x .css, and is it just the workflow of GWD

this is a folder of the output of GWD, maybe someone can have a look...how it works,

I can't imagine that no-one in the banner business isn't working with GWD (although It isn't a great program)

Probably there are chances for GSAP?

https://www.dropbox.com/s/m9gynwfoaw8kgq9/seats_and_sofas_dynamic_970x250_variant_2.zip?dl=0

January 2, 2020

17 hours ago, Frederic Gontier said:

Off topic but you have a typo in the french banner... DÉPARD DES SOLDES > DÉPART DES SOLDES (with a T)

Bonne Année / Happy New Year

Fred

Thanks! i notice it just before launch, I'm dutch ;-)

Bonne Annéé

December 31, 2019

Hello Zach, thanks

( sorry for my English and newbie coding words ;-(

Most of you...work in codepen...makes it much easier to share it.

I've once made some basic banners with it..

programs as Edge, Animate, GWD make it for a newbie in code easier to get a view

(wysiwyg)

Maybe I can try to make a template in codepen, with the same result,

I believe that it is possible to link codepen on a database to get images/text and import it in the banner.

Google double-click studio advise only the GWD workflow and I am not sure if the output from GWD will be the same as Codepen..

I do these GSAP study in my free time...so my study hours are minimal...

(however my target is to do it all in code with GSAP, the way things are animate with it are more than great)

My target for now is to get dynamic text in my banners..

I have space for 2 lines of 10-12 letters.. for example MANY COUCHES, MANY COLORS,

but when I want the use only the word SALE, I will like to increase the size of this word in code..

( I prefer In code, because I must make something like 20 banners each week, and in code is easier then in the program itself )

To finish my goal,

I can add some GSAP code to the GWD doc...this works, I did some small things with it..but not with text feed from a database

or

Try to make it in codepen...it is a 300x250 doc with 2 or 3 pictures, a few headers and some prices.

maybe someone has a template for something like it..so I can change the images and text and from there work it out

but for both things the goal will be import text from a excel..I don't know if there a specific word for it...I think dynamic feed or something.

I can't imagine, that no ones have used it before..

grt

December 31, 2019

Hello,

Ik make weekly banners for our furniture company ( in 4 languages), I visit this forum before, and made me help in further steps.

I used to make them in indesign (static) and later with animation in hype, AdobeEdge, AdobeAnimate,

but now I make them in GWD..in GWD I position the items, and the images/text comes from the feed out of the database .

which look like this for a couch: DRM_Asset:Seats and Sofas/Week 52/pancho_970x250_int.jpg

(everything works with DV360 Double Click Studio by Google)

Thanks to this forum, I can now change some input and transformations with GSAP, this looks much smoother then the formation by GWD.

But still I am stuck with the text formatting of GWD....I can use all the Google fonts (which is okay not great)

-some weeks we have a SALE but other weeks we have for example MANY COUCHES in MANY COLOURS (more letters)

with the format of GWD is the type of letter and the size of it, always the some, so sometimes it looks empty and other times too much.

I would prefer to make it in code, so getting the text input by the database, and with code to transform it and animate it by GSAP.

I'm following the GSAP 3 years, but I'm still a newbie, maybe someone has an example where I can learn from,...?

Before I forget, everyone the best wishes and a GSAP NEW YEAR!

(sorry, I don't have a codepen...everything goes in the cloud...upload txt, images and code...and then the banner will goes online..)

this is the preview: https://www.google.com/doubleclick/preview/dynamic/previewsheet/COjA_wQQue3jBBjAmdMcIIibEw

and i upload a txt.doc for the code, but this is mayor by GWD....(I have an other doc with more gsap, but I will/must begin with the original GWD doc)

Grt

GWD example.txt

October 25, 2019

thanks again,..

I've changed all the with and did a preview in gwd, everything still works,

even when I do gsap on a it WORKED!! YEAHOO!

thank you all

October 24, 2019

Okay....could i Change in to without losing the feed input?

i would like to delete all the gwd timeline animations into gsap but stopped when the didn’t work

October 24, 2019

On 10/23/2019 at 5:11 PM, somnamblst said:
I did not use GWD for Dynamic but what I did learn is that the feed controls almost everything. FYI Studio provides live chat, and they actually are more into GWD Dynamic than they are into custom HTML Dynamic. You need to set up your Dynamic campaign in Studio and transform your feed so you can get the local dev code.

Edited to add, you definitely use HTML tags in your feed columns that are for copy.

When you transform your feed, you then choose whether you want GWD or custom HTML output

Also you will not see things the way they are intended under Creative preview in Studio. Only under Dynamic preview do you see the values being pulled from the feed. If you have multiple sizes in your feed, you must filter for the correct size.

I actually used Animate CC for animation, and just made Animate publish templates that used the Studio CSS and JS. After I transform my feed, the generated code looks something like this. In this example logos, background images and subline are dynamic based on Metro Codes.
/ NOTE: Here starts the pasted section from Studio.



  Enabler.setProfileId(******);
    var devDynamicContent = {};

    devDynamicContent.****_8sizes_subline_Sheet1 = [{}];
    devDynamicContent.****_8sizes_subline_Sheet1[0]._id = 0;
    devDynamicContent.****_8sizes_subline_Sheet1[0].uniqueid = 10;
    devDynamicContent.****_8sizes_subline_Sheet1[0].Reporting_Label = "***_300x250";
    devDynamicContent.****_8sizes_subline_Sheet1[0].isActive = true;
    devDynamicContent.****_8sizes_subline_Sheet1[0].isDefault = false;
    devDynamicContent.****_8sizes_subline_Sheet1[0].geo_location_name = "";
    devDynamicContent.****_8sizes_subline_Sheet1[0].logo = {};
    devDynamicContent.*****_8sizes_subline_Sheet1[0].logo.Url = "https://s0.2mdn.net/creatives/assets/*******/***_300x250.png";
      devDynamicContent.****_8sizes_subline_Sheet1[0].background = {};
    devDynamicContent.****_8sizes_subline_Sheet1[0].background-image.Url = "BG_300x250_v1.jpg";
    devDynamicContent.****_8sizes_subline_Sheet1[0].Exit_URL = {};
    devDynamicContent.****_8sizes_subline_Sheet1[0].Exit_URL.Url = "https://someURL.com";
    devDynamicContent.****_8sizes_subline_Sheet1[0].subline = "Free 1 Hour Shipping!";
    
     devDynamicContent.****_8sizes_subline_Sheet1[0].cta = "Shop Now";
    Enabler.setDevDynamicContent(devDynamicContent);

Sorry somnamblst.

I didn't get everything ( as a newbie)

what I understand is that the "google" studio got a good chat to help me.

that's nice and will be helpful..which I will try next week..the partner of the company is on holiday

the company which made these banners did everything in gwd,

me as a designer want to have more tools to make the banners nicer, better, smoother with also the possibility to change the ads frequenter.

Thats why I want to change all the animations with gsap instead of animation in the timeline.

I don't understand this (sorry, is my failure..)

Edited to add, you definitely use HTML tags in your feed columns that are for copy.

GSAP in the gwd banner works in the preview of gwd.

I don't know if its works when we export it to google studio..(I hope)

the text in the banners are feed by a database, that's why I think it works with

this feed must be kept, otherwise we have to much work every week, every week the offers changing..

the images I can animate by gsap

but when I use the same gsap animation for the it won't work

Thanks everyone which are helping me..

I'm trying to get into the gsap world...( I had it work on Adobe animatie...after that in Tumult Hype (all without feed)

...but now we are over to gwd with feed and I'm hoping it will work...this would be a game changer for me and the work

I Believe it would work...

October 24, 2019

On 10/23/2019 at 4:51 PM, GreenSock said:

No no, we need to see it in the browser, not just the 1000+ lines of code.

I glanced at your file and I only see GSAP code that's animating image elements - where's the code that's trying to animate elements? If you still want help, please send us a URL where we can see the [broken] version running in the browser where you're trying to animate the elements (or whatever the problem is). The more reduced you can make the test case, the better your chances of getting an answer. Thanks!

I published it now, in a zip...its that enough?

https://we.tl/t-xApbIa2HaK

I didn't animate the because it didn't work

the gsap with the images worked...and I did the same for the without result

as you can see...I'm still a newbie trying to get into the code world ;-)

October 23, 2019

hello, thanks...I think this is a gwd question, but maybe someone know if its possible or not..

below this you can see a txt doc with the code

gwd.txt

October 23, 2019

Hello...again

I'm trying to translate a gwd banner into a gwd banner with gsap...this works, but only for the picture (gwd-image) I can do animation.

There a some database input for text, this area has the format "span" but this aint animate

I made the ID for the gwd-image unique...which I also did for the text (span) but this doesn't change/control/affect the banner..

Isn't possible or do I something wrong?

I'd like to do al the chances in the banner by gsap (code)

hope anybody can help me

October 8, 2019

publish for dv360

i made a gsap/gwd banner, hope it will published on dv360

animate with gsap is so much smoother then with gwd

October 8, 2019

joe_midi what do you mean...you will let us see, how you are making banners?...in gwd?

October 8, 2019

10 hours ago, GreenSock said:

That's curious. @cartimundi Do you know what their reasoning was specifically? Is it mostly that they only want to deal with a visual editor and avoid any code? Obviously I think there are a ton of things you can do easily in GSAP that'd be virtually impossible in GWD. If there's anything we can do better with our tools, of course, we'd love to hear.

Doesn't have to do with AMP....I ain't a coder, but try to find my way to a smooth banner, like I did with GSAP..

( i've reed something about it, and that is was introduced before the summer, same time my older banner weren't succeed)

Before I made them with Hype Tumult (which I loved) to banners were way beter, smoother than with GWD, but they say that it didn't count(?) the way a Google display ad build his history to serve out.. Beside that the ads are dynamic so the images and prices are feed by a database.

I didn't saw any info, just the words...maybe because they all work with windows...and hype is a osx program.

I'm gonna copy the ad build with gwd and change the transitions for gap code, and hope it works, with the same count or whatever.

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by cartimundi