[Upgrade request for Osublake's fine header code example]

@GreenSock

I also noticed that later... You were just a bit faster in your reply

See the Pen YzjGZze by violacase (@violacase) on CodePen

[Upgrade request for Osublake's fine header code example]

Spoken too soon. In your pen scrolling up and down changes the state immediately to begin or end state. I miss the in between state...

[Upgrade request for Osublake's fine header code example]

So fast and so fine! Many thanks brother😁

[Upgrade request for Osublake's fine header code example]

I understand @Osublake is now inactive due to illness. 
I hope it's not too serious...  I think he's a great programmer and a very nice guy. His contributions to this forum are of excellent quality. 

That being said: This pen behaves exactly as I would like to use it. However, the code is written with an old Gsap version. I can't manage to upgrade the code to the latest version.
Does anyone have the time and inclination to do that for me? It would be great.

See the Pen NdEONL by osublake (@osublake) on CodePen

[Vue3 new composition API register problem]

Sorry my fault. Problem is over.  I tried to import from "gsap". Should be "gsap/all" 

[Vue3 new composition API register problem]

dependencies in package.json gives: 

 "gsap": "npm:@gsap/shockingly@^3.9.1",

[Vue3 new composition API register problem]

Hey OSUblake, long time no see

This gives another problem, i.e.:

vue-router.esm-bundler.js:72 [Vue Router warn]: Unexpected error when starting the router: SyntaxError: The requested module '/node_modules/.vite/gsap.js?v=276db396' does not provide an export named 'DrawSVGPlugin'

Perhaps something to do with the vite bundler? Perhaps vite is looking at the wrong Gsap package?

[Vue3 new composition API register problem]

<script setup>
...
import { gsap } from "gsap/all"
gsap.registerPlugin(DrawSVGPlugin)
...
</script>

Gives : Uncaught (in promise) ReferenceError: DrawSVGPlugin is not defined

 

I'm stuck...

[Chrome message: '[Violation] Forced reflow while executing JavaScript took <xx> ms']

I found that it has not much to do with gsap. It's a Vue2 and unfortunately also Vue3 thing. I'm not afraid. Vue does it's DOM refreshes. In updating the DOM who gets fastest ? Gsap or Vue?

Firefox is silent.

[Chrome message: '[Violation] Forced reflow while executing JavaScript took <xx> ms']

Thx again @OSUblake  The link you gave surely gives the right direction.

[Chrome message: '[Violation] Forced reflow while executing JavaScript took <xx> ms']

With a click handler I abort  an ongoing gsap procedure.

Chrome complains with the title's message. Is this something to take into concern?.

[Does SplitText.revert() frees the object itself from memory?]

Many thanks @OSUblake!

And a big hug for explaining just a bit more then my question was about initial 

[Does SplitText.revert() frees the object itself from memory?]

@Cassie Thanks for so far.  I really want to be certain. In my future (text fun) projects I think I have to create (and revert of course) many instances in a single page. 

[Does SplitText.revert() frees the object itself from memory?]

Since a new instance of SplitText is a 'new' object I wonder if  Splittext.revert() not only clears the DOM but also the object itself from memory. 

If not how do I free the object itself?

[Animating a SplitTexted poem with minimal pauses now and then. How to do?]

@Cassie Yes, I understand. Clear explanation.

In this case 'a poem' might be rather important to have these aria things etc. well done. So íf you'd like to fork it you gonna make me a happy old man.

[Animating a SplitTexted poem with minimal pauses now and then. How to do?]

49 minutes ago, Cassie said:

This is a lovely solution. Nice and screenreader friendly too. 🙌

Explain this screenreader friendliness please. The whole animation thing is unfriendly in my opinion. Animation is a difficult thing. You can't always satisfy all the community.

@Cassie: Are you willing to fork the above pen with accessibility extras so I can see what you mean?

[Animating a SplitTexted poem with minimal pauses now and then. How to do?]

Perfect Jack! Very nice solution. Thanks for your work.😘

[Animating a SplitTexted poem with minimal pauses now and then. How to do?]

See the Pen RwpbGeB by violacase (@violacase) on CodePen

 

I found a perhaps dirty way to get a rather fine solution for this problem with just HTML/CSS. I'm not satisfied but it works.

[Animating a SplitTexted poem with minimal pauses now and then. How to do?]

Hi @akapowl,

It works fine  Thanks for the time you spent for the contribution! Much obliged.

 

Two things:

1. Your pen is private. Could you make it public so we can fork and play with it?
2. Although it DOES the job fine for a simple task, on the longer run it is a cumbersome and browser expensive solution I think.

I'm hoping that perhaps it is possible to emit a call back function after a certain  'word'  has been processed. That would make life a lot easier! Perhaps with the modifier plugin?

 

[Animating a SplitTexted poem with minimal pauses now and then. How to do?]

I am trying to animate the text of a poem using SplitText. The poem has no punctuation.

The preliminary result is quite nice. But now timeline timing is linear. I would like to take a short pause here and there, for example after the word 'heavens'. I have no idea how to make that happen. Anyone any idea? Maybe not work with SplitText?

See the Pen abpxKyo by violacase (@violacase) on CodePen

[Broken link on https://greensock.com/showcase/ page]

So sorry. My fault. Ad blocker was interfering.

[Broken link on https://greensock.com/showcase/ page]

On top of the page the link to 'showreel videos' is broken.

[SVG XLink declaration still obliged?]

Hi @PointC,

 

On forehand I was examining a very old page of MDN I think. Further searching on this subject gives the same answer as you give. Thanks.

[SVG XLink declaration still obliged?]

Is the SVG XLink declaration in svg files obliged for f.i. GSAP to run without any problems on modern browsers?

 

[Firefox devtools css 'declaration dropped' messages. A concern?]

You are right Jack. Not really related with gsap. With not loading any css nor any gsap still I got some of  these 'error's.  Probably a Nuxt setup issue. I'll ask the Nuxt community.