Jump to content
Search Community

ScrollTrigger with canvas animation

sbest58 test
Moderator Tag

Recommended Posts

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. ¯\_(ツ)_/¯

  • Like 1
Link to comment
Share on other sites

  • 1 month later...
  • 8 months later...
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

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.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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

  • 1 year later...

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...