SOLVED Page Transition in Gantry 5
-
-
- R2ba5Aq4
- Rocketeer
- Posts: 75
- Thanks: 10
-
Hi
I remember seeing an option in a Gantry 4 template ("Corvus," I think) for a page transition effect that would fade in an entire page. This option was enabled/disabled from the administrator backend. How do I add this feature to a Gantry 5 template?
Thanks
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
R2ba5Aq4 wrote:
Hi
I remember seeing an option in a Gantry 4 template ("Corvus," I think) for a page transition effect that would fade in an entire page. This option was enabled/disabled from the administrator backend. How do I add this feature to a Gantry 5 template?
Thanks
Corvus used this JS file \templates\rt_corvus\js\load-transition.js. I would try creating as ATOM CSS/JS. Copy that file to your[JOOMLA-ROOT]/templates/rt_templateName/custom/js/load-transition.js, create the folders if necessary.
Then set the pathing to load-transition.js in your Atoms File Location and see what happens. -
The following users have thanked you: R2ba5Aq4
-
-
-
- R2ba5Aq4
- Rocketeer
- Posts: 75
- Thanks: 10
-
Hi
Thank you for the reply! I was able to add the load-transition.js file you referenced by following your instructions. At first, the transition effect didn't seem to work, despite the fact that the load-transition.js file was added to the page. After a couple of modifications to .js file, however, I was able to get it to kind of work, although not perfectly: sometimes the page seems to load first, and then the .js file loads and plays the effect, so there is a brief flash when you can see the page before it disappears and fades in. This probably has something to do with the modifications I made to the .js file, which are as follows:
On line 11, change:
var body = document.id('rt-transition');
to
var body = document.id('g-page-surround');
In addition, I had to comment out the condition in line 13:
if (Browser.Engine.gecko19 || (Browser.Engine.trident && !Browser.Engine.trident7)){
I'm not sure if these changes are correct, but they seem to work pretty well. I'll have to play around with it until it works properly, but at least I'm getting closer. If you see that I'm implementing this incorrectly (e.g., applying the effect to the wrong ID or erroneously commenting out code that needs to be there) please let me know.
Thank you for your time!
-
Time to create page: 0.036 seconds