IMPOSSIBLE AMBITIOUS PROJECT

[alexxgriffon]

description (DEMO)

1. blocks are hexagons.
2. blocks rotate 90 degrees X line after line.(flip)

3. reveal starts by click.
4. during rotation, the block outline makes a glow effect and fades when the entire image is collected.
 

See the Pen ZEBdaJx by generalgrifon (@generalgrifon) on CodePen

[GreenSock]

Hi @alexxgriffon. I wasn't quite sure what you were looking for here - did you have a GSAP-specific question we can help you with? Or were you asking someone to build what you described? We'd be happy to answer any GSAP-specific questions but we don't have the resources to provide free consulting services for building projects to spec. 

 

Good luck with the project, though. It looks like it could be a cool effect. 

[iDad5]

Hi @alexxgriffon;

 

if I was too undertake what you describe I think I would try one of two approaches:
If it is concerns a large image and you are concerned a lot about performance on the users' side ich would look into 'canvas' for copying the hexagons from the original. I'm not a regular user of canvas functionality, so I would have to dig into that, but it's not rocket science as I seem to remember.
If performance isn't the main issue and you don't want to work with canvas, css-masking probably should do the trick.
 

Still, if it is only one and the same image you could also cut out al the hexagons in Photoshop (it is even possible to built an action, if one is a Photoshop wiz) and work with the resulting pngs placed absolutely. I'd think that more of a last resort but depending on the situation and your skillset it make move things from 'impossible ambitious' to 'hard manual labour'

 

If that helps a little but you need some pointers, you might find them here i the forum searching with the appropriate keywords. If not I'll try to give you more direction if you tell me which way you'd preferer. Good luck.

[iDad5]

I did a quick Google search and found some stuff that looks very promising to me as a starting point:

 

https://gist.github.com/zackthehuman/1867663

See the Pen RrMzKy?editors=1111 by anon (@anon) on CodePen

 

[alexxgriffon]

9 hours ago, GreenSock said:

Hi @alexxgriffon. I wasn't quite sure what you were looking for here - did you have a GSAP-specific question we can help you with? Or were you asking someone to build what you described? We'd be happy to answer any GSAP-specific questions but we don't have the resources to provide free consulting services for building projects to spec. 

 

Good luck with the project, though. It looks like it could be a cool effect. 

 

Thank you, sire)

In the description of the project I listed
purposes that I set for myself)

At the moment I am looking for information about other parameters except scale and opacity I can apply in gsap JS section. I would like to give the block a rotation like:
transform: rotateX(180deg);

[GreenSock]

17 hours ago, alexxgriffon said:

At the moment I am looking for information about other parameters except scale and opacity I can apply in gsap JS section. I would like to give the block a rotation like:
transform: rotateX(180deg);

You can animate pretty much any property of any object with GSAP. You're not limited to a pre-determined set of properties. To do rotateX(180deg), it'd simply be:

{ rotationX: 180 }

 

[Carl]

I'm a bit confused about the exact question, but it seems like you are using spans which can't have transforms applied because they are "non-replaceable inline" elements.

 

please see this demo and note that the span does not rotate but the div does

 

See the Pen MWJgmXY?editors=0010 by snorkltv (@snorkltv) on CodePen

 

This is not a GSAP issue, it's a limit of CSS. To apply transforms to a span try setting it's display:block or display:inline-block in the css.

 

FWIW it's just best to use divs or block-level elements.

[iDad5]

@alexxgriffon

If possible it would be great if you could fork your CodePen each time you make significant changes. That way people that read the thread later will be less confused.

 

I'm sorry to say that Carls explanation isn't true in your case. Your spans are flex-children, that makes it possible for them to be transformed, even as they are inline elements. (You can read up on the intricacies of the display property in relation to the box-model and the flex-box following the link Carl provided)

 

See the Pen oNBveGN by mdrei (@mdrei) on CodePen

 

And here is a fork for your project that maybe could help you (I added rotation to your tween and perspective to your container section)

 

See the Pen gOgYxmw?editors=1111 by mdrei (@mdrei) on CodePen