Jump to content
Search Community

Text animation

hando test
Moderator Tag

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, 

New to the forum and to Greensock. I've only started learning it over the past week or so.

I came across this text animation on the link below, where the text transforms up but it looks like it comes from behind a hidden element.

 

Would anyone know how to recreate this or could point me in the direction of some materials where I could find out how to do it myself?

 

https://likely-story.co.uk/

 

Thanks in advance!

Link to comment
Share on other sites

Hey hando and welcome to the forums! 

 

The key, as seen in mikel's demos, is generally using CSS' overflow: hidden property which you can read more about here

 

If you need to reveal it in a more fancy way than just a rectangle, it'd require using something like clip-path, either in CSS (which has less browser support) or SVG (more support but still not perfect for older browsers). 

  • Like 2
Link to comment
Share on other sites

Zach is getting clever today. ;) 

 

My stuff is usually part of a larger SVG. I can't work too much with CSS because it scares me. :D

 

Yours also isn't working correctly on my iPad. It's drifting off the right side of the window for some reason.

Link to comment
Share on other sites

  • 1 year later...
  • 2 years later...

@Aamir Khan, it's pretty tough to troubleshoot without a minimal demo - would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored elements and the GSAP code is best (avoid frameworks if possible). 

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. It's usually good to start a new thread rather than hijacking a 2 year old one, by the way. :)

Link to comment
Share on other sites

9 hours ago, GSAP Helper said:

@Aamir Khan, it's pretty tough to troubleshoot without a minimal demo - would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored elements and the GSAP code is best (avoid frameworks if possible). 

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

avove is the link of my codepen. I have svg and I want to animate the text of that svg using id of text element. How can I apply fade up character effect on my text.

 

 

9 hours ago, GSAP Helper said:
 

 

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. It's usually good to start a new thread rather than hijacking a 2 year old one, by the way. :)

 

Link to comment
Share on other sites

You didn't save any of your changes - you just linked to our empty starter template :) Make sure you click the "fork" button in the bottom right on CodePen and then make your changes and save them. Copy that [new] URL and paste it here. But actually, it would be much better for you to just start a NEW thread in the forums, please. You're hijacking a thread that's several years old. So all previous posters are getting notifications. 

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.
×
×
  • Create New...