Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
bmfgreen

Interactive banner

Recommended Posts

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.

 

Zz67xFe.gif

 

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!

 

 

Link to post
Share on other sites

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.

  • Like 5
Link to post
Share on other sites

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!

 

  • Like 2
Link to post
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.

×