[SOLVED] Animated inverse crop?

[Kinmoku]

Hi all,

I'm struggling with something really simple... I have buttons that appear on hover with a crop (from left to right), and I want them to disappear from left to right too. The effect I want looks like a swoosh or how a trail appears then disappears from a shooting star.

Problem is, I can't get my head around doing this. I've tried adding "-" to the crop numbers and adjusting them all kinds of ways, but I can't get it to behave how I want. The numbers are set up to show the cropped image, not the empty space they leave behind. I don't think there's an inverse crop, but maybe there's another way I can achieve this effect?

Here's my current code. On show works, but on hide doesn't no matter what numbers I try:

Code: Select all

transform choicehover:
    on show:
        crop_relative True
        alpha 0 crop (0,0, 0.0, 1.0)
        linear 0.15 crop (0,0, 0.3, 1.0)
        linear 0.25 alpha 1.0 crop(0,0, 1.0, 1.0 )
        
    on hide:
        crop_relative True
        alpha 1.0 crop (0,0, 1.0, 1.0)
        linear 0.25 crop (0,0, 0.6, 1.0)
        linear 0.15 alpha 0.0 crop(0,0, 0.0, 1.0 )

I hope this makes sense!

[Enviel]

Code: Select all

crop (0,0, 0.3, 1.0)

Results in first 30% of the image showing. If you wanted to the inverse, that is, show the last 70%, you have to move the starting bounds. Following should do it

Code: Select all

crop (0.3,0, 1.0, 1.0)

Basically, show everything after 30% in xdirection.

This should result in desired effect, if I understood correctly:

Code: Select all

transform choicehover:
    on show:
        crop_relative True
        alpha 0 crop (0,0, 0.0, 1.0)
        linear 0.15 crop (0,0, 0.3, 1.0)
        linear 0.25 alpha 1.0 crop(0,0, 1.0, 1.0 )

    on hide:
        crop_relative True
        alpha 1.0 crop (0,0, 1.0, 1.0)
        linear 0.15 crop (0.3,0, 1.0, 1.0) xoffset 38 #this is 0.3 * image width
        linear 0.25 alpha 0.0 crop(1.0,0, 1.0, 1.0 ) xoffset 128 #image width

Cropping results in the image getting shorter, so when doing it in this direction you need to move the image at the same time. Otherwise it looks like the image is getting pushed to a void.

[Kinmoku]

Hey, thanks for the quick reply! This isn't the effect I am after, sadly. It slides the image off the way it came on.

I've drawn a diagram below to better explain what I'm trying to do:

I hope this is a little clearer.

[Enviel]

Based on that diagram, I think we are on the same page on what the effect should look like. Just to confirm, this is what that code results in on my end.


Did you change xoffsets in hide to match your image's width? Image sliding to the left sound like what happens if there is no offset applied.

[Kinmoku]

Based on that diagram, I think we are on the same page on what the effect should look like. Just to confirm, this is what that code results in on my end.


Did you change xoffsets in hide to match your image's width? Image sliding to the left sound like what happens if there is no offset applied.

Ah, I forgot the offsets! But when I added them, they behaved weirdly, as though they were already offset.

Anyway, changing the code to this seemed to help:

Code: Select all

transform choicehover:
    on show:
        crop_relative True
        alpha 0 crop (0,0, 0.0, 1.0) xoffset 0
        linear 0.15 crop (0,0, 0.5, 1.0) xoffset 0
        linear 0.25 alpha 1.0 crop(0,0, 1.0, 1.0 ) xoffset 0
        
    on hide:
        crop_relative True
        alpha 1.0 crop (0,0, 1.0, 1.0) xoffset 0
        linear 0.25 crop (0.5, 0, 1.0, 1.0) xoffset 288
        linear 0.15 alpha 0.0 crop(1.0,0, 1.0, 1.0 ) xoffset 575

I also changed 0.3 to 0.5 just because it looks a little better Thanks for your help!