Interactive banner

[bmfgreen]

Hi all. Ive been using Greensock in creating animated banners for over 2years now. I know basic HTML and CSS coding with little knowledge of JS. Im able to "hack" a project and basically copying JS codes from other designers and implementing into my banner but Im pretty stuck trying to create interactive banner for a project. I would like to create something like the below MREC.

 

 

Can someone please share how this is done? Can this be done via multiple timeline with onclick function? Any help and guidance is appreciated! cheers!

 

 

[ohem]

If you're not comfortable coding something like that yourself, you could get that exact functionality super easily in Google Web Designer using the Swipeable Gallery  and Gallery Navigation components.

 

They also have a bunch of existing templates with the gallery and navigation already implemented, which you could start with and restyle if you don't want to build one from scratch.

[retropunk]

When starting out with coding it's best to try and reduce your project into smaller parts.

Check out the plethora of examples on Greensocks CodePen here

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

 

The banner you are trying to build above could be created so many different ways! Finding a solution that you can relate to can be daunting in the beginning.

This GSAP example should have all the parts you would need to replicate that banner

See the Pen KJxyF?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Good Luck!