Jump to content
Search Community

Vertical Wiping and CSS Clip Animation

explorerzip test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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.

 

 

See the Pen OaKgae by explorerzip (@explorerzip) on CodePen

Link to comment
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.

Link to comment
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
Link to comment
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.

Link to comment
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
Link to comment
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.
×
×
  • Create New...