Text feed from database..excel

[cartimundi 9 Likes (Newbie)]

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

[ZachSaucier 7,061 Likes (Superhero)]

Hey cartimundi and welcome.

 

5 hours ago, cartimundi said:

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.

Are you asking how to style text dynamically based on how many characters there are? I think creating a minimal example of what you're trying to accomplish (separate from GWD and loading things from a database - I mean just displaying the format and results that you do and don't want) and sharing it here would be really helpful for us in helping you. 

 

5 hours ago, cartimundi said:

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

For learning more specifics about GSAP 3, check out the articles linked to in this page: 

 

[cartimundi 9 Likes (Newbie)]

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

[ZachSaucier 7,061 Likes (Superhero)]

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});
}

 

[Frederic Gontier 8 Likes (Newbie)]

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

[cartimundi 9 Likes (Newbie)]

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

[cartimundi 9 Likes (Newbie)]

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 <span>, 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