Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Jessica Yip

Banner ad transition frames

Recommended Posts

Hi, I am new to banner ads and GSAP. I am trying to get acquainted with creating multiple framed banners (transitions and fades of content). I am trying to replicate the actions of this https://share.bannersnack.com/bvzpax1t6/ to the code I uploaded, which in my mind is 1 frame and the css is extremely long. I am just not sure how to get this started. The css and HTML I can do but the js is where it gets confusing.

desktop.html desktop.css

Link to comment
Share on other sites

Welcome to the forums, @Jessica Yip. I read your question a few times and I'm not quite sure what you're asking from us. Do you want to know how to convert the CSS animations from the files you uploaded into GSAP animations (JavaScript-driven)? Have you gone through the "getting started" guide yet? We'd love to help, but I'm just not sure what you're asking and we don't have the time/resources to rebuild banners for you, converting them from CSS to GSAP but we'd be glad to answer any GSAP-specific questions. 

Link to comment
Share on other sites

yes, I will like to know how to convert the keyframes into GSAP animations. I would also like to know how to create transition frames(kind of like a slideshow) using GSAP, I have not been able to find an article or someone with a similar question.

Link to comment
Share on other sites

4 hours ago, Jessica Yip said:

I would also like to know how to create transition frames(kind of like a slideshow) using GSAP

I'm not sure what you mean by "transition frames". Do you just mean fading one image out over the top of another? 

 

4 hours ago, Jessica Yip said:

I will like to know how to convert the keyframes into GSAP animations

I think you'll find GSAP much easier to work with. Typically you can write the same animation in GSAP with less code. Often a lot less code. 

 

I don't have time to convert all your CSS animations for you, sorry. But honestly it should be very straightforward if you go through the "getting started" guide. Have you done that yet? 

 

Some of those movements, like the "swing" could probably be significantly improved by using ease: "elastic", for example (which is impossible in CSS). 

 

Example conversion: 

// OLD (css): 
@keyframes slidein {
    from {
      margin-left: 100%;
      width: 300%; 
    }
    to {
      margin-left: 0%;
      width: 100%;
    }
}

// NEW (gsap): 
gsap.fromTo("#your-element", {marginLeft: "100%", width: "300%"}, {marginLeft: "0%", width: "100%", duration: 6});

Have fun!

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.
×