Addon text effect

Replied by Heino on topic Addon text effect

Posted 1 year 10 months ago #64706
Merci Cédric!
That was easy, I saved your post and know now where to touch.
The only thing I changed additionally, was to set the second opacity fom 0 to 1, for the lettern stay visible.
One transition and that's it.

Support perfect, process complete. :)

...if I not had a new idea,
to delay the hole animation, for 1 or 2 seconds,
because the animation is too fast, too early in view
if the page load/view is to slow, the animation is already on the half way...
For that I would care yet if I use the animation.

I have tried a few combinations but had no luck, I'm not an expert ;)
... and it's just an idea that comes from rehearsing the real situation, no priority at the moment,
no reason for sleepless nights! :)

Tous nos vœux et nos meilleures salutations en France,

Tino

Page Builder CK Pro v3 +++ Template Creator Pro v5 +++ Tiny MCE +++ JCE
Browser: Iridium (Chrome) +++ Waterfox (Mozilla)
Joomla! v5 +++ php v8.2.12 +++ mysql v8.0.35

by Heino

Please Log in or Create an account to join the conversation.

Replied by ced1870 on topic Addon text effect

Posted 1 year 10 months ago #64708
great that you managed to do it :)

for the other combinations, unfortunately I'm not so familiar with the animate.js
if you want to learn about it, you can check the official website
animejs.com/

I have used some animations from there
tobiasahlin.com/moving-letters/

as indicated in the edition of the effects.
Of course you can create your totally custom effect, but you must play yourself with the script

Joomlack Webmaster and Developer

by ced1870

Please Log in or Create an account to join the conversation.

Replied by Heino on topic Addon text effect

Posted 1 year 10 months ago #64722
Hi CEd,
for the Movin Letters is a link within PBCK itself..., I have already been there.

I decided to experiment with the little script, already in my custom.js from yesterday.
Eh voilà,
animation starts after 2 seconds delay(duration)!

I am excited (੭ ˘ ᵕ˘) ☆゚.*・。゚

Après tout, il faut bien faire quelque chose pour soi-même,
for me it works well,
peut-être que tu veux l'utiliser :)

Regards,
Tino

#13 from plugins\pagebuilderck\animatedtext\assets\animatedtext.js
Code:
/*Für PBCK Animate Text 1 Durchgang */ function PBCK_animatedtext_effect_13(selector) { PBCK_animatedtext_splitTextInWords(selector); anime.timeline({loop: false}) .add({ duration: 2000 // animation starts after 2 seconds delay; duration works, delay don't }).add({ targets: selector.querySelectorAll('.pbck-word'), scale: [14,1], opacity: [0,1], easing: "easeOutCirc", duration: 800, delay: (el, i) => 800 * i }).add({ targets: selector, opacity: 1, // keep letters visible by 1 instead of 0 duration: 1000, // easing: "easeOutExpo", // delay: 1000 }); } /*Für PBCK Animate Text 1 Durchgang END */

Page Builder CK Pro v3 +++ Template Creator Pro v5 +++ Tiny MCE +++ JCE
Browser: Iridium (Chrome) +++ Waterfox (Mozilla)
Joomla! v5 +++ php v8.2.12 +++ mysql v8.0.35

by Heino

Please Log in or Create an account to join the conversation.

Replied by ced1870 on topic Addon text effect

Posted 1 year 10 months ago #64729
great ! thank you for sharing this :)
I will try to take some time to write a bit of doc about that

Joomlack Webmaster and Developer

by ced1870

Please Log in or Create an account to join the conversation.

Replied by RevoLion on topic Addon text effect

Posted 1 year 6 months ago #66207
This worked amazingly for me. Now if we can figure out how to have it fade out and replay with 2 more different word sets and then loop back to the first similar to how to can get Unite Revolution Slider 2.0 to work. CEd PageBuilderCK might then be the new top Animated slider a great competitor. :)

Kindest Regards,
JT

Please Log in or Create an account to join the conversation.

Replied by Heino on topic Addon text effect

Posted 1 year 5 months ago #66438
Hello there!
I now found a place to build in one of the "Animated Text" effects :)
My band website is now updated to J4, after being sure that I'm able to reconstruct my "slideshow-modul-open-close" effect will work... For a hobbyist like me a little challenge. But now it's done and someone would have to take care of the content... :)

I installed the effect on the home page on the word "Welcome", you can hardly miss it.

I used text-effect #2, and customized the java script (putting in custom.js)
Code:
//For PBCK_animatedtext_effect_2 - one cycle function PBCK_animatedtext_effect_2(selector) { PBCK_animatedtext_splitTextInLetters(selector); anime.timeline({loop: false}) .add({ duration: 500 // animation starts after 2 seconds delay; duration works, delay don't }).add({ targets: selector.querySelectorAll('.pbck-letter'), scale: [30,1], opacity: [0,1], translateZ: 0, easing: "easeOutCirc", duration: 1500, delay: (el, i) => 200*i }).add({ targets: selector, opacity: 0.2, duration: 10000, easing: "easeOutExpo", delay: 27000 }); } // For PBCK_animatedtext_effect_2 - one cycle END

Now if you wanna have a look at it:
12monthslater.de

How is it looking? :blush:
I use 1920x1080 for building and viewing on a 24" screen. Don't have a smartphone.

+++

PS: Unite Revolution Slider looks really good, maybe CEd can take over the whole thing, it's only available for J3.
Component & Module: extensions.joomla.org/extension/unite-slider/

But it would be a big effort just to add an effect. And how offen one would use it.
A user would have more questions than fun with it.
A webmaster builds this in when it's needed.
I use it just one time...

On the other hand, we would only need a "content slider",
then the rest would be easy.
Do we have a "content slider" for articles or modules, CEd?

Ok, enough for today,
have a nice time and watch my Animated Text #2! :)

Regard,
Heino

Page Builder CK Pro v3 +++ Template Creator Pro v5 +++ Tiny MCE +++ JCE
Browser: Iridium (Chrome) +++ Waterfox (Mozilla)
Joomla! v5 +++ php v8.2.12 +++ mysql v8.0.35

by Heino

Please Log in or Create an account to join the conversation.

Time to create page: 0.727 seconds

Fast and powerful creation, customizable and responsive.

Read More

We have 760 guests and no members online