Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

ScrollTrigger with canvas animation

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 post
Share on other sites

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.



Link to post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

@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 post
Share on other sites

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.