Shrug ¯\_(ツ)_/¯ Posted July 28, 2020 Share Posted July 28, 2020 Just passing through and thinking aloud here. Not sure about Animate but in general I wonder if this could be simplified down to using SVG for the text that is comprised of two separate masks. One for the outer stroke of letters and the other for the fill area of the letters. Then use a singular image of the shark moving under each mask, with the instance of the image under the stroke masked scaled up and shifted slightly ahead of the other image. You could also instead use two images with one already scaled. I'm not trying to confuse or offset the discussion but think maybe the same visual effect could be derived from that described approach, at least in theory. Sorry just wanted to put that out there, it may not be useful. ¯\_(ツ)_/¯ 1 Link to comment Share on other sites More sharing options...
sbest58 Posted July 28, 2020 Author Share Posted July 28, 2020 Hi Shrug, the animation is rendered in Maya, the shark is swimming behind glass text. Maybe too subtle, but the effect is about the refractions in the bevelled edges of the glass. Steve Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted July 28, 2020 Share Posted July 28, 2020 Yeah it is subtle, I see what you mean when looking more closely its more prevalent in certain areas. With the described approach it might still be possible but carry on, its a neat effect regardless. 😉 Link to comment Share on other sites More sharing options...
sbest58 Posted July 28, 2020 Author Share Posted July 28, 2020 Bit of trial and error - but got there in the end.😎 See the Pen vYLwVZy by sbest58 (@sbest58) on CodePen Thanks again 1 Link to comment Share on other sites More sharing options...
Pixelstolife Posted September 17, 2020 Share Posted September 17, 2020 Is this method fully responsive? Just wondering as you're using absolute pixel values for the height and width etc. If not, how's best to make this responsive? Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 17, 2020 Share Posted September 17, 2020 @Pixelstolife Hello and welcome to the GreenSock forums. To make this approach responsive, just update the necessary values in the refreshInit callback (so they'd need to be lets, not consts). Also use a functional value for the end property so that it gets updated: end: () => "+=" + imageHeight, Link to comment Share on other sites More sharing options...
buster808 Posted May 21, 2021 Share Posted May 21, 2021 On 7/27/2020 at 2:19 PM, ZachSaucier said: That's probably less due to the event listeners themselves and more due to your animation. Drawing bunch of images with little time between is probably not the best approach. I'd probably use <img> elements or a sprite instead. Here are a couple of examples using ScrollTrigger: Hi, do you know of a way to create sprite sheet from short video, easy to export frames, maybe Ill have to stitch them together. Thanks Link to comment Share on other sites More sharing options...
sbest58 Posted May 22, 2021 Author Share Posted May 22, 2021 Hi Buster, My workflow is to export video from After Effects as numbered frames, load the frames into Adobe Animate then select all frames in the library panel, right click and select create sprite sheet - create without spaces. I then import sprite sheet into Photoshop and crop any empty space so I have the right size for the rows and columns of frames, I usually sharpen and boost the colours also. Then I will run the image through ImageOptim to bring the size down to something acceptable to Google DoubleClick Studio. Hope this helps. 2 1 Link to comment Share on other sites More sharing options...
buster808 Posted May 22, 2021 Share Posted May 22, 2021 1 hour ago, sbest58 said: Hi Buster, My workflow is to export video from After Effects as numbered frames, load the frames into Adobe Animate then select all frames in the library panel, right click and select create sprite sheet - create without spaces. I then import sprite sheet into Photoshop and crop any empty space so I have the right size for the rows and columns of frames, I usually sharpen and boost the colours also. Then I will run the image through ImageOptim to bring the size down to something acceptable to Google DoubleClick Studio. Hope this helps. fantastic thanks a lot Link to comment Share on other sites More sharing options...
Dennyno Posted July 19, 2022 Share Posted July 19, 2022 Hi @ZachSaucier, this is an old thread. I always go back and forth to find something new or new approach to achieve something. In this case would be the same clipping a single background (around text) and moving just that, instead of the bunch of images / sprite ? Link to comment Share on other sites More sharing options...
Dennyno Posted July 19, 2022 Share Posted July 19, 2022 Like something I quickly did here See the Pen QWmprBV by DedaloD (@DedaloD) on CodePen (I didn't take to make all shadows, I guess it could be achieved a pseudo elem). (Actually only CSS, just to go to the point and explaining what I mean) This point is just to talk and understand, not something really pressing... Link to comment Share on other sites More sharing options...
Dennyno Posted July 19, 2022 Share Posted July 19, 2022 (Edit: changed bg and added extra shadows...) 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