Jump to content
Search Community

Actions on staggers after the first, especially hiding the previous

Juno911 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

Hey guys,

 

my CodePen actually does what I want. But not in the way I want. 

 

Target: Have a transparent (background-less) text-string dialogue (actually monologue) in an absolute position...

Challenge: ...without defining an absolute position, in one case with span, in other with div

 

Look, I want more than one element appear in the same position. But since its not a image, the previous staggerelement needs to be removed first, because otherwise the text overlaps.

 

Case div:

A change to only the appearance (visibility, opacity, autoAlpha [where is the difference?]) wont help. Because each div takes space. I need to work with display none and block. But how can I tell a stagger to be displayed=none when the second stagger appears? My workaround with absolute position is bad. It even needs to span a background color, because the prev elem of course is still there, just underneath the other.

 

Case span:

A span is already an inline element. Thats nice. But it does not support background. What I anyway dont want. So here I look also for an option, to get, then send it away (of course not with a second tween or line of code).

 

So I am looking for a pretty smart line of code. A single one which does the dialogue. Never with an absolute position, never with a background. In one case with div where I need to deal with display to ensure all is done in the same corridor. In other case with span, where I have no idea by now how to approach. I guess if the display thing is working with div, it will do the job with span as well, so one solution for both problems. Hopefully...

 

Thanks for any help on this.

See the Pen MGXKBN by generaal-locke (@generaal-locke) on CodePen

Link to comment
Share on other sites

6 hours ago, Juno911 said:

Look, I want more than one element appear in the same position. But since its not a image, the previous staggerelement needs to be removed first, because otherwise the text overlaps.

 

One thing you could do is replace the text in the element itself then you would be free to do whatever you want as far as css goes.

 

It's late so I'm not going to try and get into giving an example right now, however...

 

You could animate the change with the text plugin. https://greensock.com/TextPlugin.

 

And here's a link with various techniques for swapping text https://css-tricks.com/swapping-out-text-five-different-ways/

  • Like 2
Link to comment
Share on other sites

Thanks a lot. Text Plugin is my partner! It does exactly what I need, hence I will use it. The example page is nice, however, the CodePen examples are not running in my MAC Safari, Chrome or Firefox. Thats why I stopped to look into them and started to learn about Text Plugin. Again, thanks for the tipp! It is very welcome!

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...