Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

How to animate text | Corpora template

Featured Lock Resolved
Hi,

I installed the quickstart version of Corpora.
It comes with three preformatted slides which have the cool text animation of "Title" and "Post title"
I just added number four but I don't have an option to choose an animation an d the text of both title and post title are static.

How do I get this animated like the first 3?

Regards

12 Answers

Rifat Wahid Alif - Staff

More than a month ago #Permalink
it should slide 4, one by one. could you please share your url ?

MedZjik

More than a month ago #Permalink
Rifat Wahid Alif wrote:

it should slide 4, one by one. could you please share your url ?


http://www.eliteperformance.nu/dev
The first three slides were thos deafult installed, I chaed text and image.
Slide 4 (with the japanes garden) I added in the module settings via the "Add slide" option

Rifat Wahid Alif - Staff

More than a month ago #Permalink
Hi,
Here you will get documentation of Sp Smart slider: http://www.joomshaper.com/documentation/joomla-extensions/sp-smart-slider

MedZjik

More than a month ago #Permalink
I already read the documentation ofcourse, but it shows options I don't see.
I can't select an animation type.

These are the seetings (I changed nothing, it's default quickstart install):
http://www.eliteperformance.nu/jh/Module-tab.PNG

This is de slider page with slide number 4 open. This slide I added and does not abnimate text (it has the same settings as the other 3 slides which were preinstalled):
http://www.eliteperformance.nu/jh/slider-tav-with slide-4-collapsed.PNG

And this is is what I get when I add a slide (there is NO animation selection here):
http://www.eliteperformance.nu/jh/slider-tab-add-new-slide.PNG

Rifat Wahid Alif - Staff

More than a month ago #Permalink
We don't have option to select individual animation for individual slide. so, you can just chose slide style for global.

- Thanks

MedZjik

More than a month ago #Permalink
OK... But how do I do that?
Could you be more specific?

If I use global settings. I did this.. I get the slide without the text animation.
How do I get the animation?

Rifat Wahid Alif - Staff

More than a month ago #Permalink
you will get view file here: '/modules/mod_sp_smart_slider/tmpl/appico"(your selected slide style)"/view.php'. then you can modify it whatever you want.

- Thanks

MedZjik

More than a month ago #Permalink
This is not helpfull at all. I don't get it.

The View.php is a genarl for all slides. Why is it animating the fisrt 3 slides then and not the 4th?
I don't want to change anything in standard behaviour of your module, iI like to have it act the same for slides witch are configured the same.

I don't write code, I add slides by clicking buttons and that should work.

which leads back to my initial question:
why do the first 3 slides have animated text and 4th one (which has THE EXACT SAME CONFIG on the slide tab) does not animate??

MedZjik

More than a month ago #Permalink
One more addition:

If I change the order of the slides the 4th is't animated.
So it seems tehe code that makes the text animate is capped on 3 slides?

MedZjik

More than a month ago #Permalink
And one more addition:

I see that the sp-smart-corpora.css only describes 3 slides.....
If I add a slide in the backend isn't the css updated? Do have to do that manually? (if so .. this is not in the documentation and would be highly undesirable)

MedZjik

More than a month ago #Permalink
BUMP....

Rifat Wahid Alif - Staff

More than a month ago #Permalink
Paste this css in '/modules/mod_sp_smart_slider/tmpl/corpora/css/sp-smart-corpora.css':

/** 4th slide **/

.corpora-slider .slider-item.item-4 .sp-smart-title{
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
opacity:0;
}

.corpora-slider .slider-item.item-4.animate-in .sp-smart-title{
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
opacity:1;
-webkit-transition:1.5s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-moz-transition:1.5s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-ms-transition:1.5s cubic-bezier(0.680, -0.550, 0.265, 1.550);
transition:1.5s cubic-bezier(0.680, -0.550, 0.265, 1.550);

}
.corpora-slider .slider-item.item-4.animate-out .sp-smart-title{
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
opacity:0;
-webkit-transition:1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-moz-transition:1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-ms-transition:1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
transition:1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

.corpora-slider .slider-item.item-4 .sp-smart-posttitle{
-webkit-transform: translateY(300px);
-moz-transform: translateY(300px);
-ms-transform: translateY(300px);
transform: translateY(300px);
opacity:0
}
.corpora-slider .slider-item.item-4.animate-in .sp-smart-posttitle{
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
opacity:1;
-webkit-transition:1.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) 1000ms;
-moz-transition:1.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) 1000ms;
-ms-transition:1.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) 1000ms;
transition:1.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) 1000ms;
}
.corpora-slider .slider-item.item-4.animate-out .sp-smart-posttitle{
-webkit-transform: translateY(300px);
-moz-transform: translateY(300px);
-ms-transform: translateY(300px);
transform: translateY(300px);
opacity:0;
-webkit-transition:1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-moz-transition:1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-ms-transition:1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
transition:1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
}


.corpora-slider .slider-item.item-4.animate-out .sp-smart-posttitle{
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
transform: rotate(-15deg);
opacity:0;
transform-origin:right bottom;
-webkit-transition:1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-moz-transition:1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-ms-transition:1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
transition:1s cubic-bezier(0.680, -0.550, 0.265, 1.550);
}


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 110
Toufiq

Toufiq

Total Accepted Answers: 61
Sifat

Sifat

Total Accepted Answers: 45
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 22
Ofi Khan

Ofi Khan

Total Accepted Answers: 20

118

Templates

306195

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us