Jump to content
GreenSock

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

Is this effect/animation possible with GSAP?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi guys! I'm new and I'm currently watching the intro videos and while I'm at it, I just want to drop a question. In http://roninamsterdam.com after the preloader, there's a text "Ronin" being animated letter by letter. When it's done animating the word, it scales/zooms in to letter R to the size of your screen, and the white fill becomes transparent to show the image inside/behind the letter R. Can it be done with GSAP?

Link to comment
Share on other sites

Hi @rapola :)

 

Welcome to the forum.

 

GSAP can animate most any property. Whether you're using SVG, canvas or just some DOM text and divs, it can handle the animation for you. Something like the site you linked to in your post could be done with canvas or SVG masks. Please keep in mind that GSAP doesn't do any of the rendering. That is all done by the browser. GSAP is an animation engine. 

 

Hopefully that answers your question. Good luck with your learning and welcome aboard. Happy tweening.

:)

  • Like 6
Link to comment
Share on other sites

It's pretty easy to see take a peek at the source code using your browser's dev tools. You can usually see everything being used under the Sources or Network tab.

 

That site is using canvas for the graphics/rendering, and GSAP for the animations. A quick way to tell if a site is using GSAP is to use this Chrome extension.

https://chrome.google.com/webstore/detail/gsap-sniffer/ohjmhldioopcachmenfnhlbgmkaohgbb?utm_source=chrome-app-launcher-info-dialog

 

  • Like 5
Link to comment
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.
×