Vicky27

Hi, Thank you for your reply, However, I need to have it zooming in (from just above his head) which means the image is scaled out as it is coming up and then it is moving up and in the right side away (as per image with frames above) How to make zooming from a specific point as I have tried to set the x and y position but then the image is not scaling but changing the size of it?

Hi, I am trying to reproduce a banner just for practicing and improving my gsap skills by making the background image to scale out and move up at the same time. The starting point is the midlle of the picture above the head of the climber.How could I make it move slowly up(starting from a specific point in my case) and at the same time scaling out very slowly.I have tried to achive it with the code I have in codeopen but at one point it is seem that the image cutts off from below? Thank you in advance!

Thank you very much dev-kp!I have achieved what I needed.

Very grateful for your help.That did work. However, where I would set the style for it? Generally where is better to do that in js or in style.css? Thank you.

Thank you in advance! In my banner in one of the frame I am trying to target a headline text (curently a imagine but needs to be a text)wich is in a div in the html file. So the copy1 from the bellow code needs to be a editable text which I have inserted now under a div in html file.How can i create the dom element for that div or how can I change it differently to have the copy as a text not image? How proffesional is to create the elements for the banner in the html file at all? Thank you! this.copy1 = this.smartObject({ id: "COPY1", backgroundImage: "copy1.png", parent: this.banner, alpha:0, retina: true }); Creative.prototype.createElements = function () { this.bgMain = this.smartObject({ id: "BG-MAIN", backgroundImage: "bg_main.jpg", //clip: "rect(97px, 163px, 118px, 140px)", overflow: "hidden", //width: this.bannerWidth, width:1795, //height: this.bannerHeight, height:410, parent: this.banner, x:-830, y:-100, retina: true }); this.blueMask = this.smartObject({ id: "blueMask", width: this.bannerWidth, //width:600, height: this.bannerHeight, backgroundColor: '#123f64', clipPath: "polygon(0% 0%, 0% 100%, 44.3% 100%, 44.3% 38%, 46.25% 38%, 46.25% 64%, 44.3% 64%, 44.25% 100.00%, 100% 100%, 100% 0%)", opacity: 0.7, parent: this.banner }); this.copy1 = this.smartObject({ id: "COPY1", backgroundImage: "copy1.png", parent: this.banner, alpha:0, retina: true }); this.copy2 = this.smartObject({ id: "COPY2", backgroundImage: "copy2.png", parent: this.banner, alpha:0, retina: true });

You have put a light in my Gsap knowledge. I am very grateful for your time and help. Big thank you all!

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.

Hi I have a banner animated with AAnime just need to be recreated with GSAP. Please help me asap if anyone available. Thank you.

Ohh, thank you for pointing it out and for your help.

Hi, Sorry for my bad explanation, I have created a code open pen now to reproduce my case. https://codepen.io/vicutza_27/pen/VwBaxeV. I have put just a image which has bigger size and it is stretching while what I want is to make the image just the size of the banner and keeping quality. I am just wondering is it possible to achive that with gsap, js,css or I have to make it in exactly the same size in a photo editor as the banner 160x600? Thank you.

Hi Cassie, Thank you very much for your reply. As the original size of the "photo1" is (320x1200)px which has double size compare with the original banner which is 160x600 I need to make, force it to be the banner size initially. How would I set up it to get the image as per banner size?

Hi everyone and thank you in advance for your support. I am trying to make the image which is an element of the frame and has double size(320x1200) of the banner (160x600) to scale in but I don't know how to force it to take the size of the banner. I have tried to give it background-size:100% in the style.css to the class of the element but it is still doesn't work. <style> </styles body, h1, h2, h3, p { font-family: Arial, Helvetica, sans-serif; margin: 0; color: #fff; } .container { width:160px; height: 600px; overflow: hidden; background-color: #000; } #photo1 { width:160px; height:600px; background-size:200%; background-image: url('/images/f1.jpg'); } > <script> gsap.timeline() .from(".photo1",{opacity:1, ease:"back"}) .from("#logo", {opacity:0, duration:1, scale:0, ease:"back"}) </script> <html> <div class="container"> <div id="line1"><img src="images/blue_line.png"></div> <div id="line2"><img src="images/green_line.png"></div> <div id="photo1"><img src="images/f1.jpg"></div> <div id="logo"><img src="images/logo.png"></div> <div id="h1"><img src="images/text1.png"></div> </div> </html> Could someone please help me with any suggestion, ideea?What I am doing wrong? Thank you again.