alexxgriffon Posted March 21, 2021 Share Posted March 21, 2021 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 Link to comment Share on other sites More sharing options...
GreenSock Posted March 22, 2021 Share Posted March 22, 2021 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? Link to comment Share on other sites More sharing options...
iDad5 Posted March 22, 2021 Share Posted March 22, 2021 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 1 Link to comment Share on other sites More sharing options...
alexxgriffon Posted March 22, 2021 Author Share Posted March 22, 2021 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 Link to comment Share on other sites More sharing options...
iDad5 Posted March 22, 2021 Share Posted March 22, 2021 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...) 1 Link to comment Share on other sites More sharing options...
alexxgriffon Posted March 22, 2021 Author Share Posted March 22, 2021 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 Link to comment Share on other sites More sharing options...
iDad5 Posted March 22, 2021 Share Posted March 22, 2021 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now