Banner Text Animation Full Sentence fade in

[ThiaIII]

Hi guys, I'm quite new with Gsap and I'm trying to to a text animation following the same style as one ad that I saw online, I managed to record the part that I'm trying to mimic/

 

I know that it's using Gsap, but have no idea how, I've been looking into the documentation here and some examples, but couldn't get to know how to start,
could you guys please shed some light on the right direction that I should go for?

Also I'm planning on building the banner on GWD

 

Thank you

 

 

 

 

[Cassie]

Hey there! Have you taken a look at the getting started guide?
 

What's your understanding of coding/JS/HTML/Banner dev. Are you stuck with the text animation or the fade? I can swing you some help and examples if I have a little more context.

[ThiaIII]

Hi Cassie, 

 

I'm fine with html and css, and starting with JS, I can probably modify a existing code to suit me. I'm having trouble with both to be honest, kinda animate the whole sentence fading in, on GWD I can do it as a whole, the top and bottom fading in and out together, but I'm trying to achieve the same effect as the video, the top showing up first and gradually showing the bottom.

Hope that helps narrowing down a bit

[GreenSock]

Seems like a relatively simple scale/fade animation with a stagger. For example, if you've got a <div class="line"></div> for each line...

gsap.from(".line", { 
  scale: 0.5, 
  opacity: 0,
  duration: 1,
  stagger: 0.2
});

You'd need to work out the timing, of course, but hopefully that gets you going in the right direction. If you get stuck, just post back a minimal demo in CodePen and we'll answer any GSAP-specific questions. 

 

Good luck.

[Cassie]

Background-wise. I'd probably make a transparent png or gif of the white gradient and then move that down and to the right over the coloured background.

(pseudo code)
 

gsap.to('.gradient', {
  xPercent: 100,
  yPercent: 100,
})

 

[ThiaIII]

13 hours ago, GreenSock said:

Seems like a relatively simple scale/fade animation with a stagger. For example, if you've got a <div class="line"></div> for each line...

gsap.from(".line", { 
  scale: 0.5, 
  opacity: 0,
  duration: 1,
  stagger: 0.2
});

You'd need to work out the timing, of course, but hopefully that gets you going in the right direction. If you get stuck, just post back a minimal demo in CodePen and we'll answer any GSAP-specific questions. 

 

Good luck.

Thank you for the example, on it you mention to do it for each line, would be possible to animate the whole block of text? as I would need to bind the text to be a Dynamic Ad, so the copy text will change and would be easier to not have to update line by line

[Cassie]

Sure thing, you'd just target the container if you want to fade it all in one go,
 

gsap.from(".container", { 
  scale: 0.5, 
  opacity: 0,
  duration: 1,
});

 

Or maybe you're looking for splitText for more dynamic text animations?

https://greensock.com/docs/v3/Plugins/SplitText

I suggest taking a little step back and looking at how GSAP works, rather than how to do this specific animation. It'll help!

https://css-tricks.com/how-to-animate-on-the-web-with-greensock
 

 

[ThiaIII]

Hi guys, thanks for all the help, 

 

I used a code pen from the website to start with and end up looking exactly what I needed:

See the Pen ZExBZON by DanTer3 (@DanTer3) on CodePen

 

The only issue is that it's using Splittext, and I'm only able to use it on my code if I have a license, corect?

I'm waiting for my company to get thee license approved, while I don't get it, is possible to do something similar without Split Text?

[Cassie]

SplitText is a paid, club GreenSock plugin, yes.

 

And sure - You can do this without splitText but you'll have to manually wrap each letter in a div or write some JS to do that for you.

 

Good luck! Let us know if your company has any questions about Club GreenSock.