issues with <span>

[alexxgriffon]

well)
here is a great card with nice hover effect.

The question: what I have to specify for span properties in the css section instead of background: url
that gsap script would apply animation just to the entire card?

I will clarify that I am not trying to place any image on the card.

I decided to put vanilla script in html block
but at this stage I would like to understand how possible this method of animation is and without vanilla script.

i hope the translator didn't  fail me  this time)))

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

[GreenSock]

I read your question about 6 times but I'm still totally lost, sorry

 

Are you asking how to rebuild that entire effect with GSAP? Or did you just want to know how to select the container to animate?  

[iDad5]

Hi @alexxgriffon,

 

I'm in the same boat with Jack, not really sure what it is you want us to help with. When I looked at your CodePen though i found that gsap wasn't loaded, so It's no wonder that your spans aren't animated. 

 

When you include it something happens - I'm not sure though if it is what you intended.

 

As I've seen your 'impossible project' - question I recognized the lots of empty spans and I guess those questions are related?
I really don't mean to criticize and I can be totally wrong in my assessment of your situation -it certainly seem that things get lost in translation sometimes - but I have the impression that you try to build super cool effects by combining cool effects you found somewhere else. As you your self sounded skeptical of your abilities in the other thread I guess that you are challenging yourself rather hard right now. Playing around with complex and stuff can help you a lot to learn things, but sometimes its easier to reduce complexity and take smaller steps.

 

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

[alexxgriffon]

7 hours ago, iDad5 said:

Hi @alexxgriffon,

 

I'm in the same boat with Jack, not really sure what it is you want us to help with. When I looked at your CodePen though i found that gsap wasn't loaded, so It's no wonder that your spans aren't animated. 

 

When you include it something happens - I'm not sure though if it is what you intended.

 

As I've seen your 'impossible project' - question I recognized the lots of empty spans and I guess those questions are related?
I really don't mean to criticize and I can be totally wrong in my assessment of your situation -it certainly seem that things get lost in translation sometimes - but I have the impression that you try to build super cool effects by combining cool effects you found somewhere else. As you your self sounded skeptical of your abilities in the other thread I guess that you are challenging yourself rather hard right now. Playing around with complex and stuff can help you a lot to learn things, but sometimes its easier to reduce complexity and take smaller steps.

 

 

 

Well.. I just tried to split the card into blocks and apply animation to it. I thought if i could make an animated picture I could do the same with such an object as this card. From the very beginning it was clear that I needed more knowledge to implement this. Your pieces of advice were very useful and I’ll try to fix it

[iDad5]

55 minutes ago, alexxgriffon said:

Well.. I just tried to split the card into blocks and apply animation to it. I thought if i could make an animated picture I could do the same with such an object as this card. From the very beginning it was clear that I needed more knowledge to implement this. Your pieces of advice were very useful and I’ll try to fix it

Like so:

 

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

 

 

?

 

 

(The solution wit background-attachment:fixed and flex-box is clever and impressive, but as fixed always refers to the viewport it might need other solutions...)

[alexxgriffon]

19 minutes ago, iDad5 said:

Like so:

 

 

 

 

 

?

 

 

(The solution wit background-attachment:fixed and flex-box is clever and impressive, but as fixed always refers to the viewport it might need other solutions...)

No) the card itself, not the image on it

[iDad5]

4 minutes ago, alexxgriffon said:

No) the card itself, not the image on it

Okay, that is slightly more challenging, but shouldn't be impossible.

 

What you called 'break apart' isn't actually happen with the spans, flex and background-attachment: fixed technique. It's more like you haver a lot of elements that stick together (flex-box) and each one shows a part of the whole picture. Like a video-wall that consists of a lot of monitors isn't actually one monitor broken into pieces, but it's the image that's tiled and sent to the individual monitors. But you probably understood that already. If that sounds like nitpicking its likely because at most levels it is.

 

But understanding the difference might lead to a solution.

 

If that's workable within your concept, I'd go for a sequentiell approach.

1: hide the card borders, shadows etc.

2: built the 'card' inside the element like I did and reveal it as you like.

3: after that (or after the first loop) apply the card-effect and blend in the card borders, shadows etc.