Jump to content
Search Community

Mouseover Animation Works in Preview, but not Live

njfrese test

By njfrese
in GSAP

Moderator Tag
 Share
Go to solution Solved by Oscar Rottink,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Jonathan test

Jonathan

Posted
Posted

Hello njfrese, and Welcome to the GreenSock Forums!

 

if possible can you create a reduced / limited codepen example. This way we can see just the GSAP code you are having issues with. I was unable to find your code and your hover event handlers, since your site  has a lot of script tags to go through.

 

Here is a nice video tut by GreenSock on How to create a codepen example.

 

This way we can see your code in a live editable environment to better help you!

 

Thanks :)

  • Like 1
Link to comment
Share on other sites
Oscar Rottink test

Oscar Rottink

Posted
Posted

Not sure what browser you use but most of them have a 'developer tools'. I mostly use the one for Chrome. The console gives a good clue what is wrong I guess. What I see is:

[blocked] The page at 'https://www.ccmg.com/public/casedesign.aspx' was loaded over HTTPS, but ran insecure content from 'http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js': this content should also be loaded over HTTPS.

So the browser blocks content from non-secure servers. Since you load TweenMax from cloudflare you get this problem. Just put the files needed on the same server as the site. Guess that's the easiest solution.

Link to comment
Share on other sites
njfrese test

njfrese

Posted
  • Author
Posted

I apologize, but I can't seem to get anything to show up in CodePen, here:

 

See the Pen gzmai by anon (@anon) on CodePen

 

But I did greatly simplify the code on this page:

 

https://www.ccmg.com/public/casedesign2.html

 

This is literally ALL of the HTML on the page. The effect that won't work is a simple mouseover on the 8 boxes that removes the skew. That is it. The code in my Edge document (which works fine in preview) is this:

 

var rec1 = sym.$("rec1");
TweenMax.to(rec1,.1, {css:{skewX:0}});

 

Complete HTML:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
<title>Clark Capital Management Group</title>
<!--Adobe Edge Runtime-->
    <script type="text/javascript" charset="utf-8" src="edge_includes/edge.5.0.0.min.js"></script>
    <style>
        .edgeLoad-EDGE-54568212 { visibility:hidden; }
    </style>
<!--Adobe Edge Runtime End-->
<script>
   AdobeEdge.loadComposition('CaseDesign', 'EDGE-54568212', {
    scaleToFit: "none",
    centerStage: "none",
    minW: "0",
    maxW: "undefined",
    width: "900px",
    height: "450px"
}, {"dom":{}}, {"dom":{}});
</script>
</head>
 
<body>
<div id="Stage" class="EDGE-54568212">
</div>
</body>
</html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...