Image Reveal from Bottom to Top

[RamRavipudi]

Hi , 

 

 I have been amazed by the kind of animations I can do with GSAP off lately, got stuck at some small animation and need your help which would potentially save my job.

 

I need to replicate the same animation for images and text with the same order (image--> text--> underline) .

 

image reference: 

https://www.pinterest.fr/pin/527132331391226864/sent/?invite_code=a2273c4743ae4ee5b43cc244211e9cda&sender=237916930223135242&sfo=1

 

text reference : 

 

https://sealco.ca/

 

I have done my research before posting here ,

 

https://codepen.io/ChicagoJostik/pen/oNbgwbE

 

but couldn't do it all by myself

 

 

Here is my code.

 

https://stackblitz.com/edit/angular-ivy-exkaxi?file=src%2Fapp%2Fapp.component.html

 

I need to unveil the whole illustration " image+background-card" together from bottom to top as shown in the first link.

Thanks in Advance.

 

 

See the Pen oNbgwbE by ChicagoJostik (@ChicagoJostik) on CodePen

[mikel]

Hey @RamRavipudi,

 

Welcome to the GreenSock Forum.

 

If you swap the 'from positions', is it what you want it to be?

 

  .fromTo(".holder", {yPercent:100}, {duration: 0.5, yPercent:0})
  .fromTo(".holder img", {yPercent:-100}, {duration: 0.5, yPercent: 0}, "<")

Use your imagination, a little trial & error and make it clear to yourself which logical connections exist.

 

Happy tweening ...

Mikel

[RamRavipudi]

22 minutes ago, mikel said:

Hey @RamRavipudi,

 

Welcome to the GreenSock Forum.

 

If you swap the 'from positions', is it what you want it to be?

 

  .fromTo(".holder", {yPercent:100}, {duration: 0.5, yPercent:0})
  .fromTo(".holder img", {yPercent:-100}, {duration: 0.5, yPercent: 0}, "<")

Use your imagination, a little trial & error and make it clear to yourself which logical connections exist.

 

Happy tweening ...

Mikel

 

Hey Mikel , Thanks for your quick response . The Provided solution is in line with the directions that I want i.e. Bottom to Top but I want to do it without the help of the <div> above the image. I want to animate the image alone as I have multiple elements in the same div. I have tried implementing things with the suggestion but can only bring out "move " animation where the actual things should be " unveil" or "reveal".

 

Please help ..attaching the code snippets 

[ZachSaucier]

Hey RamRavipudi. When editing your demo, please make sure to use the "fork" button on CodePen if you've already shared a demo to these forums. That way context is not lost in your previous post(s).

 

5 hours ago, RamRavipudi said:

I want to animate the image alone as I have multiple elements in the same div.

The only way to do that would be to use clip-paths. But those have worse browser support and slightly worse performance, so keep that in mind when considering using it.

[BrianCross]

I was also going to suggest a clip path. I use them to reveal drop down menus and it works great. 
 

See the Pen YzpNmzr by TuxFan77 (@TuxFan77) on CodePen

Edited February 24, 2021 by BrianCross
Added CodePen link.

[PointC]

Drop it into a SVG and use a mask. Lots of fun options.

 

See the Pen yJjNOX by PointC (@PointC) on CodePen

[mikel]

 

Hey @RamRavipudi,

 

Here is another option to change Images so and reveal text too.

 

See the Pen qBNQQbK by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel