Set time for the frames

[Vicky27]

Hi,

I am at the very begining so your feedback and support will be very much appreciated.

I am trying to create the banner with four frames and I don't know how to set up that time between the frames in order to have the background images and the text image to appear one after another smoothly without the gap between which is curently there. So i need the background images to scale in and out when changing and the text to fade in by jumping a little bit.Also the background image currently have the 160x600px but they aremeant to be 320x1200px for a better resolution. I have tried to do that but the image does not take the banner size as it has double size of it. How can I achieve that?

Please, tell me what I have done wrong or right and suggest me what I have to do in order to achieve that?

 

Thank you very much in advance.

 

See the Pen WNKogQL by vicutza_27 (@vicutza_27) on CodePen

[geedix]

Hi, 

I see a few things. You're loading gsap 3, TweenMax and TimelineMax, but all you need is gsap 3, which includes a timeline.

You don't  need both image tags and background images for the same image. Since you're using background images, set the css for those to background-size:cover and then scale the div.

The point of using a timeline is that you don't need to use delays, you can just use the position parameter - https://greensock.com/docs/v3/GSAP/Timeline

Let me know if you're still stuck and I can make some edits for you.

[flysi3000]

Hi @Vicky27! You have a pretty good start here. A couple of things, though - like @geedix says, you're mixing GSAP 2.X and GSAP3 syntax here, so be careful with that. You no longer need TimelineMax, as it's included with GSAP - just use gsap.timeline(). Also, get used to using the < and > notation at the end of your tweens to insert your animations either at the end of or the beginning of the previous animation. I find it much cleaner than using the delay property. For example, if I have animation A and animation B, I can write something like:

// pseudocode - just to give you an example

gsap.to(animation A, {...})

gsap.to(animation B, {...}, '>')

 

One other thing - autoAlpha and opacity aren't the same. I find it easiest to pick one and use it consistently. Opacity turns a thing invisible; autoAlpha turns it invisible and sets it to visibility: hidden, which removes it from the document flow, meaning you can't click on it and stuff like that.

 

As far as your images, once again, @geedix is correct, in that you can either use <img> tags, or <div> with background images set in css. If you choose the latter, go ahead and use your @2x resolution image (ie. twice the dimensions, as you said), but using css, just set its background size to cover.

 

I tweaked your code a little bit here, with some comments to explain what I was doing! 

See the Pen OJwWwWb?editors=0010 by flysi3000 (@flysi3000) on CodePen

 

One last thing, if you are interested in learning from someone that I learned a ton from, starting way back in the Flash + ActionScript days, check out @Carl's site, https://snorkl.tv.

[GreenSock]

1 hour ago, flysi3000 said:

Opacity turns a thing invisible; autoAlpha turns it invisible and sets it to visibility: hidden, which removes it from the document flow

Just a very minor point of correction - visibility: hidden does NOT take the element out of the document flow, it just exempts it from being rendered or interacted with. display: none takes it out of the document flow, meaning other things around it would collapse into that space. The nice thing about visibility: hidden is that nothing would collapse - it still technically takes up space in the document flow, so it's cheaper performance-wise since it doesn't trigger any reflow. 👍

[flysi3000]

D'oh! I hesitated for a second when I was writing that... thanks for correcting me. :) 

[Vicky27]

You have put a light in my Gsap knowledge. I am very grateful for your time and help.

Big thank you all!