Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ZAJDAN

page is not loaded - status of 500 (Internal Server Error)

Recommended Posts

HELLO,

I am playing with greensock and first I have made simply animation:

var logo = $("#landing-logo");
var time = 3.5;
TweenMax.from(logo,2, {css:{top: "0px", scaleX:.2, scaleY:.2},ease:Strong.easeInOut});

it work nice, but now I try to implement it into another page and there is problem. This page contains a few div's and one the <div> contains PrestaShop engine. Could be the problem rightly because of the PrestaShop?

In debugger is hard to recognize it, because the page after refresh is not loaded.

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

Share this post


Link to post
Share on other sites

Hello ZAJDAN, and welcome to the GreenSock Forum!

 

Do you have a link to that page? I am not exactly sure what your seeing. It will be hard to see whats going on without seeing that page.

 

We love code we can test and test live, Here is a video tut on how to setup a codepen demo:

 

 

This way we can help you better!

 

Thanks!

  • Like 1

Share this post


Link to post
Share on other sites

Thank You for fast answer!

as I say on simple page it work perfect, but after implementation into bigger project is some problem and in this case is not easy to simulate via CodePen, mainly because of the PrestaShop engine.

But what I can do is provide link to my computer:

http://109.107.211.143:81/index.php

 

now the script is out and page could be loaded

when I put the script into console gs effect works as should be

but when the scrip is inside <head>..is problem

Share this post


Link to post
Share on other sites

it looks, that the DOM is not completely ready, but from beginning I have wrapped in $(document).ready

	$( document ).ready(function() {
					var logo = $("#landing-logo");
					var test = $(".pictograf");
					var time = 3.5;
					TweenMax.from(logo,2, {css:{top: "0px", scaleX:.2, scaleY:.2},ease:Strong.easeInOut});

});

and either way it doesn't help

Share this post


Link to post
Share on other sites

One thing i noticed is that you are animating the top CSS property. When animating your elements you should always animate using CSS transforms and not CSS position offsets like top, bottom, right and left. The reason being is that animating with CSS transforms x and y will give you better performance, animate on a sub-pixel level, and give you a more smoother animation. Unlike CSS position offsets like top which will only animate on pixel level, and will be choppy.

 

Check out this article by GreenSock's Jack on why to use CSS transforms over CSS position offsets.

 

https://css-tricks.com/myth-busting-css-animations-vs-javascript/

 

Regarding it not firing.. I would just start slowly removing JS scripts from your page to see what is causing the conflict. You have a lot of scripts on that page and any one of them could be causing a conflict.

 

If like you say it works fine until you integrate it into your project, than that tells me one of your scripts is causing the conflict and or image isnt loaded yet. You could add a window load event inside your jQuery document ready() method to make sure the window is loaded. Meaning images and other assets are loaded before running your animation code.

 

There could also be other conflicts since i see you are using a lot of different jQuery plugin. make sure none of them are conflicting or targeting elements your also animating with GSAP.

  • Like 1

Share this post


Link to post
Share on other sites

Thank You for the hints, but I think it will be something other

 

A-) server status error 500 - is something on server side, nothing with js

B-) when the web is loaded and I run the gs script on the web via console works nice - this is indication, there is no fight between js files

 

I think, that probably will be some problem on php side of Prestashop, something what is in a collision with the my gs js

Share this post


Link to post
Share on other sites

new info....I enabled in Prestashop dev mode and:

Fatal error: Uncaught --> Smarty Compiler: Syntax error in template "/mnt/databox/www/www.shop.com/themes/default-bootstrap/header.tpl" on line 85 "TweenMax.from(logo,2, {css:{top: "0px", scaleX:.2, scaleY:.2},ease:Strong.easeInOut});" - Unexpected ":", expected one of: "}" <-- thrown in /mnt/databox/www/www.shop.com/tools/smarty/sysplugins/smarty_internal_templatecompilerbase.php on line 85

Share this post


Link to post
Share on other sites

I don't see any obvious errors, but it might be choking on it because you have a decimal with no leading 0:

//Bad? 
scaleX:.2

//Good
scaleX:0.2

(GSAP doesn't really care, by the way - it sounds like you're working with a picky compiler :) )

  • Like 1

Share this post


Link to post
Share on other sites

solved

Prestashop compiler is realy pity :_)

but when the js code is wrapped into:

{literal}
<script type="text/javascript">
//javasciprt gs code
</script>
{/literal}

works

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×