Banner ad transition frames

[Jessica Yip]

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

[GreenSock]

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. 

[Jessica Yip]

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.

[GreenSock]

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!