Gsap Image Reveal Animation Horizontally

[Sıradışı Digital]

Hello,

The effect works on all areas simultaneously. I need to get this to work only on the visible part. Also the animation goes up and down and then the picture appears. I have to do this so that it only comes up and the image is visible. Would you help me with this topic?

See the Pen ZERqWVo by mrtsiradisi (@mrtsiradisi) on CodePen

[mvaneijgen]

There isn't really a way to target a specific :after it seems with the CSSrulePlugin. I would advise to just make an extra div and animate that.

 

Here is your pen with some tweaks and my attempts at scoping the :after element, but with no luck. I did how ever update your GSAP tools to their latest version. 

 

See the Pen eYKPdov?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[Cassie]

Or use CSS vars - that's a nice way, and the way we advise in the docs now too.

See the Pen abKRBvq?editors=0110 by GreenSock (@GreenSock) on CodePen

[Sıradışı Digital]

@Cassie Thank you Cassie.

[Antran]

Dear Cassie, i just want to know how to remove text "scroller-start & scroller-end"

[GreenSock]

Just set markers: false (instead of true). 

[Antran]

i so grateful thanks you very much