explorerzip

Vertical Wiping and CSS Clip Animation

Recommended Posts

I'm trying to "convert" an Adobe Animate project to GSAP.  As you'll see in my Codepen, the top and bottom "filgrees" (they are supposed to look similar to: https://goo.gl/images/GNQgRi) wipe one image and simultaneously reveal another image. The actual banner is more complicated because the filgrees and the images in the center are irregular shapes.

 

My challenge is syncing the movement of the "filgrees" to the image wipe / reveal. The wipe / reveal is being done by tweening the css "clip" property. I know that the css clip property is deprecated on most browser, but I have to use it for Internet Explorer 😡 

 

You'll notice that the image "wipes" slightly faster than the "filgrees." I know this is a timing issue since the filgrees are have further to move in the Y direction vs the images have to clip in the Y direction.

 

Any tips on how to sequence these separate parts so there's no red background visible as they are moving.

 

 

Share this post


Link to post
Share on other sites

That's not exactly a trivial task, but here's my crack at it: 

 

 

I built it out with ratios and variables to make it easier to port to whatever you're doing "for real". :)

 

Does that help? 

 

  • Like 6
  • Thanks 1

Share this post


Link to post
Share on other sites

Thanks so much for the assist Jack. I'll give this a shot with my real assets and let you know if it works. It must have took you a lot of trial and error to figure out the correct values for the variables?

 

I didn't know you could use an expression like: "duration - overlapDuration - gapDuration" in the position parameter. But it now makes logical sense since I've been using relative values like "+=1" for ages. Might be worthwhile to update the official TimelineMax docs to call attention to this.

Share this post


Link to post
Share on other sites
2 hours ago, explorerzip said:

Thanks so much for the assist Jack. I'll give this a shot with my real assets and let you know if it works. It must have took you a lot of trial and error to figure out the correct values for the variables?

 

Well, it was all just based on logic but it did take me a little trial and error to get my mind wrapped around certain pieces. :)

 

2 hours ago, explorerzip said:

I didn't know you could use an expression like: "duration - overlapDuration - gapDuration" in the position parameter. But it now makes logical sense since I've been using relative values like "+=1" for ages. Might be worthwhile to update the official TimelineMax docs to call attention to this.

 

Hm, the position parameter can be either relative (a string preceded by "+="/"-=") or absolute values (number) which I thought was pretty clear in the docs. How exactly would you update the docs? I'm open to suggestions. We have a video about it too: https://greensock.com/position-parameter 

 

Happy tweening!

  • Like 1

Share this post


Link to post
Share on other sites
18 hours ago, GreenSock said:

Hm, the position parameter can be either relative (a string preceded by "+="/"-=") or absolute values (number) which I thought was pretty clear in the docs. How exactly would you update the docs? I'm open to suggestions. We have a video about it too: https://greensock.com/position-parameter 

 

Happy tweening!

 

It just didn't occur to me to use a math expression with variables for the position parameter e.g. duration - overlapDuration - gapDuration. It now makes sense from a programmer's perspective, but I thought I was limited to using values like:

  • at an absolute time (1)
  • relative to the end of a timeline allowing for gaps ("+=1") or overlaps ("-=1")
  • at a label ("someLabel")
  • relative to a label ("someLabel+=1")

Perhaps you can state in the docs that you can use variables and math expressions like: "someLabel - anotherLabel - 1", etc.

Share this post


Link to post
Share on other sites
4 minutes ago, explorerzip said:

 

It just didn't occur to me to use a math expression

 

Ah, okay. That actually has nothing to do with GSAP or its API - that's just how JavaScript works. It evaluates expressions like that in-place. Kinda like:

 

//these are the same...
yourFunction(5); 
yourFunction(1 + 4); //JavaScript will evaluate 1+4 in-place, making it 5. 

 

So it wouldn't really be something to put in the GSAP docs. 

 

Cheers!

  • Like 1

Share this post


Link to post
Share on other sites

I think all you need to mention is that the position parameter also accepts variables. It just wasn't obvious from the docs.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.