Jump to content
Search Community

The beginning

cartimundi 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

Hello, ( again ) 


can someone help me with the first start. ( 1 canvas, with 1 block and 1 text ( to play with the transformations )

and from there building further..


( before i did this in adobe edge together with html/greensock.. but now i want to do it direct in codepen ) 


I have tried the banner of jonathan...


But i'm getting lost...at the middle...


step by step i follow the html...till <div id="deviceHead">Desktop

it's ok.... i understand the position, the input ( didn't looked at the animation yet..)


but the next text for "laptop" i can't find in the html...


the images of desktop and laptop are clear...but the next with mobile and laptop...?? 


i think to hard for me as a beginner...



so maybe someone can help me with the very first steps...

1 canvas, with 1 block and 1 text ( to play with the transformations


After that combining several text / images and timelines  ;-)




I hope someone can follow me...i understand the power of gsap...and am very enthusiastic to make banners for adwords..(for now we using static banners..;-(


greet marcel








See the Pen lEiAv by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

That's probably a hard animation to start learning from, but the reason you can't find the text is because it is done dynamically using the textPlugin.


I would suggest starting out with the Burger Boy animation. There's also a video on how to make that ad, but I can't find it right now. 


See the Pen Fqmsa by GreenSock (@GreenSock) on CodePen

  • Like 4
Link to comment
Share on other sites

Nice work editing the burger boy banner.


Not exactly sure what you mean by copying the items and putting them below, but its my guess that you will want to create new .panel divs for each couch and reveal it at the appropriate time.


maybe that helps?

Link to comment
Share on other sites

Morning, exactly...this banner is good...but i want to put 3 different couches in 1 banner...

and at the end our logo.


When i succeed that, i finally have to make the same style into different sizes


leaderboard: 970 x 90

square: 200 x 200

block: 336 x 280

block2: 300 x 250

Skyscraper: 120 x 600

Skyscraper width: 160 x 600

Half page: 300 x 600


maybe when you see this, you have an suggestion how i can do that best?

Link to comment
Share on other sites

thanks! nice seminar...very clear...


( i watched only the burger session, but will watch the rest later...)

when i watched it, its all very clear...in the practice, there a lot of traps...maybe because i'm also a beginner in html and css.. ;-(


but i don't give up ;-)

  • Like 1
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...